Line25

Spice Up Your Web Typography with @Font-Face

Read the full post

We’re all used to making the most of the plain old web font stacks that have been around for the past 10+ years, everyone who’s designed a website will have no doubt written out Helvetica or Georgia hundreds of times in their stylesheets. Nowadays however, we have the option of embedding a whole new range of fonts into our designs. Let’s look at how the CSS @font-face rule allows us to get fancy with our future website projects.

View the demo

View the demo

The @font-face is commonly referred to as a new CSS3 feature, but has actually been around for some years. The only problem was there weren’t any browsers to support it (apart from IE’s obscure EOT methods), so it sat collecting dust at the back of the CSS2 specification. Recently however, browsers have started implementing support for the @font-face rule. First came Safari (3.1), then Firefox (3.5), Opera (10) and Chrome (4.0). So now, any @font-face implementation will be available for a large chunk of your visitors. What’s more, if you insist on IE support you can even get everything working with a quick fumble around with Microsoft’s WEFT tool.

What about SiFR, Cufon, Typekit, [insert latest web-font solution here]?

Over recent years there have been amazing advances in web typography, with various solutions making use of Flash or Javascript to render unique fonts on web pages. I’ve heard great things about all these resources, so definitely check them out if they better suit the needs of your project. A couple of advantages include even larger font choices and wider browser support. I personally enjoy implementing @font-face simply because it fits right in as a native CSS declaration. It doesn’t rely on any weighty add-ons, or any messing around to get it working. Just a few extra lines of CSS and you’ll be rocking with your fancy font choices in no time.

How to use @font-face

To implement @font-face in your own website design, just add the following rule to your CSS stylesheet.

@font-face {
font-family: Blackout;
src: url("path-to-file/blackout.ttf") format("truetype");
}

This snippet of code sets up the font-face rule. In plain english it says whenever the word Blackout appears as a font-family option, use this file. The file source is then listed, and specified as either Opentype or Truetype, depending on the nature of the font file.

h1 { font-family: Blackout, Impact, Helvetica, Sans-Serif; }

All you need to do then is reference the font Blackout in your everyday font-stacks. Remember to add more universal backup options for those users with non-supporting browsers.

Fonts available for @font-face use

Don’t go font-facing every font you have on your computer, as the majority of font files aren’t licensed for you to go making them publicly available for download (which is basically what you’re doing with @font-face). As time goes on there’s more and more fonts becoming available for font-face use, and they’re pretty cool ones too! Here’s a roundup of the most popular fonts available for your font-face use. For even more, check out the Fonts available for @font-face embedding list at Webfonts.info.

Blackout

Download the font

CA BND

Download the font

Chunk

Download the font

Delicious

Download the font

Diavlo

Download the font

Fontin

Download the font

Graublau Sans

Download the font

Junction

Download the font

MEgalopolis

Download the font

Tallys

Download the font

Sniglet

Download the font

View the demo

View the demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

