How To Use @font-face In CSS And 21 Great Typefaces

Sep

21 Awesome @font-face Embeddable Typefaces

by Jon Phillips » 55 Comments » Add Your Own » grab the rss feed

The 2 most popular typefaces used on the web today are surely Verdana and Georgia. They’re great and I used them all the time since they’re web-safe fonts. I use them mostly because I’m not a big fan of flash replacement techniques or solutions that require Javascript (sIFR, Cufon, etc…). But what about the @font-face CSS property?

While @font-face may not work in all browsers, I think it’s still one of the best solution available today. Of course not all type foundries will let us embed their fonts on our webpages. There are solutions like Typekit which look very promising but today we’ll simply go over the @font-face CSS property and check out some typefaces you can use with @font-face :)

The @font-face CSS Property

Before you can start using those typefaces on your site you need to declare the font file(s) in your CSS file along with the font-weight and font-style if available. Like this:


@font-face {
font-family: GraublauWeb;
src: url("path-to-the-font-file/GraublauWeb.otf") format("opentype");
}
@font-face {
font-family: GraublauWeb;
font-weight: bold;
src: url("path-to-the-font-file/GraublauWebBold.otf") format("opentype");
}

Then you can call the font via the font-familly property. Don’t forget to put some other (web-safe) fonts there as a fallback option. Like this:


h1 {
font-family: GraublauWeb, Helvetica, Verdana, Sans-Serif;
}

Also be sure to check out the ‘further resources‘ section at the bottom of this post for more infos, especially on how to get @font-face to work in IE using EOT font files.

Some Typefaces You Can Use With @font-face

Some of those typefaces explicitly mention they’re @font-face embeddable, but make sure you read the EULAs before using any of those just to make sure.

Graublau Sans Web ↓

Fertigo Pro Regular ↓

Tallys ↓

Diavlo ↓

Fontin ↓

Fontin Sans ↓

M+ Outline Fonts ↓

Pykes Peak Zero ↓

Vollkorn ↓

Delicious ↓

Junction ↓

Days ↓

Sniglet ↓

Chunk ↓

Blackout ↓

Gentium ↓

Anivers ↓

CA BND Bold WEB ↓

Axel ↓

Kaffeesatz ↓

Tagesschrift ↓

Further Resources

Here are some other articles and tutorials you might want to read as they offer some pretty valuable information.

Your Turn To Talk

Do you use @font-face on your site(s)? What made you decide to go ahead and start using @font-face? I’m curious to know what you guys think and to see how and where you used @font-face. :)

Guaranteed SY0-201 preparation is now at your ease. Subscribe for 642-902 testking all in one training kit and also get free assistance for 70-680.

About the author:

Jon Phillips is the founder and owner of SpyreStudios and the co-founder of MediaLoot. Jon is a designer, developer, typography lover and musician.

Related Entries:

jump to the comment form ↓

dlv
September 18th, 2009

Great collection ! lovely free fonts showcase.. beautiful !

I can say that “Nilland” font is a really nice option tu put in this post..
You can check it in my blog, i’m using it in titles… or view it in DaFont (http://www.dafont.com/nilland.font)

adeux!
Jon Phillips
September 18th, 2009

@dlv: Thanks a lot! Nilland is a pretty cool one! :)

Oh by the way, not all the fonts in this post are free.For example, the Axel font family is $79 (worth every penny in my opinion) Cheers!
Johnny
September 19th, 2009

I adore typography, and this is a great roundup, plus the CSS tips on top.
Femke
September 19th, 2009

“[] Helvetica and Georgia. They’re great and I used them all the time since they’re web-safe fonts.”

I’m very sorry to be the barer of bad news and you will have to revisit all the sites you produced containing Helvetica which you use all the time. Unfortunately Helvetica is NOT a web-safe font at all.
Jon Phillips
September 19th, 2009

@Femke: oops, I meant to say Verdana and Georgia, fixed :)
RedCafe
September 19th, 2009

Hi, maybe a stupid question but I wonder if we can use TrueType Fonts also?
Elena
September 19th, 2009

Thank you for this rich resource of @font-face fonts. I’ve always been a little hesitant to try it because of IE’s EOT but this makes everything easy to understand.
İbrahim
September 19th, 2009

