16 Gorgeous Web Safe Fonts To Use With CSS
I have gathered together a nice resource list of stunning web safe fonts that you can use with CSS stylesheets. “Web Safe” fonts mean that they will be extremely common on most versions of Windows, Mac, Linux etc, so they will be viewable by more a less everyone. Before I list these fonts, I want to let you know about one of the best font resources that has over 170,000 fonts to choose from. I strongly suggest you check it out. Now let’s continue with the article…along with each font is a preview image of what it looks like, and the raw CSS code that you can copy and paste directly into your own stylesheet to use the font. If you have any others please drop in a comment.
Impact
[css].classname {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
}[/css]
* * * * *
Palatino Linotype
[css].classname {
color: #333333;
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
}[/css]
* * * * *
Tahoma
[css].classname {
color: #333333;
font-family: Tahoma, Geneva, sans-serif;
}[/css]
* * * * *
Century Gothic
[css].classname {
color: #333333;
font-family: Century Gothic, sans-serif;
}[/css]
* * * * *
Lucida Sans Unicode
[css].classname {
color: #333333;
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
}[/css]
* * * * *
Arial Black
[css].classname {
color: #333333;
font-family: ‘Arial Black’, Gadget, sans-serif;
}[/css]
* * * * *
Times New Roman
[css].classname {
color: #333333;
font-family: ‘Times New Roman’, Times, serif;
}[/css]
* * * * *
Arial Narrow
[css].classname {
color: #333333;
font-family: ‘Arial Narrow’, sans-serif;
}[/css]
* * * * *
Verdana
[css].classname {
color: #333333;
font-family: Verdana, Geneva, sans-serif;
}[/css]
* * * * *
Copperplate Gothic Light
[css].classname {
color: #333333;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
}[/css]
* * * * *
Lucida Console
[css].classname {
color: #333333;
font-family: ‘Lucida Console’, Monaco, monospace;
}[/css]
* * * * *
Gill Sans – as much as I WISH this was web safe, it is not!
[css].classname {
color: #333333;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}[/css]
* * * * *
Trebuchet MS
[css].classname {
color: #333333;
font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
}[/css]
* * * * *
Courier New
[css].classname {
color: #333333;
font-family: ‘Courier New’, Courier, monospace;
}[/css]
* * * * *
Arial
[css].classname {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}[/css]
* * * * *
Georgia
[css].classname {
color: #333333;
font-family: Georgia, Serif;
}[/css]
Don’t forget to check out 170,000+ fonts collection at Fonts.com.
Ultimate Designer Toolkit: 60,000+ Premium Design Items, Only $49!
READY TO TAKE WEB DESIGN SERIOUSLY?
Today, I am giving away Web Design Riches, the ultimate guide on how to run a profitable web design business. Enter your name and email below to get instant access.
Related Posts
Subscribe to RSS Feed
Designing & Coding an Email Newsletter | New York Web Design (3 years ago)
[...] must be web safe, including the font and colors. A list of web safe fonts are below, there are a few more, but these are the safest [...]
Web Fonts « Blog #5 is Alive (3 years ago)
[...] In freelancin, link on April 29, 2010 at 3:58 pm 16 Gorgeous Web Safe Fonts To Use With CSS | Web Design Tutorials | Creating a Website | Learn Ado…. ▶ No Responses /* 0) { jQuery('#comments').show('', change_location()); [...]
alok kumar mistry (2 years ago)
Is Verdana really on everyone’s Pc? Im not sure though I’ve used Verdana in my site after the suggestion from u.
Dani Raykova (2 years ago)
Thank you for the great article. Seems we do not have to stick to Arial and Georgia as web-safe anymore.
Sin Biechele (2 years ago)
Comic Sans MS is web-safe, too.
Sorry designers
Muzzer (2 years ago)
Nice fonts, but these are not all web-safe. A web-safe font is one that is pre-loaded on every machine. Copperplate and Century Gothic are not.
In any case, whether web-safe or not, a font should always be defined in CSS followed by a font-family. That way even if the font is missing or corrupt, the browser will default to an acceptable alternative.
The CSS for this is define the chosen font first and then follow it with the font family, like this:-
font-family: “Arial Black”, Arial, Helvetica, sans-serif;
The browser will try to display Arial Black first, then if it can’t find it will default to the other fonts.
If you don’t do this and the font is missing, the browser will display the font in the user’s default font setting.
Courier New, anyone?
weeserFan (2 years ago)
well these days it dosen’t matter if fonts are “web-safe” each font that you see can be used in your site using css
you just need to convert them to woff fonts (for firefox)
i found a site that does that and gives you the css code too
http://orionevent.comxa.com/otf2woff.html
it can even do it the other way around (helped me when i lost my fonts and had to use the ones on my site)
http://orionevent.comxa.com/woff2otf.html
cheers
Gef (2 years ago)
Most of these font’s aren’t web safe. Web safe font’s haven’t changed in the last 10 years. Mostly because people are still using PC’s that have 10 year old OS’s on them (XP).
To be truly web safe they need to be available on all OS’s, Linux, Mac and PC in the same style. This is why most sites have stuck with them.
Web safe font’s have also been tweaked to work at small sizes as pixel fonts. Because believe it or not people still use PC’s with no font smoothing enabled (at small sizes).
There are plenty of alternatives for things like titles or short bits of large text (cufon, sifr etc).
For body copy, it’s probably best to stick with the true web safe fonts for now. @font-face is the alternative, but you need to have paid licensing on the font and you also need to be very careful of the font you choose, lest you render your entire site unreadable to some people.
Jaemi (2 years ago)
It could just be me, but I would never put Courier New or Times New Roman on a list of gorgeous fonts. Generally speaking, I wish I could get them off my computer.
This is part of my I’m so glad @font-face will be a wide-spread option soon, and that Google Font API and FontSquirrel @font-face kits makes it so easy.
Constant Collide (2 years ago)
Love using Palatino as a body text and Arial Black as headers. Great list and even beter is that we don’t have to stick with Verdana, although Muzzer has a great point about not every machine having them.
Shangiedangie (2 years ago)
“Copperplate Gothic Light” doesn’t read with Firefox just for further reference.
However thank you for sharing.
film (2 years ago)
Very useful post thank u
Le grand YAKA ! » Blog Archive » [WEBDESIGN] Le plein de ressources ! (2 years ago)
[...] 16 Gorgeous Web Safe Fonts to use with CSS est une sélection de polices de caractères que l’on peut utiliser dans toutes nos CSS sans risques. [...]
Jason Spencer (2 years ago)
FYI – Windows 7 does not ship with Century Gothic. I just learned that the hard way, and am seeking an alternative font.
Johan (2 years ago)
Thanks
sean (2 years ago)
hey.. dont be hatin’ on Courier New… you can’t appreciate it’s retro fixed-width charm? I can almost hear the front-strikes now…
patricknas (2 years ago)
I agree with Jaemi, these fonts are not gorgeous. These fonts are common fonts. As a graphic designer i only use verdana and georgia, i can live with these fonts. And they appear to be on (almost) every computer. I really want to use Typekit (http://typekit.com) so you can use the fonts you like and save for the web too.
Sux2b (2 years ago)
I’m a little confused by this article. You are talking about web safe fonts but you display the fonts using images. How safe can they be if you have resorted to using them in images instead of simple HTML. Could it be that they are not web safe and that they really don’t look very nice at all.
Nic (2 years ago)
I’ve found the list here ( http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html ) to be incredibly useful info about web-safe fonts. It only covers fonts which will always work and even provides a comparison of browser visual differences!
Website Design Delhi (2 years ago)
Century Gothic is my all time favourite in this list. Thank for sharing them
Luis Lopez (2 years ago)
Dude thats a cool article, I have a list of fonts within Mac, WIndows and Linux by default and a Statistic of fonts that may have the users.
Just one thing, by now I can’t see the shortcode [css] working on you
fix that.
Rydgel (2 years ago)
Dude. Where is Comic Sans MS ??
j/k
James (2 years ago)
Some nice fonts there but as others say, not all truly ‘web-safe’ in that they are not available on some OSes.
http://code.google.com/webfonts is a great way to be web-safe into the future, and it has some good fonts available.
PlrSifu (2 years ago)
Some of these font family combinations dont work, im viewing it in IE8 and FF3.3,
especially the Lucida Sans Unicode, Lucida Grande, Sans Serif Combo
WebDesignPrint (2 years ago)
Great article, although as most people pointed out, some of these fonts don’t really work in certain environments, not to mention that it would be safer to add more alternatives to the font-family code.
James, thanks for the link, I will check google fonts and see how they work.
internet media (2 years ago)
Hi..
excellent feature… …you have mention very important message about font-family..this is very informative..
Thanks for suggested link….
Richie Bianco (2 years ago)
Thank you. I respectfully disagree about Century Gothic.
I turn all my web clients away from Century Gothic, it is not standard on Windows, especially Windows 7. The company that owns the Century Gothic Typeface has done a good job getting all the free versions off the web so that they can stick you for $30.
Lisa (2 years ago)
Gill Sans works if the name is put in inverted comma’s ie. “Gill Sans”. I’m sure this is what needs to be done with any font with two words or more.
Brett Widmann (2 years ago)
Very nice list. I also like to use Lacuna
Kate (2 years ago)
This is a great list. Eventhough all of the fonts aren’t truly websafe, they are pretty close. And they all can be beautiful (TG no Comic Sans on this list – tacky!) if used in the right way and make sense with the branding. I don’t love Century Gothic, but I work on a lot of children’s branding/sites, and it fits very well in that market. Times new Roman can be very beautiful and sophisticated if you play with the spacing and/or use all caps. And courier new in all lower case is awesome for a vintage look. Check out Anthropologie (one of my fave sites) – even they use it – LOVE!
One more note – Lacuna is free, but it isn’t websafe. Fun font, though!
Brixter (2 years ago)
I don’t think you have to be careful with those fonts that is not common on certain OS. I usually include multiple fonts like:
font-family:Arial,Verdana,Lucida Console,Arial Black, Impact, Verdana, Tahoma, Georgia
that’s that.
Brixter (2 years ago)
Font-Family is not just for specifying Font Families, you can also use it for instance if you want two different fonts like Verdana and Georgia. So if the your browser doesn’t support verdana(or you deleted your computer font for verdana), the browser will get the second font which is Georgia. It’s a fallback feature.
Darrell (2 years ago)
“Web safe” and “extremely common” are two entirely different things.
Referring to Gill Sans, a proprietary font, as “web safe”, is, to be charitable, inaccurate. Other fonts mentioned are likewise not universal.
Kate (2 years ago)
Brixter is correct – setting default fonts is a great way to use a common font you love, but have a websafe back-up. Just make sure you check your site with the default font to make sure it looks good – ie. spacing, size, etc.
Lisa, I wish that were true about using “”, but unfortunately it doesn’t work that way. A font must be installed on the OS to work. The only alternative method I know of is to use jquery script which installs the font on the server, and therefore allows you to use any font you want, without having to compromise text content. Haven’t used it yet, but i am working on a site in Gill Sans right now (love this font), and I think I might give it a try because I cant find a default websafe font I love for this one.
Web designer kent (2 years ago)
Good post, I’ve a passion for typography and get frustrated with the media constraints I have to work with (cross browser tests, IE6, Mac & PC screen resolutions). But thankfully it’s getting better. thanks for sharing.
Brochures Company (2 years ago)
You consider Arial and Verdana gorgeous fonts for the web? There has to be a couple more beautiful than those two. They might be better suited for the 16 most common fonts list. When I design brochures or business cards, I never use Arial or Verdana. Just too boring.
Gerlach Firm (2 years ago)
Thank you, this would be a quick reference for my customers to look at while deciding on a font if they dislike what i choose for them.
Michael Merrill (2 years ago)
Funny how all the examples of the fonts are imgs and not text lol
Ben C (2 years ago)
Arial Narrow shouldn’t be on this list. It is supplied with Mac OSX and Microsoft Office from 2003 onwards, plus some versions of Works, but nevertheless most Windows users will not have it on their systems. The same goes for Linux, although some systems may have Liberation Sans Narrow, which is said to be a close equivalent.
Courtney (2 years ago)
Gil Sans is not web safe. Wish it was!
kike314 (2 years ago)
Great article, but, as says Jaemi don’t forget about Font Squirrel. It’s amazing!
mikeo (2 years ago)
not to be a pain but how is this news. most of these have been “websafe” for quite some time. a few are not installed on all machines but that being said if you have a good font stack there really shouldn’t be any issues.
Mohamed Alaa (2 years ago)
Wowww very nice collection
and Amazing Article…
Mr.Mark (2 years ago)
Great list! I’m using it all this time already to reference for web-safe fonts. Though I found that Gill Sans is not web-safe. I only comes with the MS Office package. So if you don’t have that installed, it wouldn’t work for you. I wouldn’t consider that one web-safe then.
John Ryan (2 years ago)
Glad to here that “IMPACT”is a web safe font. I’m always using it in photoshop and should look great on a web page.Thanks
Brett Nimphius (2 years ago)
This only applies to desktops, mobile phones on ios as well as ipad do not not allow some of these fonts. Something to keep in mind especially these days where we need to build for mobile as well as desktop viewports.
Shif (2 years ago)
check google web font api, and the css3 new @font-face, they are really good alternatives for good looking fonts
Mike Bethany (2 years ago)
I love Gill Sans when I’m feeling a little Helvetica overload.
Litmus Design (2 years ago)
Hey great post!! Yes my favorite font also included i.e. Trebuchet MS. I also like Calibri.
sloughin (2 years ago)
Tried your copperplate css to no avail. The font sample is a .png image, so you’re not actually styling this list to show samples.
The error I’m seeing (in FireFox) w/FireBug is:
Expected end of value but found ‘/’. Error in parsing value for ‘font-family’. Declaration dropped.
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
So it apparently doesn’t like the “/” in the font name.