30 Gorgeous Web Safe Fonts To Use With CSS

 Search
30 Gorgeous Web Safe Fonts To Use With CSS


 Subscribe to our RSS

FREEBIES feed!
WEBSITE TEMPLATES
WORDPRESS THEMES
WORDPRESS PLUGINS
ADOBE PHOTOSHOP
ADOBE DREAMWEAVER
TUTORIALS
ADOBE ILLUSTRATOR
REVIEWS Popular on Web Design

DESIGN INSPIRATION Share! 101 Dev:
Free Wix Website Templates
WEB DEVELOPMENT
We have gathered together a nice resource list of stunning web safe fonts that you can use with CSS. 20+ Portfolio Website
CSS “Web Safe” fonts mean that they will look perfect no matter the browser you are viewing them from. Templates for Architects
ROUNDUPS Also, these fonts are very popular and are most likely to be pre-installed on your operating system, be it 20+ Portfolio Website
Windows, iOS or even Linux. Templates for Artists
PROGRAMMING
Creative Resume Templates
Along with each web safe font in this list is a preview image of what it looks like, and the raw CSS code
for Web Designers
that you can copy and paste directly into your own stylesheet to use the font. These typefaces have
Web Safe Fonts with CSS
remarkable designs and will look great in your projects.
Best Free Tumblr Themes
Moreover, these examples include the CSS code which makes them easy to be integrated into 20+ Free HTML Templates
your website.
Professional Free Bootstrap
So, here you have 30 web safe fonts to use with CSS. Do you know other web safe fonts? Let us know in Themes
the comment section below. Best Shopify Themes for
High Conversions
Abel Font 20+ Events Production
Website Templates
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet'>
<style>
body {
font-family: 'Abel';font-size: 22px;
}
</style>
</head>
<body>
<h1>Abel</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p>123456790</p>
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
<p>abcdefghijklmnopqrstuvwxyz</p>
</body>
</html>
*****
Aclonica Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet'>
<style>
body {
font-family: 'Aclonica';font-size: 22px;
}
</style>
</head>
<body>
<h1>Aclonica</h1>
<p>123456790</p>
</body>
</html>
*****
Actor Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Actor' rel='stylesheet'>
<style>
body {
font-family: 'Actor';font-size: 22px;
}
</style>
</head>
<body>
<h1>Actor</h1>
<p>123456790</p>
</body>
</html>
*****
Advent Pro Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Advent Pro' rel='stylesheet'>
<style>
body {
font-family: 'Advent Pro';font-size: 22px;
}
</style>
</head>
<body>
<h1>Advent Pro</h1>
<p>123456790</p>
</body>
</html>
*****
Alegreya Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet'>
<style>
body {
font-family: 'Alegreya';font-size: 22px;
}
</style>
</head>
<body>
<h1>Alegreya</h1>
<p>123456790</p>
</body>
</html>
*****
Alegreya Sans SC Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Alegreya Sans SC' rel='stylesheet'>
<style>
body {
font-family: 'Alegreya Sans SC';font-size: 22px;
}
</style>
</head>
<body>
<h1>Alegreya Sans SC</h1>

