Try Tuts+ Premium, Get Cash Back!
Quick Tip: How to Work with @Font-face
videos

Quick Tip: How to Work with @Font-face

on Feb 9th 2010 with 93 comments

Due to the fact that @font-face can be a bit overly complicated, it hasn’t caught on quite as much as it should. Once you start reading about licensing, different font formats, browser consistencies, it can potentially become more trouble than it’s worth.

But – in five minutes, I’ll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch!


Final CSS

@font-face {
font-family: 'blok-regular';
src: url('type/Blokletters-Potlood.eot');
src: local('Blokletters Potlood Potlood'), 
 local('Blokletters-Potlood'), 
 url('type/Blokletters-Potlood.ttf') format('truetype');
}

@font-face {
font-family: 'blok-italic';
src: url('type/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'), 
 local('Blokletters-Balpen'), 
 url('type/Blokletters-Balpen.ttf') format('truetype');
}

@font-face {
font-family: 'blok-heavy';
src: url('type/Blokletters-Viltstift.eot');
src: local('Blokletters Viltstift Viltstift'), 
 local('Blokletters-Viltstift'), 
 url('type/Blokletters-Viltstift.ttf') format('truetype');
}

h1 { font-family: blok-heavy, helvetica, arial; }

Notice how we’re referencing both an .eot and .ttf font? This is because, of course, Internet Explorer only uses its own format, that has yet to truly catch on. As such, we must first import that .eot file, and then move on to the different formats for Firefox, Safari, etc. It’s essential that you load the .eot version first.

Next, we search for the font on the user’s computer by using the “local” attribute. If it’s unfound, only then do we pass a url that will load the font.

Why Doesn’t IE Try to Load the TTF Fonts?

