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.

  • Jon

    Very nice! Thanks once again!!!

    • http://www.mintmark.com Tom Flowers

      Awesome article; thanks! :)

  • http://www.supershackle.com supershackle.com

    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..)

    • http://automatique.nl Tijs Teulings

      No need to wait. Simply define a bearable alternative for IE on your stylesheet and your good to go. I use font-face, and many other 'HTML5' enhancements, in basically every new project i start these days.

      As always graceful degradation is the way to go.

      • http://twitter.com/chrisspooner Chris Spooner

        The graceful degradation route as Tijs mentioned is the route I personally take, although with some extra work with EOT font files you can also get @font-face working in IE.

    • http://www.webdrivenchurch.com Daryl McMullen

      My thought is, "Who cares that MS IE8 doesn't support it?" If we give in to IE every time we design we'll keep progress from happening. If we start designing for the more compliant browsers and force IE to render a degraded version of the site – maybe they will eventually come in line with standards compliance…

      I just hate having my designs driven by the big bad wolf…I want more control over my designs and html5/css3 offers me that…

      Keep up MS!!!!!

    • http://www.colouringcode.com The Designer

      IE does render @font-face. You simply need to include a .EOT version of the font.

      IE was the first browser to support @font-face. The rest of the browsers are late to the party.

    • http://www.premiumdw.com/ Mike Sinkula

      IE does support it. But, you need to separate your style sheets: http://www.sccc.premiumdw.com/web200/web-font-linking/

    • http://sixrevisions.com Jacob Gube

      @font-face was implemented in Internet Explorer 6.

      You just need to use .eot versus .ttf files. What you end up with, if you want cross-browser compatibility is including two files (.eot and .ttf).

      http://stackoverflow.com/questions/1753838/internet-explorer-font-face-is-failing

  • http://web.virtuousquare.fr Virtuousquare

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

  • stope
  • http://designlovr.com ximi

    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>.

  • http://www.antoineguedes.com Antoine Guédès

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

  • http://www.webdevtuts.net Marcell Purham

    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!!

  • http://twitter.com/twitfortheday Japanese Jimmy

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

  • http://seek.com seek

    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

    • http://twitter.com/chrisspooner Chris Spooner

      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.

  • http://rachel.learnless.info/ Rachel

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

  • http://www.archiseek.com Paul Clerkin

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

  • Rob

    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.

  • http://youtube.com/pixonu pixonu

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

  • http://www.bcccreative.com Chad Payne

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

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

  • http://www.jgdesignz.com Jose

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

  • http://www.mashupdesign.co.uk Toby

    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.

  • http://arbent.net/blog Angie Bowen

    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!!

    • http://twitter.com/chrisspooner Chris Spooner

      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.

      • http://arbent.net/blog Angie Bowen

        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.

  • Marco

    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…

  • http://www.studio625.net Chris

    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.

    • http://top10.com Thomas

      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.

  • Atro

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

  • http://www.perpetuumportfolio.com Matthias

    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.

  • http://wpblast.com wpBlast

    Thank you so much for this article!

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

  • http://typethefont.com/ Dannci

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

  • http://www.sgdoeschwitz.de Grün Weiss

    cool stuff, nice

  • http://www.csssam.blogspot.com Sam

    About time!

  • http://www.alan-horne.com Alan

    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

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

  • http://www.creativeindividual.co.uk Laura

    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.

  • http://www.freakstyle.fr freaknboy

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

  • http://www.jamessteer.com James

    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.

  • kirolos hany

    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

  • alex

    iphone doesnt render it too….

  • http://sascha.toussaine.net Sascha Toussaine

    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.

  • http://www.emdesigns.de Michael

    Thanks Chris.

    I am using Alexandria for some time on my Website.

  • http://www.rodneykeeling.com Rodney Keeling

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

  • http://www.pwrsites.com rob

    Thx for the fonts.. these are very nice.

    Delicious is one of my favorites

  • http://www.searchengineoptimization.co.uk Mike

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

  • http://www.theviciouscircus.com Greg

    @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.

  • http://etomco.com Tom

    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.

  • http://www.awebd.com.au Website Design Melbourne

    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!

  • http://www.sedunia.com.my steven

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

  • http://www.idagency.fr idagency

    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…

  • http://www.samyoul.com Samuel Hawksby-Robinson

    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 :)

  • http://paulgalbraith.com Paul Galbraith

    <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>

  • http://www.aztec-online.com Aztec Online

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

  • http://nikhilmisal.com Nikhil

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