<p>123456790</p>
</body>
</html>
*****
Allan Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Allan' rel='stylesheet'>
<style>
body {
font-family: 'Allan';font-size: 22px;
}
</style>
</head>
<body>
<h1>Allan</h1>
<p>123456790</p>
</body>
</html>
*****
Allerta Stencil Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Allerta Stencil' rel='stylesheet'>
<style>
body {
font-family: 'Allerta Stencil';font-size: 22px;
}
</style>
</head>
<body>
<h1>Allerta Stencil</h1>
<p>123456790</p>
</body>
</html>
*****
Dekko Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Dekko' rel='stylesheet'>
<style>
body {
font-family: 'Dekko';font-size: 22px;
}
</style>
</head>
<body>
<h1>Dekko</h1>
<p>123456790</p>
</body>
</html>
*****
Didact Gothic Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Didact Gothic' rel='stylesheet'>
<style>
body {
font-family: 'Didact Gothic';font-size: 22px;
}
</style>
</head>
<body>
<h1>Didact Gothic</h1>
<p>123456790</p>
</body>
</html>
*****
Gruppo Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Gruppo' rel='stylesheet'>
<style>
body {
font-family: 'Gruppo';font-size: 22px;
}
</style>
</head>
<body>
<h1>Gruppo</h1>
<p>123456790</p>
</body>
</html>
*****
Kalam Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Kalam' rel='stylesheet'>
<style>
body {
font-family: 'Kalam';font-size: 22px;
}
</style>
</head>
<body>
<h1>Kalam</h1>
<p>123456790</p>
</body>
</html>
*****
Merienda Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Merienda' rel='stylesheet'>
<style>
body {
font-family: 'Merienda';font-size: 22px;
}
</style>
</head>
<body>
<h1>Merienda</h1>
<p>123456790</p>
</body>
</html>
*****
Nova Flat Font
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Nova Flat' rel='stylesheet'>
<style>
body {
font-family: 'Nova Flat';font-size: 22px;
}
</style>
</head>
<body>
<h1>Nova Flat</h1>
<p>123456790</p>
</body>
</html>
*****
Impact Font
[css].classname {
color: #333333;
font-family: Impact, Charcoal, sans-serif;
}[/css]
*****
Palatino Linotype Font
[css].classname {
color: #333333;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
}[/css]
*****
Tahoma Font
[css].classname {
color: #333333;
font-family: Tahoma, Geneva, sans-serif;
}[/css]
*****
Century Gothic Font
[css].classname {
color: #333333;
font-family: Century Gothic, sans-serif;
}[/css]
*****
Lucida Sans Unicode Font
[css].classname {
color: #333333;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
}[/css]
*****
Arial Black Font
[css].classname {
color: #333333;
font-family: 'Arial Black', Gadget, sans-serif;
}[/css]
*****
Times New Roman Font
[css].classname {
color: #333333;
font-family: 'Times New Roman', Times, serif;
}[/css]
*****
Arial Narrow Font
[css].classname {
color: #333333;
font-family: 'Arial Narrow', sans-serif;
}[/css]
*****
Verdana Font
[css].classname {
color: #333333;
font-family: Verdana, Geneva, sans-serif;
}[/css]
*****
Copperplate Gothic Light Font
[css].classname {
color: #333333;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
}[/css]
*****
Lucida Console Font
[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 Font
[css].classname {
color: #333333;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
}[/css]
*****
Courier New Font
[css].classname {
color: #333333;
font-family: 'Courier New', Courier, monospace;
}[/css]
*****
Arial Font
[css].classname {
color: #333333;
font-family: Arial, Helvetica, sans-serif;
}[/css]
*****
Georgia Font
[css].classname {
color: #333333;
font-family: Georgia, Serif;
}[/css]
*****
Recommended for you:
10 Parallax Plugins and Tutorials 20 Best Font Detector Tools That

For Designers Will Ease Your De...
20 Best Free Website Builders for 7 Web Development Frameworks

Beginners for Your Next Project...
8 Must Have Productivity Apps 5 Reasons Why You Should Have

that Pro Designers a... A WordPress Website ...
10 Plesk Features That Users

Can’t Live With...
173 thoughts on “30 Gorgeous Web Safe Fonts To Use With CSS”
Yasar says:
Love this Awesome Fonts.

Thank you.
Reply
Alex says:
Thank you dude.

I just planning to create a new website & hope your list would help me.
Reply
Mark says:
The following fonts are not standard fonts on all systems.

They all can be downloaded and installed, but will only display correctly if user has installed them.
Windows 7.
~~~~~~~~~
Copperplate or Copperplate Gothic Light
Gill Sans or Gill Sans MT
Windows 10.
~~~~~~~~~~
Arial Narrow (You could use Arial, Arial Nova Cond Light)
Century Gothic
Copperplate or Copperplate Gothic Light
Gill Sans or Gill Sans MT (You could use Gill Sans Nova)
Reply
Amar Thakur says:
nice list thanks I am looking forward to use some font families for my blog from your list
Thanks : )
Reply
CalvinYes says:
And Times New Roman 🙂