This was definitely a concern. If Explorer can’t work with the truetype format, we don’t want to waste time trying to download the font. Luckily, because of all those local attributes, and the commas, IE won’t understand any of it. As such, it will simply skip the line all together, thus, only utilizing the .eot version.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
Newer Comments →
  • Jack

    Great QuickTip! You speak really clearly

  • http://andreip.net Andrei Patrascu

    Really nice. Exactly what I needed. Great Work!

  • http://ministrylogic.com Brandon

    What are some of the “bugs” we have to watch out for?

  • http://builtbyhand.co.uk Neale

    Very nicely done i’ll definitely look into working with this in the future, cheers.

  • Jeremy

    Excellent explanation. You mentioned quirks… what are some? How about link states? Thanks!

  • http://tutsvalley.com Slobodan Kustrimovic

    Thanks. :)

    What’s the purpose of Cufon and sIFR if this is possible?

    • Micko

      Not all browsers support this.

      • Batfan

        Like which ones? All of the @font-face kits that I have used (including this demo) work in IE 6/7/8, FF and Chrome

      • http://www.jeffrey-way.com Jeffrey Way
        Author

        Older versions of Firefox (2), Chrome, and Safari (2) won’t work with font-face. IE should be good back to IE6.

      • http://tutsvalley.com Slobodan Kustrimovic

        So the only reason to use cufon over font-face is because it doesn’t work in Chrome? Well good enough for me, i’m using Chrome too :)

      • Batfan

        @Slobodan

        Just older versions of Chrome. The current version of Chrome supports it fine.

      • http://tutsvalley.com Slobodan Kustrimovic

        Since the users of Firefox, Safari and Chrome aren’t the type of users that will use older versions like IE users, and IE supports this back to IE6, my question remains.

        Why use Cufon or sIFR instead of font-face?

      • Batfan

        @Slobodan

        Basically it’s a matter of preference. Often times, @font-face fonts will not render as smoothly as say Cufon or sIFR. It just really depends on the font.

        The rule I use is that if it doesn’t look good in @font-face, move on to Cufon. Easy enough.

    • Danijel

      This is a CSS3 feature that all browsers currently doesn’t support, but will, some day (day we can’t wait for) :)

      Difference between Cufon/sIFR and @font-face is that @font-face is native in CSS3.

      • http://www.BryanWatson.ca Bryan Watson

        @Danijel – I think he realizes the differences between the solutions, he just want’s to know ‘Why?’ people would favor to use a Javascript or Flash alternative when compared to using @font-face

        Simply put, @font-face wasn’t as popular when those solutions came about. Sure, custom fonts were incorporated in older releases of IE, but for modern browsers, using custom fonts is a ‘new’ aspect incorporated with CSS3.

        Also, there is often times where it’s required that the font looks the same across all browsers, and cufon and sIFR tackle this issue. Plus, if one so concerned about the font being aliased with @font-face, the other solutions solve that problem as well by displaying them as images or in flash with anti-aliased text.

    • r_jake

      I think one of the past obstacles beside cross-browser support was that many commercial typeface licences restrict their use with @font-face since the end user is effectively downloading the font files onto their computer, whereas Cufon et al are just drawing it on the page, so this deemed okay. I think that Adobe and some other font foundries could now be on board so this may have changed. Of course you can just stick to free fonts and avoid this issue altogether.

      Some people have reported having trouble converting TrueType fonts to the EOT format.

      I have also heard that some font files are quite big downloads – sometimes several hundred KB! Would be interested to know if/how browsers cache them.

      But @font-face doesn’t require Flash or JavaScript, you can freely style and select the text, and it doesn’t fill your HTML with canvas or VML tags which I’m sure aren’t good for SEO or Accessibility

      There’s not a clear winner, in my view.

  • Dave

    This is great, I will look into this further. Thanks

  • http://stvproductions.net S.T. Verschoof

    I Have used @font-face for my CV and used some of the Free fonts from font Squirrel. They are the best and it does work in Internet Explorer which is great!! Thanks for the guide ;P. Could come in handy for those who want to start using @font-face!

    P.S. Font Squirrel the place to be!

  • Andrew

    Doesn’t seem to work with Google Chrome.

    • Mikey

      Works perfectly well with me ….

  • http://www.philohermans.com Philo

    Nice quick tip :)

  • James Bull

    I’ve noticed some odd things when using the :hover seudo-class. Specifically when using hover to change the color of the type. For some reason not all of the letter gets its color changed. Often if the word ends with a “g” or a “p” parts of those letters remain the old color.

    Anybody else notice this happen? And anybody know of a fix?

  • James Bull

    I’ve noticed some odd things when using the :hover pseudo-class. Specifically when using hover to change the color of the type. For some reason not all of the letter gets its color changed. Often if the word ends with a “g” or a “p” parts of those letters remain the old color.

    Anybody else notice this happen? And anybody know of a fix?

  • http://sffarlenn.net Laneth Sffarlenn

    I’m wondering, since this is a CSS3 property, are the details provided below correct?
    http://webfonts.info/wiki/index.php?title=%40font-face_browser_support

    Jeffrey, I notice that you said that it’ll work in all browsers, and I’m just wondering if this is one of the absolute standards of CSS3 that all modern browser updates have now implemented? (Unlike some with box-shadow, etc.)

  • Viktor

    Hi, great tutorial!

    I tried but my firefox asks me if I will let it use the font, which is kind of annoying. Any way around that?

    Thanks

    /v

    • http://miralize.com Sean O’Grady

      upgrade? never happens to me

  • http://cristurm.wordpress.com Cristina Sturm

    Great, that was an awesome tip! Thanks a lot for sharing. ^-^

  • http://miralize.com Sean O’Grady

    You should have just called the font family for all of them “blok” or something similar and set the different font-weights in each @font-face.

    I find that much cleaner to be honest..

    • http://bryceroney.com Bryce

      I was just going to write this, it makes things a lot easier if you make the single font the one font-family and use font-weight and font-style. It makes it easier when you want to make certain selectors bold and/or italic because you don’t have to write the whole font stack out again.

  • http://thesacrificebunt.com Melvin

    I know it’s not an option for everyone, but I’d rather just ignore Internet Explorer if it wants to be that way rather than pander to its idiocies.

  • http://HDesignsPlus.com Hooman

    Any idea how to make it work with UTF-8 fonts like Persian/Arabic fonts? the problem is the fonts are separated from each other in all IE versions, but works fine in other browsers, and most people are on IE here. Any help would be appreciated.
    @fontface solves all my troubles in web design if some one can help me solve this problem.
    Great screencast btw.

  • http://hdesignsPlus.com Hooman

    BTW, I just tested in IE and Chrome, it only works fine in chrome, its like in IE in all other browsers, tested in FF 3.6, safari3, opera 10, IE 6, 7, 8

  • Evan-XG

    really cool !! and essential to know.

    thanks a lot.

  • Matt

    http://www.kirsle.net/wizards/ttf2eot.cgi

    I’ve been using that to convert my ttf fonts to eot for IE support. The Microsoft tool (WEFT) is impossible to understand (something like load a webpage that uses the font and something happens with something and a font gets converted). This is direct, and if you’re on Windows, you don’t need a VM or Cygwin to use Fontforge.

    Thought that may be helpful for some people. It beats using Cufon or the like, definitely.

  • http://www.moraywebsolutions.com Gordon

    I have been meaning to get to grips with font-face for a while now, and would like to use it on a couple of sites I am due to start development on soon. Really handy article, and some great tips in the comments too! :)

  • http://designdotcode.com agilius

    Great remake of the screencast made by some other guy for that nettuts screencast competition. :D Your voice sounds a lot more clear compared to the other!

  • http://nordahl.me Kenneth D. Nordahl

    I wrote a piece about @font-face a month or so ago. To get all browsers aboard the custom font you need the following:

    @font-face {
    font-family: ‘ChunkFive’;
    src: url(‘Chunkfive.eot’);
    src: local(‘ChunkFive’), local(‘ChunkFive’), url(‘Chunkfive.woff’) format(‘woff’), url(‘Chunkfive.otf’) format(‘opentype’), url(‘Chunkfive.svg#ChunkFive’) format(‘svg’);
    }

    That is .eot format for Internet Explorer, .woff format for Firefox 3.6 + other browsers when they get support for it and the .otf and .svg format for Safari/Chrome/Safari on iPhone/Android browser.

    Read the whole piece at:
    http://articles.nordahl.me/font-face
    (it includes some screenshots from different browsers)

    • http://www.mihaomejc.com Miha O

      Your article is better than this tut. Thumbs up!

    • r_jake

      Why not just use .ttf?

      • http://nordahl.me Kenneth D. Nordahl

        I simply didn’t add it to reduse the site load time. If your analystic report show that most of your firefox users are on 3.5 you should add .ttf as well.

  • http://spotdex.com/ David Moreen

    I think it’s great that you can do this with CSS rather than using the flash and javascript kind.

  • http://hdesignsPlus.com Hooman

    Any idea how to make it work with UTF-8 fonts like Persian/Arabic fonts? the problem is the fonts are separated from each other in all IE versions, Firefox 3.6+ Opera10, safari 3, but works fine in Chrome, and most people in my country use IE. Any help would be appreciated.
    @fontface solves all my troubles in web design if some one can help me solve this problem.
    Great screencast btw.

  • http://sideradesign.com paul

    how to get around the constant popups in IE asking if you want to download the font at higher security levels?

    • Sahan

      May be it because your testing it from your local pc ?

  • http://www.jordanwalker.net/index.php Jordan Walker

    Thanks for this article, I wish the browser adoption rate would increase. It would help the load time to remove the sifir javascript font replacement .

  • http://www.aboubaker.info/ Aboubaker Nour

    Thank you so much, it’s really works
    but I’ve some problems with Arabic fonts…

  • micheal b

    Would be nice to see how to implement this into existing wordpress themes.
    Some stylesheets can be pretty complicated if you aren’t sure what to look out for.

    Lets see a screencast which demonstrates how to implement this into wordpress themes. please…

  • jmarreros

    Really nice article, I’m sure to use this knowledge in the future

  • Lori

    when i opened the demo page from source by IE and Firefox……its totally different…..what happened

  • http://www.jc-designs.net/blog Jeremy Carlson

    As cool as this is, and I will definitely use it, this line bothers me greatly:

    “Font Squirrel makes no guarantee that our interpretation of each license is correct in allowing @font-face usage.”

    If they don’t know, and they are offering this service, how in the hell am I supposed to know??

    Does this seem unacceptable to anyone else? Don’t provide fonts at a download at your own risk kind of thing. If you are going to do it, do it right, and make SURE that what you are offering is legal. People are trusting that these fonts are able to be used.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      My guess is that that notice is only meant to protect them legally….should something happen. I personally wouldn’t worry about it. :)

  • http://rodrigoflores.ca/ Rodrigo Flores

    GREAT JOB explaining it Jeffrey. I find http://www.fontex.org/ to be a great resource for finding and downloading fonts for all purposes.

    Cheers,

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Haven’t heard of that one. Will be sure to check it out!

  • http://www.jacktardesign.com Justin

    That was great. Thanks so much!

  • http://www.eganwebdesign.com Mike

    kinda getting off the topic. you go to your virtual machine for IE proofing. Just wondering what you use for this? VM ware, Parallels, etc. ? Thanks!!!

  • http://bloggerzbible.blogspot.com/ Bloggerzbible

    Really great one

  • Dave

    Hello,
    How can I use Segoe UI with font-face? it doesn’t seem to work for me when I include the ttf file.
    Thank You

  • http://meissen.stadtlog.com Meissen

    excellent! thanks for the short tip.
    greetings

  • Bobbi

    I was playing around with this concept, but ran into problems when you modify the URL path.

    Maybe it’s my OCD, but I like to have all similar files grouped folders. For example, if I have a folder called “type” like the example and want to host all the font files in that folder and put all my CSS code together.

    Sample folder setup:
    css
    |-> text
    `-> fonts.css

    Within “fonts.css” file I set the parameters:
    @font-face {
    font-family: ‘WhitehallRegular’;
    src: url(‘type/whitehall.eot’);
    src: local(‘Whitehall Regular’), local(‘Whitehall’), url(‘whitehall.ttf’) format(‘truetype’);
    }

    The file can’t read the EOT file and displays the default, but if I move the font.css file into the “text” folder and make the path local… it works just fine.

    Any advice?

  • Eric Boxer

    Love it, thanks!

  • Dave

    Perfect timing, I just got a request for a particular font. I implemented this in a few minutes… wow, what a nice technique!

    Even though I had previously discouraged people from trying to use non-standard fonts, I like typefaces, and I am becoming a convert!

    Many Thanks!!!!!

  • http://cocaineandcoffee.com Jesse Jamis

    @fontface worked great for me at one point then for some reason certain add-ons for firefox interrupt the rendering of my chosen font-face. The end result being; having to drop the use of the embedded font from my latest project for inconsistacy reasons…
    Has anyone else experienced this could it have been the font being corrupted?

  • sovanndy

    Why google chrome doesn’t render font through font face?

  • http://www.joomlahackers.net Joomla & Magento Services

    Confused about the IE thingy.
    Can anyone help ?

    I tried both the TTF and EOT versions and none of them worked on IE.

    Dont know, what am I doing wrong .

    My css is,

    @font-face {
    font-family: Tw Cen MT Condensed Extra Bold;
    src: local(‘TCCEB’), local(‘Tw Cen MT Condensed Extra Bold’), url(“images/TCCEB.eot”) format(“truetype”);
    }

    Email here please, info@qubesys.com

    • http://www.anthonyterrell.com Anthony

      The first thing I would do would be to shorten the “Font-Family” name. It’ll waste time and creates room for error later on during styling. And I think you don’t need ” format(“truetype”); ” since you’re only testing a .EOT file. Please someone correct me if I am wrong though.

      I hope this helps at all!
      -Anthony

  • http://www.anthonyterrell.com Anthony

    I’ve always liked the flexibility of @font-face and it’s ease of use. My only issue is that, it works, but in different browsers the type looks different. For example my most recent project I am using Helvetica Neue Light and it looks thinner on one browser more than the other. At this point I was only using a .ttf, but in the past I’ve use .eot .ttf and post script.

    It’s not a incredibly huge deal, but having that designer eye really bugs me to see that when I push a site live. Should I stick to JS Cufon? Any help would be greatly appreciated. Thanks in advance!
    -Anthony

  • http://www.siberevlilik.com evlilik

    like it
    thank you

  • http://www.sointeractive.co.za nathaniel

    Jeffrey dude, you are the man.

  • http://www.micelistudios.com Steve

    Could there be any reason why @font-face doesn’t work from my host only on IE ?
    It works on a MAC in FF and Safari… but IE serves up a very bitmapped looking mess.
    you can see here on my home page: http://www.micelistudios.com

    I even copied your example files, and the font-squirrel files that get generated on my domain, and they don’t work only on IE 6,7,8.

    Everything works fine when I run them locally on IE.
    I checked file paths and now I’m stumped… I was wondering if anyone has experienced this before ?

  • Alejandro Gonzalez

    I’m using squarespace and I’m trying to implement that in my code. Is that code suppose to go in the html? I see that it’s a css code but your putting it in an html? I’m a bit confused.

Newer Comments →