Thanks for Typefaces
Affordable website designers
September 19th, 2009

Excellent selection of fonts. These tips will be really useful. Brilliant!
Michael Rockett
September 20th, 2009

This is an awesome list! I’ve never tried to use this, but it looks really good! :) Thanks for sharing! :)
Luci
September 21st, 2009

I like the sound of this @font-face, but because of its cross-browser issues I doubt I’d use it widely until it’s given more support (sadly the case with a lot of css3 stuff) . Thanks for the explanation of how to work with it though, it’s definitely something worth knowing about, thanks! These are some lovely fonts !
Olly
September 21st, 2009

For those of you worrying about the cross-browser issues, Paul Irish has put together a bulletproof syntax which gives you support across IE and most other recent browsers:

http://paulirish.com/2009/bull.....on-syntax/

Now I just need to find a nice, simple way of converting an OTF to an EOT…
choen
September 21st, 2009

thanks. i use Diavlo in my project
Gaurav M
September 22nd, 2009

Thanks Jon … these typefaces are so eye catching
Danny Garcia
September 22nd, 2009

Hope to see more font artists support the cause (or even through TypeKit).
Here’s another nice font – Aller:
http://www.dmjx.dk/presserum/skrift.html
michael
September 22nd, 2009

I’m using Miso on my photoblog:

http://mcaghon.com

http://www.omkrets.se/typografi/
theComplex
September 22nd, 2009

Oooo! This has me very excited! While I don’t think I’ll give myself a headache trying to use it now, I’m eager to see how this will evolve! Thank you for posting!
muebles cocina
September 24th, 2009

The Fontin Sans is the most beautiful font I’ve ever seen. I just love it!
Web Design Singapore
October 8th, 2009

thanks! just bookmarked this
JakeT
October 12th, 2009

Awesome. This is LITERALLY what I was looking for today. I went to bed last night saying “tomorrow, I need to figure out which fonts I can use”.

I think the MGOpen fonts would fit well on this as well, but I haven’t combed through the EULA to be able to stand behind that: http://www.zvr.gr/typo/mgopen/index
Michael Kouwenhoven
October 12th, 2009

Love this post!
Aaron Peters
October 12th, 2009

Everybody interested in using @font-face should read Stoyan’s great article on Gzipping font files: http://www.phpied.com/gzip-your-font-face-files/
Gareth
October 13th, 2009

Nice collection of fonts except maybe the last one, one thing that would be good to see when picking a font is how it looks in a paragraph.

Because @font-face allows seamless integration of the font it is much more widely considered as a font for all not just titles and headings.
Ethan Dunham
October 14th, 2009

Just thought I’d share the wealth: I just released a custom @font-face kit generator. You upload your fonts and get back a complete ready-to-use kit. Has some features like custom subsetting and cleanup. Enjoy!

http://www.fontsquirrel.com/fontface/generator
stk
October 25th, 2009

Thanks for the mention!
Francis Baptiste
December 29th, 2009

Great article. But “awesome” might be a stretch for some of these. I mean, when are you ever going to need Blackout or Sniglet?
Jonathan
December 29th, 2009

Thank you for sharing this tip (and these fonts).
I’ve been looking (and until now, never finding) for monthes for alternative ways to display “custom” fonts to the classical and not-so-clean siFR trick. You made my day.
Once more, it’s a shame that this property is not naturally compliant with all browsers. In other words, I mean that it’s a shame that some web browsers still need hacks to display things like they should do so, from the start.
Though, the solution is pretty simple here, and that’s great. :)
Mike
December 29th, 2009

Good post, I use Museo Slab on my site. Did you test these fonts in Internet Explorer? Some fonts look absolutely horrid in IE. The font I use looks bad, but not as bad as some I’ve seen.
Ron
December 29th, 2009

I CANNOT WAIT for http://www.font-face.com to get going and create a central repository. The benefits of font caching will really make me use it frequently.
Sang Valte
December 29th, 2009

awesome!! i just grabbed the ones i want :)
PK
February 20th, 2010

Nice post, thanks :) personaly i like diavlo font, very nice and clean font and modern also.
Oceania font is also one of my fav fonts now http://www.fonts2u.com/oceania-regular.font
Ai~
May 28th, 2010

Thank you for this post! Very informative with a great selection of fonts. :)