Reply
Anne Q. says:
Very nice list! Thank you so much.
-Anne Q.
Reply
Michael Christensen says:
Nice write up. Has the collection of fonts I would expect to see.
I did note, however, that none of those fonts show up in this site. Also the phrase is “more OR less”.
Thanks again
Reply
Douglas says:
You might take a look at Fonts of the World BonFX.com/fonts-of-the-world to see how the safe fonts
rank against @font-face fonts. The site ranks font usage from the top 10k Alexa sites weekly.
Hint: it’s not even a contest 🙂

Reply
Glamorous Bite says:
The Lucida is quite elegant. We are trying a few different fonts again on glamorousbite.com.
Reply
f says:
Hi,
which font is used for the headline of this post?

Also the headlines in the post.
Thanks.
Reply
Web Design says:
We use Playfair Display SC for headings.

Reply
Glamorous Bite says:
There is something nice about the basic fonts, a timeless appeal that comes back in style.
Reply
mahmood says:
these are very useful. Thanks a lot.

Reply
Fooont.com says:
Great articles! It’s very help when you need to choose perfect combinations of typeface. But if you
want an easy way to use Google Font combinations you may see at fooont.com. Thanks a lot!
Reply
IJRITCC International Journal says:
Thanks for share such a useful posts. These fonts are really very useful for embedding with CSS.
Keep it up.
Reply
classi ed ads says:
I like Georgia font!

Reply
rakesh kumar says:
I am more than happy to nd out these set of fonts for my website/blog theme, Since i am very much
concern about my theme speed, so it is a must for me to load looking web safe fonts, I do not want a
font from google api. to render the desired results. Thank you very much for this nice collection of
fonts
Reply
henrihenry says:
webmasters please stop messing with de black font color, 333 does NOT read better, in fact it reads
worse !!!!!!
Reply
charles says:
Hm is this really correct?

” font-family: Gill Sans / Gill Sans MT, sans-serif;”
I don’t think the ‘/’ could be used here..?

Reply
Wine Dine says:
Trebuchet has become a favorite for some time.

Reply
Wine Dine says:
Have used Georgia on http://winedinedaily.com , however it did have some browser issues with
display.
Reply
shamvil says:
This is a truly great list of web-safe fonts. Probably the best I’ve seen. My new favorite font is Lucida
console in italic at larger sizes. Thanks for this post.
Reply
Mahin says:
Collection is good. 🙂
Reply
shahed says:
Thanks for your information..i like ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif; font family..
Reply
lalit says:
thanks for sharing. tips for fonts…

Reply
Rafael says:
Perfect! Thanks soo much 😀

Reply
Ian Joess says:
My fav is Georgia for sure. So clean. Might try i tout on our site
Reply
Kay Bee says:
I’m glad I read the comments. Relatively new to design work, but I absolutely love Gill Sans but knew
it was a Mac font and probably wasn’t safe. Thanks to all the people who are seasoned you guys help
us newbie not make silly mistakes.
Reply
Jose Tapia says:
Cool thanks very helpful

Reply
Oliver says:
Hi, thanks for the list, really great. Although Gill Sans isn’t completely safe. It comes with newer
versions of windows and most mainstream software, adobe programs, microsoft o ce etc.
Reply
FurryMoses says:
Century Gothic is not on my Mac, it’s only installed if you have Microsoft O ce.
Reply
Digital Extreme Media Group says:
Thanks for all the info, I cant belive all the fonts that are out today. Nice website too!
Reply
Fact Stash says:
Nice! but I want to put unique fonts on my site. like handwriting font for example. Should I upload the
font and link it to my css?
your answer is very appreciated!

