16 Gorgeous Web Safe Fonts To Use With CSS
Posted on 22. Jul, 2009 by Web Design in Web Development
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. 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
[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]
By the way, if you feel frustrated with designing, or just want an easy way out, you can always create a free professional website with Wix.
98 Responses to “16 Gorgeous Web Safe Fonts To Use With CSS”
Leave a Reply
Loading ...
www.9oar.com
03. Feb, 2010
that’s really nice mate , hope to have one
Philippe
20. Feb, 2010
Thanks a lot, it helps a lot. However, could you test them directly into the browser instead of a picture?
Matt
25. Mar, 2010
Great post. Have you tested these in IE and FF? I noticed that Gill Sans doesn’t work within Firefox… are there any of the others that have browser compatibility issues?
Thanks again for the post!
Gulshan kumar
06. Apr, 2010
Nice info thank’s
Moxylosophie » Blog Archive » Choosing Fonts – part 1 of Series
10. Apr, 2010
[...] Web Safe Fonts: 16 gorgeous web safe fonts http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css [...]
@font-face Changing the Face of the Web
15. Apr, 2010
[...] the post on WEBDESIGNDEV “16 gorgeous web safe fonts to use with css” to get an idea of fonts you can use [...]
Designing & Coding an Email Newsletter | New York Web Design
19. Apr, 2010
[...] 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
29. Apr, 2010
[...] 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()); [...]
Building Your Cyber Home The Ruby-Slippered Sisterhood :
21. May, 2010
[...] to find this font usurped by Arial when viewed on a Windows PC running Internet Explorer. Sniff. This blog will tell you which fonts are “safe” to use across all [...]
alok kumar mistry
24. May, 2010
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
26. May, 2010
Thank you for the great article. Seems we do not have to stick to Arial and Georgia as web-safe anymore.
Sin Biechele
31. May, 2010
Comic Sans MS is web-safe, too.
Sorry designers
Muzzer
03. Jun, 2010
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
10. Jun, 2010
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
22. Jun, 2010
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
23. Jun, 2010
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
24. Jun, 2010
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
11. Jul, 2010
“Copperplate Gothic Light” doesn’t read with Firefox just for further reference.
However thank you for sharing.
Le grand YAKA ! » Blog Archive » [WEBDESIGN] Le plein de ressources !
17. Jul, 2010
[...] 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. [...]
film
17. Jul, 2010
Very useful post thank u
Jason Spencer
23. Jul, 2010
FYI – Windows 7 does not ship with Century Gothic. I just learned that the hard way, and am seeking an alternative font.
Johan
25. Jul, 2010
Thanks
sean
29. Jul, 2010
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
29. Jul, 2010
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
31. Jul, 2010
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
03. Aug, 2010
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
06. Aug, 2010
Century Gothic is my all time favourite in this list. Thank for sharing them
Luis Lopez
06. Aug, 2010
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
20. Aug, 2010
Dude. Where is Comic Sans MS ??
j/k
James
01. Sep, 2010
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.