57 Comments

  1. Jon says:

    Very nice! Thanks once again!!!

  2. Too bad IE doesn't render this, therefore it's useless for everyday webdevelopment… I guess we will have to wait a few more years and use Cufon untill IE supports @font-face (and another 10 years to wait untill everyone uses minimal IE9..)

  3. So simple, so useful, already a must use!
    Thanks for the fonts.

  4. ximi says:

    Great Round-up of this technique Chris.

    You failed to mention that by including different font-file formats such as .eot, .svg and .woff you get actually support in all major browsers including IE6+.

    Font Squirrel actually offers a <a href="http://www.fontsquirrel.com/fontface/generator">@font-face Generator</a> that allows you to generate those different file-formats from a .otf or .ttf-file. They also have an extensive list of fonts that can be used with @font-face and ready-made @font-face kits including a style sheet that already references the different fonts and file-formats.

    I also wrote up a post that features 30 fonts you can use with @font-face and explains how to use it a while ago on this topic: <a href="http://designlovr.com/30-beautiful-and-free-fonts-you-can-use-with-font-face/">30 Beautiful and Free Fonts You Can Use with @font-face</a>.

  5. Thanks for this article Chris.
    I was looking for a good tutorial to explain how it works. (:

  6. Great article Chris. Never really understood how many sites were able to have fancy fonts without using an image. Now I know :). Great roundup of fonts to! You the man Chris!!

  7. Thanks for the info Chris. I've never implemented @font-face but I'm sure I will now.

  8. seek says:

    Didn`t try it out till now, but hopefully will try it tommorow. Only one question, is it compatible with polish letters like ęóąśłżćń ? I know we live in UE and english is common language that almost everybody understand, but country coding is still very important

    • That all depends on the choice of font, and whether those characters are included in the set.
      Many free fonts probably don't, but there might be a couple of those listed that do have a complete character set.

  9. Rachel says:

    Good article..nice list of fonts..thanks for sharing….

  10. Paul Clerkin says:

    Very nice – works well, just leaving MSIE users with default doesn't cause me any sleepless nights

  11. Rob says:

    Great to see some more ruts on @ font-face – let's make it so mainstream it hurts. http://www.font-face.com is wicked and coming soon I hear.

  12. pixonu says:

    Gosh darn, I wish web design would stop growing so I have a chance to catch up! haha ;) ;)

  13. Chad Payne says:

    Here is a great generator for creating eot, and other versions of your type face.

    http://www.fontsquirrel.com/fontface/generator

  14. Jose says:

    Awesome. Now we don't have to use images all the time!!!!

  15. Toby says:

    I have been playing with font-face and have found font squirrel to be a must use as it provides a font-face download kit with all its fonts.

    Great article to Chris.

  16. Angie Bowen says:

    Great post Chris. I have a question that you may be able to answer for me.

    I've tried using @font-face with a couple of different fonts that caused me some trouble.

    First I tried using Fontin, which works well as long as you use all caps. However when using lowercase letters, the letters with descenders get cut off.

    I also tried using Santana which is also licensed for @font-face and it just rendered horribly.

    So my question is, is there any way to tweak the fonts you use with @font-face or are some just not optimized for the web?

    Thanks!!

    • I can't say I've come across those issues I'm afraid. I do know that the rendering on XP is pretty ugly, but most fancy fonts look good on later Windows systems and on OSX.

      Graublau is the font I use on Blog.SpoonGraphics, which seems to be working well.

      • Angie Bowen says:

        I test on vista so I shouldn't be having the XP problem. Graublau looks awesome in Firefox on Vista. I'm guessing it's just the fonts.

  17. Marco says:

    Even though I like how easy and light-weight @font-face can be, I really love the way Cufon renders the fonts, they're way smoother on most occasions. I'd rather just use @font-face however…

  18. Chris says:

    My biggest issue with @font-face is relying on in-browser anti-aliasing.

    On Macs, it looks great, but on a PC, depending on your browser, the fonts can look awful.

    I'll probably continue to rely on Cufon mainly for that reason.

    • Thomas says:

      This for me is enough to not use font-face.

      I was developing my new website on a mac with some beautiful serif fonts, and all was looking fine and dandy, until I decided to check on how browsers on windows are rendering the fonts. It was awful.

      The only font I could get render as 'acceptable' was 'nevis' with a bit of of tweaking in the css.

      So for this very reason, i'll be sticking to cufon, unfortunately.

  19. Atro says:

    as a flash developer, I can only say, welcome to the dark world of font embedding. Hope you enjoy unicode bit of it

  20. Matthias says:

    Thanks for this Chris. Unfortunately most of the nice available fonts at this time don't support letters like the german umlauts (ä,ü, ö) or the french é, à, ô, etc. and can not be used if you have a different language then english.

  21. wpBlast says:

    Thank you so much for this article!

    I was just looking for a better way to replace some fonts. Thanks.

  22. Dannci says:

    All fonts from http://typethefont.com/ are available for @font-face embedding, too.

  23. Grün Weiss says:

    cool stuff, nice

  24. Sam says:

    About time!

  25. Alan says:

    I think you read my mind Chris.

    Everytime im learning something new and about to implement it into a new design, which in this case is my new portfolio design, along you come with a tutorial on how to do it.

    Great work, thanks for the info.

    • rajasegar says:

      Me too :-) this is exactly what i was looking for , great work Chris, keep it up..

  26. Laura says:

    Hey Chris, thanks for the tips. I've seen font-face popping up more and more recently – what with the browsers catching up with themselves and all. So I think it'll be worth having a look at in future.

    As has been mention a few times above, Windows XP does render fonts very poorly. However I also noticed that the margins / line-spacing / block heights weren't quite right in Firefox and Chrome on XP, but were fine in Safari. Didn't even bother checking IE… So perhaps we have a little bit more than browser compatibility and rendering quality to deal with.

    And as you mentioned, perhaps downgrading gracefully is the way to go, and using font-face in very small amounts, to help tackle any cross-browser / cross-platform issues.

  27. freaknboy says:

    Finally, a good post about using fonts with font-face! Thanks!

  28. James says:

    Hi Chris,

    Nice post and great font list. I also have the site search for the font locally first, to speed up load time, by adding this:

    src: local("Blackout"), url("path-to-file/blackout.ttf") format("truetype");

    Particularly useful as I guess we'll all have the fonts from your list installed on our machines.

  29. kirolos hany says:

    this is wonderful tutorial .. i read it 3 times and get a fantastic results and sure i put a
    copy of this lesson on my here http://www.learnanyway.blogspot.com

  30. alex says:

    iphone doesnt render it too….

  31. Thanks for this great overview of useable fonts, Chris.

    But I really miss the Titillium (http://www.campivisivi.net/titillium/) in that list.

    btw. I use the Graublau on my website for maybe one year now.

  32. Michael says:

    Thanks Chris.

    I am using Alexandria for some time on my Website.

  33. I'm really excited for the future of typography on the web!

  34. rob says:

    Thx for the fonts.. these are very nice.

    Delicious is one of my favorites

  35. Mike says:

    Very nice article, will try it out and come out of my theory of using basic typefces

  36. Greg says:

    @font-face is awesome. I used it in building http://transparencycaucus.org/

    One thing I learned to keep in mind is @font-face is apparently a depreciated term in MobileSafari so it doesn't render on iPhone, no clue why they did this.

  37. Tom says:

    Any ideas on how to load the font better? Right now there is a split second of two in there where the font flashes then loads the custom font.

  38. Wow and I thought we'd be stuck with the same 'ole fonts in our websites forever. This is great news for website developers everywhere.

    I hope more browsers will support this!

  39. steven says:

    A lot of these are available at font squirrel as a pack (all font formats plus css.)

  40. idagency says:

    Nice post, but SIFR is probably the best, even if it's using Flash, font face takes a moment to load the font selected and I think it's not nice from a usability point of view…

  41. Brilliant! I've been watching and waiting for these kinds of changes to be made to CSS. When I first started in web design and development years ago I tried to do the exact same thing as above … It didn't work and I was forced to flash!

    I'm really pleased we can now use an organic and hack free method of using non-standard fonts.

    Good Post :)

  42. <p>Nice simple instructions there Chris, good job. I have been toying with using @font-face, but have seen how bad some fonts look depending on the browser. Was also considering Typekit, but not sure I want to pay out each month for the privilege especially as there can be display problems too. Think I'll give it a little while longer and see how things pan out.</p>

    <p>Paul Galbraith's First Ever Blog Post.. <a href="http://paulgalbraith.com/too-many-design-blogs">Are there too many Design Blogs?</a></p>

  43. Aztec Online says:

    This sounds interersting, I had no idea it even existed!

  44. Nikhil says:

    This is great and easy to use.
    Question:
    Can we use only these fonts or any font we like? Confused!!

Sorry, comments are now closed