Reply
sean says:
If you install a font you have either bought it or obtained a free font – there are no legal problems with
the use of this as the CSS code is merely calling the font from the user’s computer. No issue at all.
If you want your web design to look pretty much the same in each browser, then you roughly need to
stick to Arial, Georgia, Impact, Times, Times New Roman, Verdana, Courier New – & add either sans
serif or serif at the end of your line of code as a last resort default font.
Remember that using a font that is not generic will potentially throw up problems with the actual
space that the text takes up on a site as the browser hunts for a replacement font to use.
Reply
Mahek says:
i’m using ‘Century Gothic’ in body, font for my moodle theme but it’s not working other’s system .i
want to know this is web font or not and some solution please
Reply
Joel Milne says:
These fonts look much better on your site than on mine!!

Reply
jyoti wadhwa says:
I like your combination and i m also want to use these fonts .

Reply
Mary says:
Thanksw so much, especially to all those that left comments. I’m a true newbie to css and appreciate
hearing from the vets. I’ll take any tips I can get. Now, are you sure I can’t do my entire site in Comic
sans?
😉
Reply
Jai Catalano says:
What font are you using?

Reply
Satriyo says:
Usefull for me, thanks 🙂

Reply
Peter says:
Nice article! The thing is that some of these font work only on mac, others only on PC… there should
be a 100% cross-platform and cross-browser way to implement these fonts…
Reply
Matej Latin says:
Thanks for this collection.. now I can use these as a replacement for some similar fonts tha I’d have
to import using the font-face. Reducing the website size in kb is always a good idea 🙂
Reply
Alan says:
Thanks for the great selection of fonts. I was having trouble making up my mind on which one to use.
Reply
Stewart says:
Some great fonts, thanks for sharing

Reply
Mary Baum says:
A few of the fonts in this post get their web-safe cred by being included with O ce applications, so
it’s a better-than-even shot that a given user has installed them either by not paying attention in the
course of the O ce install or by paying attention and opting for the fonts. So whether a given
typeface is web-safe or not depends on whether the audience segment in the aggregate likely
installed the fonts with O ce.
So then the question is: where are you going to use a half-web-safe font?
I think for the back of the stack you want truly web-safe fonts. For the front of the stack, why bother
with these when you’ve got @font-face? Those give us TRULY gorgeous type.
Fifteen years was a very long time with the six or seven web-safe faces (Comic Sans does NOT
count).
I frankly hope never to spec any of those for the front of a font stack ever again, unless they’re part of
a client’s actual brand. And then we’ll probably use the real typeface – not the web-safe, lame
substitute.
Now, again, to be clear, I’m talking about the front of the stack – the place where we spec what’s
going to happen in modern browsers on computers that were built in the last ve years.
Reply
Petr Chutný says:
This is very handy, thank you!

Reply
Sourav Chakraborty says:
Arial Narrow is *most probably* web safe but unfortunately google preview generator does not
support this. So, it generates a wrong preview if you use this font.
Reply
Adal says:
Awesome page… I use it as a reference for myself and my clients all the time.
Just one thing should be corrected: your CSS examples all use ‘ instead of ‘ which makes the CSS
corrupt. Easy x.
Reply
Endy says:
this is what i looking for….

using safe fonts is better than using font directory…
Reply
MissCmei says:
is arial narrow a web safe font? seems like it does not work in IE
Reply
Karolin says:
Wow, these fonts are great. That is exactly what I was looking for. I will de nitely use them for my
websites. Thanks.
Reply
Marty Walser says:
Many of these are NOT web safe fonts. I mean, Copperplate? Seriously? Here is the real list of safe
fonts:
Serf:
Georgia
Palatino
Times
Sans-Serif:
Arial
Arial Black
Impact
Lucida Sans
Tahoma
Verdana
Trebuchet MS
Monospace Fonts:
Courier New
Face it – web safe fonts are dull. You can use the one noted above, but they are bound to default to
one of the true “safe” fonts speci ed in the front stack.
Reply
Discount Dresses says:
I personally really like Georgia,

it is so beautiful for articles
Reply
John says:
Gill Sans is NOT a web safe font! You are misinformed.

