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
Bjørn (3 years ago)
Nice collection!
Dedé Villela (3 years ago)
I like to use ‘Tahoma’ as sans serif and ‘Georgia’ as serif. Beautiful combination!
rubric (3 years ago)
The problem is that a lot of these are not licensed for use as webfonts. So, my impression is, you stand to garner some stern words from the license holders of the fonts you are using.
diogo (3 years ago)
I don’t think you need any license for this, since the fonts will only work if they are installed in the viewer’s computer. Or am I wrong?
graphic design Melbourne (3 years ago)
Really?
oh dear..I didn’t even know this- I just assumed that if a font is purchased you automatically have a licence to do as you please…kinda…
Francisco Zarabozo (3 months ago)
Technically, you are NOT using any fonts when you design a website. You are only declaring a font name to the browser. When the client opens a website and his computer finds that declaration, then it’s that client’s computer the one using the font to draw the web page in the screen.
So, no. You are not liable in anyway for declaring whatever font name you want to declare in your HTML code. Only if the client has the font in his computer, then the client will be using it. And, if the client has any font installed that is not licenced for HTML-viewing (which I’m sure is not the case for any font in the world), then it should be the client’s responsibility, not yours.
airtonix (3 months ago)
Aren’t these fonts from 1998?
I think you are a bit confused as to what is being referred to here when the words “license”, “webfont” and “user” are presented.
The concept being presented is the use of webfonts stored on a webserver and presented to a clients browser as assets to render the page.
Therefore, “user” is the person legally responsible for running the website. So in this case a user of the license agreement that stipulates acceptable circumstances and limitations of the use of the font, a user of the license.
You can’t assume most fonts you might have in ~/.fonts or /usr/share/fonts/ would contain a section on webfonts in their license (if you even bothered to store the license)
However, it’s all roses if you use the google webfonts archive.
ChrisR (3 years ago)
Copperplate / Copperplate Gothic Light
Is that slash in there valid css reference to a font?
Beaver (3 years ago)
You seem to have forgotten Comic Sans, quite possibly the best font ever. Please correct this blatant oversight immediately.
Vince D (3 years ago)
Palatino Italic is even more gorgeous than Palitino. It’s scripty and hand written-ish and not just a slanted take the Romans, it is a complete styled set based on classical Italian Renaissance forms… the glyphs are very different. Created by none other than Hermann Zapf… I personally think this italic is hands down his best work. Try it out at a large point size. Yummy@!
Kate Payton (3 years ago)
Of course this is a joke!
Now lets never speak of that horrid font, ever again.
J. Albert Bowden II (3 years ago)
to go along with wedge, if you are pushing web safe, shouldn’t you also be taking standards into account? as in, most serif fonts, in smaller sizes, are not very viewable/accessible on the web. if your intent was to promote the serifs for image replacement, bravo, however you might want to include that in your post.
lastly, none of these fonts are anything new. i’ve seen this post, numerous times, a few years ago.
TwilighersAnonymous.com (3 years ago)
I agree with Wedge.
But good try! =)
Wedge (3 years ago)
I appreciate simple resources like this for when I’m explaining the basic constraints of web design – I would have preferred *more* text and fewer images of the fonts.
If ‘web safe’ there should be no problem in displaying the text using CSS only. I feel this exercise fails by it’s own standards.
Poindexter (3 years ago)
I agree, why not put a paragraph of lipsum text below the CSS for each font? If you leave the image people will be able to see if they have the font.
graphic design Melbourne (3 years ago)
Yeah I agree with Poindexter’s comment- if there was some lorem ipsum people would have the chance to see if they have the text/font.
Also, and it may well be a silly question, when you say ‘web-safe’ what do you imply? I cannot help but assume that web-same implies that these fonts are standard and that every computer has them installed as standard fonts and hence can be seen by people?
PS: I do like the post
Andy (3 years ago)
I think Gill Sans is one of the best there.
5h4rk (3 years ago)
Great stuff! I didn’t know that Gill Sans is available in Windows. And yeah, it would be nicer if you can throw in a paragraph of real text for each of them.
Jeff (3 years ago)
Completely agreed. It was my first thought.
I would also have liked to see the stats on what OS these fonts came from. I get very wary of seeing “I’ve done research” without seeing the research.
Great idea for a post.
Shawn Bird (3 years ago)
I agree with this, it would be nice to have a website that just showed web safe fonts with various blocks of text.
You could plug in a block of copy and see it in all the fonts maybe even how it would render in different browsers.
I suddenly have an urge to create this.
Any ideas for a domain name?
Andy (3 years ago)
fontshowcase.com, typographyfolio.com ?
Webdesignkilkenny (3 years ago)
Wedge is correct – we must practice what we preach!
In any case most to these are fairly common and I suspect would be known to most of us but tx for reminding us.
Wedge (3 years ago)
Unrelated argument rubric. Web safe fonts are not uploaded or distributed or in any way ‘used’ by the web publisher. These fonts are ‘in’ the surfers’ computers. Licenced to the OS / programs.
Ricardo (3 years ago)
Neither Century Gothic nor Copperplate nor Gill Sans are installed by default in Windows Vista, so those should not be considered safe.
Dave Kinsella (3 years ago)
I was thinking the same, at least with appropriate fallback fonts you can use them for some lucky viewers.
Hard to see how they can be called web-safe though.
John Pitchers (3 years ago)
I agree. Palatino and Gill Sans are not installed on my PC. Definitely not web safe.
devolute (3 years ago)
These are websafe huh? Are you sure you don’t mean “These are fonts your probably safe using on the web, but don’t expect too much really”?
Ryandc (3 years ago)
remove impact from the list, then we’ll talk.
but seriosuly, not sure how you define web safe for fonts, as a few of those arn’t common to both Mac, PC and linux.
It’s a hard one to define really… I know the majority of PC users won’t have Gill Sans…
Rob (3 years ago)
And hopefully someday we can include our own customs that automatically install. It’s the year 2009? Are we really still stuck with the basic installed fonts.
Ashely Adams : Sticker Printing (3 years ago)
Indeed a clever idea and intelligently executed. I’ve always been a fan of CSS and have tried to use it extensively. Even I would like to see a paragraph of lorem ipsum. But when you said web-safe fonts, are you sure that these are licensed for use?? I guess some of them are not. Anyways, nice post!!
Heather (3 years ago)
Impact & Times New Roman = As far from gorgeous as anything could be.
A decent list overall, some issues with the CSS code (i.e. multiple-word font names are sometimes quoted, and sometimes not), and I would drop the adjective “Gorgeous” and maybe call it “16 Mostly Standard Fonts to use on the Web”
Levi Blackman (3 years ago)
I guess I’m kinda a noob…I had no idea you could use things like ‘Arial Narrow.’ Does that type work for any other fonts?
Andy (3 years ago)
It really depends if the font is installed on the users system. Theres a handy wordpress plugin that lets you manipulate text into a font and put it in an image.
John (3 years ago)
Thanks for the resource. Sad the criticism has to be so negative from the other people who commented. Keep up the good work! Thanks. Another rss feed for me to read.
Andy (3 years ago)
Thanks! Yes, on posts like these its a balanced argument.
SHG (3 years ago)
If these fonts were all “web-safe”, then the examples given would be inline text styled with CSS. They’re not. They’re images.
Which, of course, just shows how they’re NOT web-safe.
Greg Ferrell (3 years ago)
I am going to have to agree with the others here, this article is going to confuse newbies about what “web safe” means.
If it isn’t present on Windows, Mac, and Linux, its not web safe.
Windows is not the only platform out there, and only bad web designers pretend like it is.
Please consider revising this article with correct information about what systems have the fonts by default.
This list is a good one to bookmark if you are not sure what fonts are good to use on the web:
http://dustinbrewer.com/fonts-on-the-web-and-a-list-of-web-safe-fonts/
Andy (3 years ago)
Thanks very much for both your comments. Thats a brilliant resource you have linked to, thanks!
And I design on a mac, and all these fonts work for me in browsers.
Ricardo (3 years ago)
See, that’s what we’re talking about. You can call them mac-safe
Greg Ferrell (3 years ago)
I should caveat my previous comment to say that i was not implying that the author of this article is a bad web designer, but rather people that only develop for Windows based browsers and assume its OK.
Props to the author for taking the time and effort to write the article.
Richard (3 years ago)
Hmmmm, can anyone suggest what the fallback for Century Gothic would be?
I was thinking:
‘Century Gothic’, ‘Futura’, ‘Helvetica’, ‘Arial’, ‘Liberation Sans’, sans-serif
I suppose it’s about how much you care if your website looks completely different depending on which computer you look at it on. Most of these font’s aren’t web safe, e.g. century Gothic not being on Vista or Ubuntu. If you are going to call these web safe then you should provide the full list of alternatives. Even Arial by itself could not be considered web safe, unless you don’t mind the OS picking for you.
Chad Albrecht (3 years ago)
Thought you would like to know this post is broken in IE8. Looks good in Compatibility mode and Firefox!
Web Page Designers New York (3 years ago)
I agree with u….thanks for sharing this info post.
WhiteSites (3 years ago)
This post is priceless. Thanks for taking the time to make it
Patrick Denny (3 years ago)
@Luis Landgrave: The Microsoft Core web fonts are still available. Microsoft has discontinued their availability, but other people have continued to make them available (allowed as per the original licence Microsoft released them under).
http://en.wikipedia.org/wiki/Core_fonts_for_the_Web
http://prdownloads.sourceforge.net/corefonts/
Gurkenglas (3 years ago)
Why can’t you Show the real font from CSS and a picture how it should Look like. so everOne could see if his system is displing all Fonts correct.
greetings from germany
Ernie Smith (3 years ago)
You list Arial but not Helvetica. Why? Helvetica is very common nowadays, especially on Macs. And it’s way hotter, too.
I use Helvetica Neue for my site, http://shortformblog.com/ (which most Macs have, though Windows is largely left out in the cold).
Also, may I suggest http://kernest.com/ to you guys? It’s a very nice little attempt at making a wider variety of fonts available via @font-face. And unlike TypeKit, it’s simply an authentication server solution, meaning it doesn’t need Javascript to do its magic. I reviewed it the other night and came back pretty impressed.
… now if only more browsers supported @font-face.
Erwin Heiser (3 years ago)
Very misleading article these as several of these fonts are either Mac-only or Windows-only.
A much better and comprehensive list is this one http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
As with all things web, the best option is always to test your stylesheet across browsers and operating systems.
Stemby (3 years ago)
Century Gothic:
.classname {
color: #333333;
font-family: “URW Gothic L”, “Century Gothic”, sans-serif;
}
(for Linux/*nix users)
Most Interesting Ideas (3 years ago)
Nice set of CSS
matthew fedak (3 years ago)
Great article, loving your blog theme, but some of these fonts are not common on both macs and pcs. the term web safe is used to describe fonts that are both mac and pc friendly. There is a good tese page here http://www.fonttester.com/help/list_of_web_safe_fonts.html
For Our Clients: Website Design (3 years ago)
[...] Here is a list of web safe fonts, courtesy of webdesigndev.com. As a client, you don’t need to memorize these fonts or anything. Just be aware that if you are shown a static mockup version of your website with the type set in a non-web safe font, your website will NOT have this font when it goes live. However, a web designer should only show mockups to their client with web safe fonts. [...]
_ham (3 years ago)
How do you have an an article about web safe font and use images to display the fonts?
Josh (3 years ago)
This is a truly great list of web-safe fonts. Probably the best I’ve seen. My new favorite font is Lucida Sans in italic at larger sizes, but there are some real gems in this list.
Sam (3 years ago)
All right. This article is very miss-leading.
Fact is that Century Gothic, Copperplate, Gill Sans are not web-safe-fonts. So, whats left then is the normal, standard list of fonts we already know since ages.
I’m wondering oh, if this list will change in future with maybe more people using new OS systems with more common fonts?
Would be great to have a web service to see the most common fonts used on the web per system and year and so on….
50 Best Web Design Blog Posts In 2009 | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver (3 years ago)
[...] This is another one of our most hyped articles. Many web designers are often confused with what fonts are web friendly n what operating systems. We have a list of 16 web safe fonts that look stunning. Read More [...]
Mike (3 years ago)
Arial Narrow is not web safe. It’s very common… 86% or higher install rate… but NOT web safe.
Actually, neither are Gill Sans, Copperplate, or Century Gothic.
“Web Safe” doesn’t mean “common”… it means “SAFE”
olis (3 years ago)
Great article, thx
Also some nice free fonts http://www.fonts2u.com/
conlon (3 years ago)
I really want to use gill sans on a new website but when I preview both Safari and Firefox don’t recognise it. I definitely have the font on my system. Here’s my CSS I’m really appreciate some help as the design of the whole site will be totally out if I can’t use Gill Sans.
Any help would be really appreciated.
.gillclass {
color: #333333;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
Welcome to the world of Spirit Warriors.
Tomáš Kapler (3 years ago)
ehm.
1. why did you not put some example text with real fonts, not just images
2. define safe: e.g. what about people in 90 % of the world, who use some more that just 128 ANSII chars.
E.g. something like german umlauf ü, ä, ë … eastern european ?, š, ?, ž, š, ?, ? …I bet that with those fonts settings most user would probably see some scrambled chars
prasad (3 years ago)
quite useful stuff for designers.
thanks for the information. keep the good work going.
regards.
Cheat Sheets per il Web Design | paitadesignblog (3 years ago)
[...] Approximate Conversion from Points to Pixels PX to EM conversion made simple. Compare screen type 16 Gorgeous Web Safe Fonts To Use With CSS Top 10 (Web Safe) Blogging Fonts How safe are Web-safe Font Families really? Font [...]
Best Web Designing Contest (3 years ago)
Arial black is most safe Font which can be used everywhere while designing a site. I have used that font now and I am going to post the design in a contest running by grafikguru.com
Philippe (3 years ago)
Thanks a lot, it helps a lot. However, could you test them directly into the browser instead of a picture?
Matt (3 years ago)
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 (3 years ago)
Nice info thank’s
Moxylosophie » Blog Archive » Choosing Fonts – part 1 of Series (3 years ago)
[...] 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 (3 years ago)
[...] the post on WEBDESIGNDEV “16 gorgeous web safe fonts to use with css” to get an idea of fonts you can use [...]