Reply
Ron James says:
@ John Gill Sans is not a web safe font but it is a best font for website, you can use it using @font-
face trust me use it in your next design.
Reply
John says:
Hi Ron
“web safe” refers to fonts that can be used on all platforms.
I had a go but @font-face doesnt work for all browsers and all platforms. Wish it did though!
Reply
sloughin says:
So searching around a bit and trying things out, I nd that this works nicely:
font-family: “Copperplate Gothic Bold”, sans-serif;
as does this:
font-family: “Copperplate Gothic Light”, sans-serif;

Reply
sloughin says:
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.

Reply
Litmus Design says:
Hey great post!! Yes my favorite font also included i.e. Trebuchet MS. I also like Calibri.
Reply
Mike Bethany says:
I love Gill Sans when I’m feeling a little Helvetica overload.

Reply
Shif says:
check google web font api, and the css3 new @font-face, they are really good alternatives for good
looking fonts
Reply
Brett Nimphius says:
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.
Reply
John Ryan says:
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
Reply
Mr.Mark says:
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 O ce package. So if you don’t have that installed, it
wouldn’t work for you. I wouldn’t consider that one web-safe then.
Reply
Mohamed Alaa says:
Wowww very nice collection 🙂 and Amazing Article…

Reply
mikeo says:
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.
Reply
kike314 says:
Great article, but, as says Jaemi don’t forget about Font Squirrel. It’s amazing!
Reply
Courtney says:
Gil Sans is not web safe. Wish it was!

Reply
Ben C says:
Arial Narrow shouldn’t be on this list. It is supplied with Mac OSX and Microsoft O ce 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.
Reply
Michael Merrill says:
Funny how all the examples of the fonts are imgs and not text lol
Reply
Gerlach Firm says:
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.
Reply
Brochures Company says:
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.
Reply
Web designer kent says:
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.
Reply
Kate says:
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 nd a default websafe font I love for this one.
Reply
Darrell says:
“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.
Reply
Brixter says:
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.
Reply
Brixter says:
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.
Reply
Kate says:
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 ts
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!
Reply
Brett Widmann says:
Very nice list. I also like to use Lacuna

Reply
Lisa says:
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.
Reply
Richie Bianco says:
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.
Reply
internet media says:
Hi..
excellent feature… …you have mention very important message about font-family..this is very
informative..
Thanks for suggested link….

Reply
WebDesignPrint says:
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.
Reply
PlrSifu says:
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
Reply
James says:
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.
Reply
Rydgel says:
Dude. Where is Comic Sans MS ??

j/k
Reply
Luis Lopez says:
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 😉 x that.
Reply
Website Design Delhi says:
Century Gothic is my all time favourite in this list. Thank for sharing them 🙂
Reply
Nic says:
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!
Reply
Sux2b says:
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.
Reply
patricknas says:
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.
Reply
sean says:
hey.. dont be hatin’ on Courier New… you can’t appreciate it’s retro xed-width charm? I can almost
hear the front-strikes now…
Reply
Johan says:
Thanks
Reply
Jason Spencer says:
FYI – Windows 7 does not ship with Century Gothic. I just learned that the hard way, and am seeking
an alternative font.
Reply
lm says:
Very useful post thank u

Reply
Shangiedangie says:
“Copperplate Gothic Light” doesn’t read with Firefox just for further reference.
However thank you for sharing.
Reply
Constant Collide says:
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.
Reply
Jaemi says:
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.
Reply
Gef says:
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.
Reply
weeserFan says:
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 refox)
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
Reply
Muzzer says:
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 de ned 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 de ne the chosen font rst 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 rst, then if it can’t nd 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?

Reply
Sin Biechele says:
Comic Sans MS is web-safe, too.

Sorry designers 😉
Reply
Dani Raykova says:
Thank you for the great article. Seems we do not have to stick to Arial and Georgia as web-safe
anymore.
Reply
alok kumar mistry says:
Is Verdana really on everyone’s Pc? Im not sure though I’ve used Verdana in my site after the
suggestion from u.
Reply
Gulshan kumar says:
Nice info thank’s

Reply
Matt says:
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!

Reply
Philippe says:
Thanks a lot, it helps a lot. However, could you test them directly into the browser instead of a
picture?
Reply
Best Web Designing Contest says:
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 gra kguru.com
Reply
prasad says:
quite useful stuff for designers.
thanks for the information. keep the good work going.
regards.
Reply
Tomáš Kapler says:
ehm.
1. why did you not put some example text with real fonts, not just images
2. de ne 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 🙁
Reply
conlon says:
I really want to use gill sans on a new website but when I preview both Safari and Firefox don’t
recognise it. I de nitely 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.

Reply
olis says:
Great article, thx 🙂

Also some nice free fonts http://www.fonts2u.com/
Reply
Mike says:
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”

Reply
Sam says:
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….
Reply
Josh says:
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.
Reply
_ham says:
How do you have an an article about web safe font and use images to display the fonts?
Reply
matthew fedak says:
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
Reply
Most Interesting Ideas says:
Nice set of CSS

Reply
Stemby says:
Century Gothic:
.classname {
color: #333333;
font-family: “URW Gothic L”, “Century Gothic”, sans-serif;
}
(for Linux/*nix users)

Reply
Erwin Heiser says:
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.
Reply
Patrick Denny says:
@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).
Reply
Ernie Smith says:
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.

Reply
Gurkenglas says:
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

Reply
WhiteSites says:
This post is priceless. Thanks for taking the time to make it

Reply
Web Page Designers New York says:
I agree with u….thanks for sharing this info post.

Reply
Chad Albrecht says:
Thought you would like to know this post is broken in IE8. Looks good in Compatibility mode and
Firefox!
Reply
Greg Ferrell says:
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.
Reply
Andy says:
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.
Reply
Ricardo says:
See, that’s what we’re talking about. You can call them mac-safe 🙂
Reply
Richard says:
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.
Reply
Greg Ferrell says:
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.
Reply
SHG says:
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.

Reply
John says:
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.
Reply
Andy says:
Thanks! Yes, on posts like these its a balanced argument.

Reply
Levi Blackman says:
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?
Reply
Andy says:
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.
Reply
Heather says:
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”
Reply
Bstrom says:
Times Roman is a tough sell for me too, yes, but Impact is one of the few, if only one, bold condensed
faces i use for headlines to t into a given space. No good for text, sure, but a strong and attractive
headline font. As the Apostle Paul said, “Widen out in your love (of fonts)”.
Reply
Ashely Adams : Sticker Printing says:
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!!
Reply
abubakkar says:
oh dear i need some royal font faimly in css do you have or fond it to me
i will be thankfull to you
Reply
Rob says:
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.
Reply
Ryandc says:
remove impact from the list, then we’ll talk.
but seriosuly, not sure how you de ne web safe for fonts, as a few of those arn’t common to both
Mac, PC and linux.
It’s a hard one to de ne really… I know the majority of PC users won’t have Gill Sans…
Reply
devolute says:
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”?
Reply
John Pitchers says:
I agree. Palatino and Gill Sans are not installed on my PC. De nitely not web safe.
Reply
Ricardo says:
Neither Century Gothic nor Copperplate nor Gill Sans are installed by default in Windows Vista, so
those should not be considered safe.
Reply
Dave Kinsella says:
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.
Reply
Wedge says:
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.
Reply
Webdesignkilkenny says:
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.
Reply
Wedge says:
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.
Reply
Poindexter says:
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.
Reply
graphic design Melbourne says:
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 🙂

Reply
Andy says:
I think Gill Sans is one of the best there.

Reply
5h4rk says:
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.
Reply
Jeff says:
Completely agreed. It was my rst 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. 🙂

Reply
Shawn Bird says:
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?

Reply
Andy says:
fontshowcase.com, typographyfolio.com ?
Reply
TwilighersAnonymous.com says:
I agree with Wedge.
But good try! =)

Reply
J. Albert Bowden II says:
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.
Reply
Beaver says:
You seem to have forgotten Comic Sans, quite possibly the best font ever. Please correct this blatant
oversight immediately.
Reply
Vince D says:
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@!
Reply
Kate Payton says:
Of course this is a joke!
Now lets never speak of that horrid font, ever again.

Reply
ChrisR says:
Copperplate / Copperplate Gothic Light
Is that slash in there valid css reference to a font?

Reply
John says:
Nope – you have to choose one 🙂 (or use a comma to specify an order)
Reply
rubric says:
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.
Reply
diogo says:
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?
Reply
graphic design Melbourne says:
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…
Reply
Francisco Zarabozo says:
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 nds 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.
Reply
airtonix says:
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.
Reply
Grant says:
I think if you think that all fonts from Google are going to work beautifully you had better test them
rst because you may nd that some browsers will not render them as well as others.
Test rst.
Reply
Sparky says:
Uhm, no. As the article states:
“‘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 [sic] less everyone.”
There are zero licensing issues in this case since these are fonts that reside on most systems. This
article is not referring to fonts being downloaded by the client from a server.
Reply
Andrew says:
Would.. it matter? All you as a developer are doing (maybe not if in an image) is tossing in some code
for a browser to use the font. Otherwise, it is the user that installs it an uses it. (several years late, but
a good note.)
Reply
Dedé Villela says:
I like to use ‘Tahoma’ as sans serif and ‘Georgia’ as serif. Beautiful combination! 🙂
Reply
Bjørn says:
Nice collection!
Reply
Leave a Reply
Your email address will not be published. Required elds are marked *
Comment
Name *
Email *
Website
Post Comment
Copyright © webdesigndev.com. 2017 • All rights reserved.
Advertise Contact

30 Gorgeous Web Safe Fonts To Use With CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

30 Gorgeous Web Safe Fonts To Use With CSS

Uploaded by

Copyright:

Available Formats

 Search

30 Gorgeous Web Safe Fonts To Use With CSS

 Subscribe to our RSS

REVIEWS Popular on Web Design

Advent Pro Font

Alegreya Sans SC Font

<h1>Alegreya Sans SC</h1>

Allerta Stencil Font

Didact Gothic Font

Nova Flat Font

Palatino Linotype Font

Century Gothic Font

Lucida Sans Unicode Font

Arial Black Font

Times New Roman Font

Arial Narrow Font

Copperplate Gothic Light Font

Lucida Console Font

Gill Sans – as much as I WISH this was web safe, it is not!

Courier New Font

Recommended for you:

10 Parallax Plugins and Tutorials 20 Best Font Detector Tools That

20 Best Free Website Builders for 7 Web Development Frameworks

8 Must Have Productivity Apps 5 Reasons Why You Should Have

10 Plesk Features That Users

Love this Awesome Fonts.

Thank you dude.

The following fonts are not standard fonts on all systems.

Amar Thakur says:

And Times New Roman 🙂

Very nice list! Thank you so much.

Michael Christensen says:

Hint: it’s not even a contest 🙂

Glamorous Bite says:

which font is used for the headline of this post?

Web Design says:

We use Playfair Display SC for headings.

Glamorous Bite says:

these are very useful. Thanks a lot.

IJRITCC International Journal says:

classi ed ads says:

I like Georgia font!

rakesh kumar says:

Hm is this really correct?

I don’t think the ‘/’ could be used here..?

Wine Dine says:

Trebuchet has become a favorite for some time.

Wine Dine says:

thanks for sharing. tips for fonts…

Perfect! Thanks soo much 😀

Ian Joess says:

Kay Bee says:

Jose Tapia says:

Cool thanks very helpful

Digital Extreme Media Group says:

Fact Stash says:

your answer is very appreciated!

Joel Milne says:

These fonts look much better on your site than on mine!!

jyoti wadhwa says:

I like your combination and i m also want to use these fonts .

Jai Catalano says:

What font are you using?