Grow your CSS skills. Land your dream job.

Last updated on:

Using @font-face

This is the method with the deepest support possible right now:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Things are shifting heavily toward WOFF though (Update: and now WOFF2!), so you can probably get away with:

@font-face {
  font-family: 'MyWebFont';
  src: 
    url('myfont2.woff') format('woff2'); /* Chrome 26+, Opera 23+ */
    url('myfont.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */

Or if you wanna go a little further back:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

You then use it like this:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Backstory

@font-face is for loading up and using your own custom fonts, rather than the limited set of standard system fonts already installed on computers that browsers have access to. What fonts those are varies quite a bit from system to system. Here's the lowdown.

Performance

Remember that font files can be very large and add extra requests to your site, both things that slow down websites. Make sure you consider that and decide a custom font is important enough to you to include.

If you do use custom fonts, one way to be more responsible about it is to load as little of the character set and as few alternate weights and styles as possible. For instance, if using Google Fonts, importing only a few specific combos:

@import url(http://fonts.googleapis.com/css?family=Averia+Sans+Libre:400,300italic,700);

Or even limiting the character set.

Other than performance, @font-face seems to be one of those things always rife with weird bugs. Like this and this and this.

Font Formats

There are several competing formats each with their own history.

WOFF / WOFF2

Web Open Font Format. Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format can also include metadata and license info within the font file. This format seems to be the winner and where all browsers are headed.

WOFF2 is an evolution of it that is basically better compressed (support).

SVG / SVGZ

Scalable Vector Graphics (Font). SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone. Currently SVG fonts are not supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely to focus on WOFF. SVGZ is a zipped version of SVG.

EOT

Embedded Open Type. This format was created by Microsoft (the original innovators of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.

OTF / TTF

OpenType Font and TrueType Font. In part because these formats could easily (and illegally) be copied, the WOFF format was created. However, OpenType has capabilities that many designers might be interested in (ligatures and such).

Font Services

Services can allow for fonts you wouldn't otherwise have access to, allow you to use the font legally, and deal with the delivery for you (e.g. serve the fonts through a CDN for you). Here's some:

  • Cloud Typography
  • Typekit
  • Fontdeck
  • Webtype
  • Fontspring
  • Typotheque
  • WebINK
  • Fonts.com
  • Google Fonts
  • Font Squirrel

Compared.

Reference URL

Comments

  1. Permalink to comment#

    Just as a suggestion, i think you should use the Paul Irish Bulletproof Method. This seems to be a more direct, quicker (less HTTP requests) format. Example:

    @font-face {
      font-family: Delicious;
      src: url(Delicious-Roman.eot);
      src: local('Delicious'), local(Delicious'), 
             url(Delicious-Roman.otf) format('opentype');
    }
    
    • Permalink to comment#

      I agree with Eddie, except do TTF and OTF fonts all have EOT versions? I’m not sure, for example, you can find both a TTF and EOT version of the Calibri font. It looks like there’s a line command utility out there to convert TTF and OTF fonts to EOT so that might be the best solution, but it sure seems like a chore.

    • fontsquirrel.com allows you to upload a font (make sure the license allows this) and will then create the various versions of the font for you.

    • Shannon
      Permalink to comment#

      This is great. I have one question, Do I upload the fonts to the server as well? If so what folder?

  2. Hi,
    I don’t understand where I could find *.eot file or *.otf file. There is a method to generate it?
    Thank you.

  3. For using a true type font do I need to specify a local font? It’s a home made font which no one will probably use.

  4. I had a problem with the font I used not rendering properly when in small sizes. A few hours later (and a couple of grey hairs) I found that if your stylesheet is using

    @media screen {
    styles...
    }
    
    @media print {
    styles...
    }
    

    the @font-face needs to be outside. Like this:

    @font-face {}
    
    @media screen {
    styles...
    }
    
    @media print {
    styles...
    }
    
    • Permalink to comment#

      THANK YOU! Been going crazy wondering why this wasn’t working in FF and IE and this has sorted it.

    • Conor
      Permalink to comment#

      You’ve just helped me after 3 days of going mental trying to figure out why my fontfaces were not working in IE.

      Thanks!

  5. Muhammad
    Permalink to comment#

    Really thank you man

  6. Lennart
    Permalink to comment#

    I’m having trouble uploading (with cyberduck) fonts to my server (no ssh acces), they end up being 0kb in size. Fontsquirrel gives me an error too (io error), anything I’m missing here? Im on a mac, and have tried several fonts but all wont work.

    • Not sure about the uploading, but I was getting the IO Error from fontsquirrel.com using Chrome and I switched to FF and it uploaded fine. Not sure if that’ll help anyone, but worked for me.

  7. Permalink to comment#

    I use Paul Irish Bulletproof Method, but in IE7/8 did not work for me insted Firefox and Opera did the job well!!
    I will try this solution

    <!--[if IE]>-->
    
    
    @font-face{
    font-family:'Fontin-Regular';
    src: url('Fontin-Regular.eot');
    }
    

    in IE and I will tell you if is working.

  8. I’ve a serious problem here with font-face when I print the page found that the viewer didn’t display my font, how can I define my font when I print the page.

    Thanks

    • billy
      Permalink to comment#

      I’m having this same problem.
      Anyone with ideas?

    • Permalink to comment#

      Do you have fallback fonts in your font-family rule?

      Like this

      .some-element{
          font-family: "Super Awesome Font", Arial, sans-serif;
      }
      

      And/or you can always define a “safe” font in you print styles:

      @media print{
         .some-element{
              font-family: Arial, sans-serif;
          }
      }
      
  9. Permalink to comment#

    I am having a frustrating problem. I can’t get @font-face to work on windows xp at all. I have windows vista on a computer and have tested in all browsers just fine then when I checked in windows xp its not seeing the @font-face at all. I have tried a dozen ideas and all have failed in xp. I have to get it to work in xp it’s still a popular os. Any ideas?

  10. James
    Permalink to comment#

    What should be the location of the uploaded font files? Is it relative of the url? if its not uploaded to the root path then do I need to include the path references in the src?
    src: url(‘Delicious-Bold.otf’); to be say src: url(‘/font/Delicious-Bold.otf’);

    Thanks
    James

  11. James
    Permalink to comment#

    I have experimented with this and yes it works as expected; is relative of the root web folder.

    James

  12. supperman
    Permalink to comment#

    Is there a way to midify an existing otf fonts?

    In my language we use some fonts that have special simbols. Thants why im asking.
    Thanks.

  13. Permalink to comment#

    Yeah i also found that method of Paul Irish don’t works in IE6. But this way really works even in IE5 to:

    /* @font-face */
    @font-face {
    font-family: ‘PhilosopherRegular';
    src: url(‘../fonts/philosopher-webfont.eot?’) format(‘eot’),
    url(‘../fonts/philosopher-webfont.woff’) format(‘woff’),
    url(‘../fonts/philosopher-webfont.ttf’) format(‘truetype’),
    url(‘../fonts/philosopher-webfont.svg#webfontKWmDqtHl’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    body{
    background:#fff;
    color:#000;
    font:20px ‘PhilosopherRegular’, Georgia, serif;
    }

    You can review Demo for this at:

    http://www.960development.com/how-to-write-cross-browser-font-face-syntax/

    Great article i hope after using this way we don’t need to use Cufon or sIFR for font Replacement.

  14. Permalink to comment#

    What about “the cleartype bug”?
    I mean, I know there’s a solution for that, but only for IE6/7.
    What about for rest of them? :(

  15. You can use this syntax in the sending of newsletters?
    You have to apply some variation?

  16. There is a NEW BULLET-PROOF version here as of April 2011:

    http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

    For example:

    @font-face {
        font-family: 'MyFontFamily';
        src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
             url('myfont-webfont.woff') format('woff'), 
             url('myfont-webfont.ttf')  format('truetype'),
             url('myfont-webfont.svg#svgFontName') format('svg');
        }
    
  17. I had to learn the hard way that you have to put the @font face code in the of your document. It won’t source from the CSS!

    Also, the .eot links provided from font squirrel actually cause the code to fail in IE8. I had to remove the src links and it worked fine! It even worked on other computers that did not have the font installed.

    Why it works that way in IE I don’t know. I don’t think that program is fathomable.

    • Steve

      ChrisB

      @font-face does work in a css file. Make sure your src paths are relative of the root folder. Try AceeBaba’s code from above. Except make sure the format is ‘embedded-opentype’ and not just ‘eot’

      As for the eots from font squirrel, they seem to work in ie8 for me. Could be because of the format like i said above.

      Also i don’t see how you got it to work on other computers without the src links. Unless you decided to use an external link from google or someone. Which i’d advise against since it will increase page load time. But if you do, make sures its above your css links or they wont know it’s there.

    • Steve,
      Thanks for the suggestion. I did make sure that the files were sourced from a root folder in my initial testing, but I could never get the code to work for some reason. It is beyond my comprehension why the font works in IE w/out the sources, that being in IE8 even!

  18. saiinch
    Permalink to comment#

    hi, i have designed a website mock-up in photoshop using Arial 12px font but when i am doing its html the Arial font looks different in HTML browser, is there any fix for this? really need to know.
    Thanks

    • I realize this is almost two months old, but in the off chance you revisit this post…

      Photoshop has an anti-alias feature in the type tool. It is next to the font size drop down in the top tool bar and at the bottom right corner in the Character Window. I usually change this to “none” in the drop down for any text that will be browser generated.

      It’s not exactly the same text rendering, but it’s the best we have right now. There really is no industry standard tool that will render text identical to the browser (which renders differently depending on the browser and platform).

      I hope that helps. Cheers!

  19. Pablo

    Hey … great site! … I’m trying the GoogleWebFonts as @font-face in my site but in Google Chrome they don’t look as good as in IE or FF. I have read something about ClearType but that change is on client side, so it doesn’t make any sense to me…. do you guys know a way fix that? (the fonts are .ttf)

    Thanks!

  20. hamid
    Permalink to comment#

    It is not work on FF6

  21. tota
    Permalink to comment#

    Dears
    I used code below not work in IE8/7 but work in IE9.

    Note: this font support Arabic Language

    @font-face
    {
    font-family: ‘MY'; /*src: url(‘GE_SS_Two_Bold.ttf’); */
    src: url(‘GE_SS_Two_Bold.eot’);
    src: local(‘GE SS Two Bold’),url(‘GE_SS_Two_Bold.woff’) format(‘woff’) , local(‘GE_SS_Two_Bold’), url(‘GE_SS_Two_Bold.ttf’) format(‘truetype’);
    }
    h1
    {
    font: 20px ‘MY’ , Arial, sans-serif;
    letter-spacing: 0;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=hIEfix.png,sizingMethod=crop);
    zoom: 1;
    }

    سياسة

    • tota
      Permalink to comment#

      I appreciated your support , help me plz ASP

    • hamid
      Permalink to comment#

      thanks!
      it’s not work again!
      i test it and see not work in pesion or arabic!!!

  22. DCvest
    Permalink to comment#

    I have a problem with my font sizes! My font size is 41px for example, and fits perfectly, but when it falls back to Arial, the font size is doubled in size! How do I just target the @font face, will I need to specifiy a second style sheet for just @font face?

  23. Permalink to comment#

    I bought a font from fontspring.com (Avalon) to use on http://www.dealscout.co.za
    I’m using the @fontface declarations they provide in the sample file with the font, but the font itself is appearing very “jaggedy” in Chrome and on some older browsers.
    The declaration is as follows:

    
    @font-face {
     
        font-family: 'AvalonBook';
     
        src: url('Avalon-Book-webfont.eot');
     
        src: url('Avalon-Book-webfont.eot?#iefix') format('embedded-opentype'),
     
             url('Avalon-Book-webfont.woff') format('woff'),
     
             url('Avalon-Book-webfont.ttf') format('truetype'),
     
             url('Avalon-Book-webfont.svg#AvalonBook') format('svg');
     
        font-weight: normal;
     
        font-style: normal;
    
    }
    
    

    Do you have any suggestions on what we may be doing wrong that is causing this, or should we be looking for a new font?
    If so do you have any reccomendations for fonts in Avalon / Century Gothic style that will have better cross browser support?

    • Ron

      I’m having the same problem with Avalon Book in Chrome. Did you ever find a fix?

    • Matt

      Super late response but…

      It is a problem with how google renders fonts (GDI rather then directwrite) and it’s being fixed in the latest canary version of chrome to be released later this year hopefully. Till then, there’s been many hacks to get fonts looking appropriate, i found using this:

      http://sassycoder.wordpress.com/2013/11/16/font-face-rendering-issue-in-chrome-2/

      With a combination of some css hacks such as text-stroke / text-shadow usually works out pretty well for most fonts. Dont bother with -webkit-font-smoothing it’s not supported anymore.

  24. i am using simple selector in head in html bt my font face is not working

    style sheet in a page

    h1{fontface:”monotype corsiva”; size:10; color:”red”; fontweight=:bold}
    h2{font-face:”arial”; size:5; color:”blue”; fontweight=:bold}
    h3{font face:”magento”; size:20; color:”yellow”; fontweight=:bold}
    h4{font face:”times new roman”; size:15; color:”green”; fontweight=:italic}

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    THE QUICK BROWN FOX JUMPS OVER THE TIGHER

    plz let me knw the solution either here or on my id: aryan.solanki007@gmail.com

    • Do you have the css file with @font-face connected to your html document ? Where are your files placed ? What browsers have you tested on.

    • Permalink to comment#

      “fontweight” should be “font-weight” and should only have the colon, not rhe equals.

      Also, the only values for font-weight are “normal” or “bold.”
      To specify italicized text in your h4, use: “font-style:italic; “

  25. RichW
    Permalink to comment#

    Why are people using IE6/5!! Lol, nice article, thanks for the helpful links

  26. Permalink to comment#

    Hello,

    I am having a problem with @font-face
    I have everything set-up (I believe) as it should be. When I do a test of the HTML in Dreamweaver it displays like a charm, but when I FTP it and go to the site (after a cache empty) its all system font-y again.

    If anyone could help, I would be greatly appreciative!
    Thank you

    • Kaitlyn
      Permalink to comment#

      I’m having this same issue! Was is ever resolved? I first used @font-face to fix antialiasing on Chrome with Google Web fonts (oh the irony) and now that I put the site on my server it loses the fixed quality.

      Thanks!

  27. Ian
    Permalink to comment#

    Hey Chris,

    Helpful article, I would love to see some more about @font-face and multilingual support. Will be embarking on a project soon that will need support for Arabic and Russian as well as western languages.

  28. BrianC
    Permalink to comment#

    @font-face does not work well with css transitions. It gets all laggy and slow.

  29. Permalink to comment#

    After few days of installing it, my css web fonts doesn’t work just what it was before. Now the site is messed up. But checking it on Chrome (even Safari), the fonts look just right. The only difference is on Firefox. I’m not sure if it was upgraded or not, but currently my version is 8.0.1 on Mac.

    If anyone can kindly provide me some solutions, it will be a great help. My code for the css is as follows and all were generated from fontsquirrel.com, necessary files were uploaded too. Nothing changed on the css but wondering why it didn’t look right after few days. Thanks in advance.

    h2 {
        font-family: "UnitSlabProBlack",Georgia,serif;
    }
    
     @font-face {
        font-family: 'UnitSlabProBlack';
        src: url('unitslabpro-black-webfont.eot');
        src: url('unitslabpro-black-webfont.eot?#iefix') format('embedded-opentype'),
             url('unitslabpro-black-webfont.woff') format('woff'),
             url('unitslabpro-black-webfont.ttf') format('truetype'),
             url('unitslabpro-black-webfont.svg#UnitSlabProBlack') format('svg');
        font-weight: normal;
        font-style: normal;
    
    } 
    

    *I placed the whole link of the directory of the sources of the fonts on the actual css code. I just removed it on this comment for security purposes. thanks.

  30. Anil
    Permalink to comment#

    Hello Chris,

    I have used the embedded font it works fine. the css path is css/index.css
    and the font path is
    @font-face {
    font-family: ‘test’;
    src: url(‘../font/test.eot’);
    some other css..

    it works fine.
    my roor index.html folder.
    but when i added a new folder like newfolder and added a new index.html file. fonts are not shown.

    what is the correct way to give path to the css and embedded font so it can works everywhere.

    thanks

  31. Ian
    Permalink to comment#

    Hi Chris,

    I have downloaded google fonts and found that the only two formats in the one I’m using are ttf and menu. I tried googling to find info on the .menu extension but haven’t found anything. Do you know what that extension is for?

    Thanks

  32. Permalink to comment#

    Hey there! I’ve been reading your weblog for a long time now and finally got the courage to go ahead and give you a shout out from Dallas Tx! Just wanted to mention keep up the great job!

  33. Permalink to comment#

    Thanks, this i looking for. Very nice man.

  34. Dagash
    Permalink to comment#

    after i followed these instructions , there is a spaces between a word letters …
    any suggestion …???

  35. Just a quick fix for anyone else that has this issue.

    This solution wasn’t working on IE6 for some reason, finally found that it was the hash after that was breaking it.

    In short, use this removing the #iefix

    url('webfont.eot?') format('embedded-opentype'), /* IE6-IE8 */
    
  36. Subramanian
    Permalink to comment#

    I cant use @font-face for IE7. If anyone having the solution for it means, help me..

  37. Permalink to comment#

    You can get all the font format from http://www.font2web.com/

    My font face does not showing in IE7, it’s working when i am trying it in a different file but not when integrated in my website. Please help.

  38. Evert
    Permalink to comment#

    When I look at caniuse.com I notice 3 things:

    1) all IE support eot
    2) All current/modern bowsers support ttf
    3) Opera mini supports no format at all

    Based on this I would suggest that including eot and ttf is more than enough? Why include woff and svg?

    • Permalink to comment#

      Nice idea Evert, i agree with you. it depending for every developer how to implement @font-face css.

  39. I LOVE YOU!!!
    Needed exactly THIS for my stylesheet and website.

    Thanks so much!

  40. Muhammad Azeem
    Permalink to comment#
    @font-face {
    font-family: ‘test’;
    src: url(‘../font/test.eot’);
    

    when i write font-family name like above “test” and next src:url(...) it doesn’t work with this font-family name “test”. please help me out, how to create font-family names other than “font names”.
    Thanks

  41. Permalink to comment#

    I have strange problem with Arial font on Firefox, font size 17px is much wider than on chrome, ie 7/8. I wonder if some one could help on this.

  42. Dave K
    Permalink to comment#

    I dont know why but I cannot get this Google font to work in Firefox (or any other for that matter). It works a dream in IE and I converted the TTF that Google fonts supplied me on Fontsquirrel to give me all the bits I needed to hold in the same folder as the CSS file. Can anyone see whats wrong?

    @font-face {
    font-family: Voces;
    src: url(‘Voces.eot’);
    src: url(‘Voces.eot?#iefix’) format(‘embedded-opentype’),
    url(‘Voces.woff’) format(‘woff’),
    url(‘Voces.ttf’) format(‘truetype’),
    url(‘Voces.svg’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

  43. Subramanian
    Permalink to comment#

    @font-face not working properly in Ubuntu OS. The fonts looking like blurry. Any solution?

  44. kamal kant
    Permalink to comment#

    thanks for this tricks

  45. Mono
    Permalink to comment#

    Hi there!! I need some help please

    I’m working with webmatrix 7.1 and IIS 7.5 express… it is actually my first time using webmatrix, and the fonts I’m using are not rendering….

    this is one of the fonts

    @font-face{
    font-family:MenuFont;
    src:url(‘Fonts/Arizonia-Regular.eot’);
    src:url(‘Fonts/Arizonia-Regular.eot?#iefix’) format(‘embedded-opentype’),
    url(‘Fonts/Arizonia-Regular.ttf) format(‘truetype’),
    url(Fonts/Arizonia-Regular.woff) format(‘woff’),
    url(‘Fonts/Arizonia-Regular.svg#MenuFont’) format(‘svg’);
    }

    .Menu ul li a{
    font-family:MenuFont, sans-serif;
    text-decoration:none;
    color:#000000;
    }

    so I’m going crazy here… I don’t think I’m doing anything wrong cause I did this first in .html just using notepad and the fonts rendered correctly. can anybody give me a hand or let me know if there’s any compatibility or support issue? I’d really appreciate it!!
    Thanks!

  46. Lucas
    Permalink to comment#

    Excuse me Chris Coyier,

    What piece of css would I write for .otf fonts?

    Thanks

    Lucas

  47. I have experience a problem with firefox when my default.html in root directory font face is working in all browser but when i move my default.html in en folder font face is not working in firefox but working in all browsers.
    I have a latest version of firefox

    • I had the same problem with Firefox (12.0). If I put the fonts in my root web folder, everything showed up fine in all browsers. But if I put it in a fonts subfolder with the correct path code, all browsers work except Firefox. What causes this? I would prefer to stay organized and keep my fonts in a subfolder. Anyone find a way to get around this?

  48. Deepesh Nayak
    Permalink to comment#

    I get the proper output in all browser but while Printing in firefox the web-font doesn’t work , below is mine css.

    @font-face {
    font-family: ‘C39P24DmTtNormal';
    src: url(‘WebFonts/v100025_-webfont.eot’);
    src: url(‘WebFonts/v100025_-webfont.eot?#iefix’) format(‘embedded-opentype’),
    url(‘WebFonts/v100025_-webfont.woff’) format(‘woff’),
    url(‘WebFonts/v100025_-webfont.ttf’) format(‘truetype’),
    url(‘WebFonts/v100025_-webfont.svg#C39P24DmTtNormal’) format(‘svg’);

    font-weight: normal;
    font-style: normal;

    }

  49. Cart
    Permalink to comment#

    Someone is in love with fontsquirl or get some commission…
    Lucky I have my own server so I don’t need all this want-to-be-but-cannot-be pretentious stuff.

    Fact is, all these folks want is your data so they can get you from behind! (like facecrook and google and all this sly pretentious folk. Lucky I am not… neither ;-)

    I strongly suggest – use an internet condom (unless you seek attention for pity) – steer clear of all this 3rd party “Service Provider” and stay save!

    • Cart's Mom
      Permalink to comment#

      What are you babbling about, you doof. “Fontsquirl” is free… And so is Font Squirrel. Time to step away from the computer and return to your rocket science project.

  50. isabel

    Hi,

    I’m strugling with this for hours, and I just cannot figure it out:
    I can get web fonts to work on most browsers, but if i want it to work on internet explorer 7, I need to put the html, the css and the font files in the same folder!

    It gets pretty messy, because I’m using the six-caps font for headers, and I cannot find a suitable fallback safe font for it.

    Strange thing is that I cannot find it reported anywhere else, and if I test it with files from lyndas tutorial, it works just fine for ie.

    Since it is working for every major browser (including ie8 and ie9) I’m assuming the paths are correct, and since my testing site is not at the root, i cannot give it absolute paths during development.

    I’m using the exact latest font squirrel sintax from the downloaded webfont kits..

    Is it possible that ie7 uses different path location on css, or maybe that it might be working on the other browsers because I already have a local copy?

    Best regards,
    isabel

  51. sid
    Permalink to comment#

    This works for me but renders the font in a heavier weight than when I just had foolishly been using the simple:

    @font-face {
    font-family: ‘Baskerville';
    src: url(‘baskerville.ttc’);
    }

    same with other fonts, not just this one. Would that be because when I converted to eot with the font2web.com tool it created a heavier, ugly eot version?

    If so, how can I make the browser “prefer” the nicer version?

    • This question is why I came to this page. Often times webkit browsers display horrific looking font in their own formats on Windows machines… Macs load the same font on the same webpage just fine in my case. Not too sure how to even go about fixing an issue like this.

  52. I am using the Paul Irish method (on a currently private site), which works fine in Safari, but doesn’t work in Firefox (I’m using Aurora). My files are hosted on the Apple Cloud, not my own server. Does anyone know of a good solution?

  53. I thought to forget about fonts for ie7-8. Thanks!

  54. Reza Baiat

    in IE <= 8 some properties are not supported
    * only one url is supported
    * format is not supported

    @font-face {
    font-family: 'BMitra';
    src: url('fonts/BMitra.eot?#');
    }

  55. Ajay
    Permalink to comment#

    @font-face {
    font-family: ‘NumansRegular';
    src: url(../font/Numans-Regular-webfont.eot);
    src: url(../font/Numans-Regular-webfont.eot?#iefix) format(‘embedded-opentype’),
    url(../font/Numans-Regular-webfont.woff) format(‘woff’),
    url(../font/Numans-Regular-webfont.ttf) format(‘truetype’),
    url(../font/Numans-Regular-webfont.svg#NumansRegular) format(‘svg’);
    font-weight: normal;
    font-style: normal;

    }

    I set @font-face in my CSS file successfully & it’s work to specific class, but i want to set that font as a default into a body tag. i given css like this…

    body { font:12px ‘NumansRegular’, Arial, sans-serif;} (not working)

    but it not apply as a default font & size to my all html pages . so please help me how i use ‘NumansRegular’ font as a default font??

  56. santosh
    Permalink to comment#

    How can I avoid dynamically loading a webfont (e.g. Mylius Modern) from a website when it already exists on the local machine?

  57. erick dion
    Permalink to comment#

    Hai

    I Need your help : my question is

    my Clint give some additional font to me ,i insert the .ttf file in ma css/font folder.
    now am trying to run the .ttf font file . i already take some code from this conversation but Still its not Working …pls guide me :-(

  58. Permalink to comment#

    I can not with IE . firefox and google chrome

  59. Permalink to comment#

    @font-face{font-family: ‘segoepr'; src: url(‘../fonts/segoepr.ttf’);}
    @font-face{font-family: ‘segoepr'; src: url(‘../fonts/segoepr.eot’);}

    Best, simplest and works both in Chrome and IE8…

  60. Lore
    Permalink to comment#

    Firefox has a bug for Print Preview when using @font-face. I also tried Cufon, and this also failed to appear in the Print for Firefox. (So much for my pretty resume font!)

    Although the bug is marked as Resolved, it’s clearly not.

    https://bugzilla.mozilla.org/show_bug.cgi?id=468568

  61. Martin
    Permalink to comment#

    I have problem on IE9:

    Here is the minimalistic example:
    CSS:
    @font-face {
    font-family: ‘oxygenregular';
    src: url(‘oxygen-regular-webfont.eot’);
    font-weight: normal;
    font-style: normal;
    }

    h1 {
    font-size: 24px;
    font-family: ‘oxygenregular';
    font-weight: normal;
    font-style: normal;
    }

    HTML:

    Reload normal

    Text must fit. Aaaaa.

    It does work fine from local folder. It does not work when loaded from IIS (although eot file is being loaded fine). But it works again if I reload the page by clicking the link in HTML. And it breaks again if I reload the page clicking Refresh button. What’s wrong?

  62. JM
    Permalink to comment#

    IE such a sick browser :/

  63. dheena
    Permalink to comment#

    how to use font face for LetterGothicStd bcoz this font not able to convert fontsquirrel site…?

  64. Permalink to comment#

    Not sure if this has been mentioned already but Google fonts are much easier to use than messing with TTF and OTF files. Theres tons of choice so you can usually find something close enough and copywrite free for use in commercial projects.

    http://www.google.com/webfonts

  65. Permalink to comment#

    Hi there, thanks for posting this. I was wondering though – what is the purpose of the question mark (?) before “#iefix” in this line?

    src: url(‘webfont.eot?#iefix’) …

  66. When I used chrome browser, the io error has arisen!

  67. JB
    Permalink to comment#

    Should “MyFontFamily” in “Usage” in the example at the top of the page be “MyWebFont” to match the @font-face declaration?

  68. Is there any fix (i’m at that stage where dirty fixes are accepted) that resolves or at least improves the font-smoothing of @font-face fonts in Chrome?

    I have tried placing the SVG font before EOT, the text-shadow property, and lastly font-smoothing but none seem to work.

    Thanks

  69. Thanks Chris! You rock.

  70. My
    Permalink to comment#

    Hi, I’m not really good or familiar with CSS and other web designing thingies, so I’m sorry for my question.
    I’ve used a font for my website which cannot be really found in a typical PC, so when my classmate uploaded the webpage, the font of the text of the webpage turned out to Times New Roman. So my question now is how can I upload the webpage with the font I’ve used? Please help me.

  71. finally solved

    Hi, I have devoted some time to solve this problem in my web, finally works correctly in all browsers, I compiled this important steps:

    1) If you have a font type (ttf. otf), convert to all formats (eot,svg,woof) in (http://www.font2web.com/) and download on your web root folder to use it

    2)use this code (modify “font-family”, “myfont” and use absolute url to find files), its very important tu use in a simple line this code, without newline.

    @font-face{font-family:’GothamRM';src:url(‘http://absoluteURL/myfont.eot’);src:url(‘http://absoluteURL/myfont.eot?#iefix’) format(‘embedded-opentype’),url(‘http://absoluteURL/myfont.woff’) format(‘woff’),url(‘http://absoluteURL/myfont.ttf’) format(‘truetype’),url(‘http://absoluteURL/myfont.svg#GothamRM’) format(‘svg’)}

    3)Test in your server, in my local server with xampp works fine but in IIS internet public server don’t works in IE9, the problem is:

    IIS 7 don’t have MIME Types defined for .woff file

    If you try to open in IE9 your .woff font (http://absoluteURL/myfont.woff) you recive and error 404.

    To solve it I open IIS, rootServer / MIME Types, and ADD MIME Type with (Extension = .woff, MIME Type = application/x-font-woff)

    4) finally I try to open file again http://absoluteURL/myfont.woff and it works fine, I open my web and works well in all browsers

    Thanks

  72. Permalink to comment#

    i’m working on a wp theme project, I picked font-face with a Thai font.
    Thai and English characters from the font, both work well in multiple modern browsers,

    but Thai characters doesn’t work on my mobile, instead it shows the default Thai font. on the other hand, English characters from the font work very well on my mobile devices.

    i’m using HTC A one and Samsung note,
    and I don’t have a chance to try other devices yet

    any idea?

  73. Curtis

    I’m not having any luck invoking Google fonts using the font-face method. I’ve followed Google’s instructions with the link href:

    Which works if I do direct Stylesheet references, like

    .menu .mainlevel { font-family: Oranienbaum; }

    or directly in a style within the HTML. But I want to create a font “alias” called Header-font to which I can assign different Google fonts to see how they display throughout my site. Font-face seems like the solution, but it only seems to work with resident fonts or direct URL fonts…I can’t figure out how to get it to recognize a Google font family. I’ve tried various ways of invoking it, like:

    @font-face{
    font-family: Header-font;
    src: url(‘http://fonts.googleapis.com/css?family=Oranienbaum’);
    }

    and a zillion variations on the src, such as

    src: local (‘Oranienbaum’)
    url(‘Oranienbaum.ttf’) format(‘truetype’)
    src: url(‘Oranienbaum’)

    and nothing works. Any ideas on how to accomplish this, short of downloading every Google font I want to test and invoking it locally?

  74. Praveen

    is there any way by which a browser gets the font locally(without internet) once it downloads from web(with internet)?

  75. @chris: Thanks a lot for this!
    @Curtis: Did you test it with src: url(‘Oranienbaum.ttf’); ?
    This worked with another font on my browser.

  76. john
    Permalink to comment#

    @font-face, I see condensed fonts (for instance Futura condensed light or bold) are not rendering in IE8 and below versions. Anybody have any idea about how to fix it?

  77. PeterMK
    Permalink to comment#

    Is there a proper solution for the Firefox font render issue (on Macs only)?
    Still exists with an icomoon self made font, made from svg-s.

    Example Win | FF (21) on IOS

    http://www.dropbox.com/s/fg9z2j5sw4ai3au/fonts-error.png

    (sand color arrow font on white background, on FF the font is rendered too bold can’t see the arrow)

    CSS properties that applied:
    speak: none;
    content: attr(data-icon);
    font-weight: normal;
    font-style: normal;
    text-decoration: inherit;
    -webkit-font-smoothing: antialiased;

    Any idea?
    (I’ve tried: font sizing in pixels not in ems, playing with font-weight…, but not getting a good results /actually i got exactly the same/)

  78. I wonder why but it seems that some fonts render under IE8 and some of them just don’t wanna do it…

    I’m using the declaration from the top of the page:

    @font-face {
        font-family: 'MyWebFont';
        src: url('webfont.eot'); /* IE9 Compat Modes */
        src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('webfont.woff') format('woff'), /* Modern Browsers */
             url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
        }
    

    Someone has this issue ? I don’t really care about IE7…

  79. toma
    Permalink to comment#

    and what is this?:

    @font-face
    {
    font-family: "MyFont";
    src:
    url("programebi/acadnu_font/Seogut.ttf") format("truetype"), /* Safari, Android, iOS */
    url("programebi/acadnu_font/Seogut.eot?") format("eot"), /* IE9 Compat Modes */
    url("programebi/acadnu_font/Seogut.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
    url("programebi/acadnu_font/Seogut.otf") format("opentype"); /* everyone else take this */
    url("programebi/acadnu_font/Seogut.woff") format("woff"), /* Modern Browsers */
    url("programebi/acadnu_font/Seogut.svg") format("svg"); /* Legacy iOS */
    }

  80. Poper
    Permalink to comment#

    Thanks for the advice.

  81. I followed the article, every thing works fine, but i have Hebrew font, english characters are shown properly but Hebrew characters are not getting rendered , problem is only on Chrome, Mozilla and IE are showing it perfect. Dont know what to do, I read some where to re-order the list and put svg at start, but it didnt work.

  82. Rojan Gh.
    Permalink to comment#

    I am designing a new web project and I am going to use Icon fonts for symbols over my pages.
    The combination you suggested is the regular mostly used one but using this combination, I get non-anti-aliased fonts in most of the browser (I always test my code using Chrome, Safari, Opera, IE 7-10 and FF) so I changed and changed the combination and here is the one am happy with.

    @font-face {
        font-family: 'Icon-Font';
        src:url('fonts/Icon-Font.eot');
        src:url('fonts/Icon-Font.svg#Icon-Font') format('svg'),
            url('fonts/Icon-Font.woff') format('woff'),
            url('fonts/Icon-Font.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    /*Works with the help of some Javascript code in IE 7 only*/
    

    Now I just see low quality symbols in IE 7 and 8 modes and all other browsers render the fonts really well like they are PNG images. And as you can see I don’t even use url('fonts/Icon-Font.eot?#iefix') format('embedded-opentype') and it works fine!

    There may be difference between Icon fonts and regular fonts and I will let everyone know as soon as I get to fonts selection of my web design but for know, this may be useful to someone.

    I also have to mention that, I do GZip compression on SVG files server side and the size gets as low as TTF and EOT files this way.

    PS: I use Windows 8 (IE 7 to 10 using browser modes) and Mac OS X 10.8 for designing, coding and testing my web projects.

    • Rojan Gh.
      Permalink to comment#

      OK for the regular fonts I got this combination best for rendering the fonts:

      @font-face {
          font-family: 'Font';
          src: url('fonts/Font.eot');
          src:url('fonts/Font.ttf') format('truetype'),
              url('fonts/Font.woff') format('woff');
          font-weight: normal;
          font-style: normal;
      }
      

      I extracted the SVG out, because Non-English characters including Persian, Arabic, Hebrew and … do not work when using SVG font and using this combination I got best and most smooth rendering in IE 7-10, FF, Chrome, Safari and Opera.

      Please note that I use Windows 8’s IE 10 in different modes to test IE 7-10. Please let me know if there is something that I am missing.

      Hope this helps you all.

  83. Permalink to comment#

    I recently purchased a subscription to H&FJ Cloud typography and am trying to figure out how to use @font-face with it. I want to use Gotham’s book and bold weights. All I have been doing up to this point is to put a css link H&FJ provides into the head and and just putting putting the regular declaration of font-family, font-weight and font-style into my stylesheets. I don’t have all the different font formats to declare.

  84. I seem to have encountered this issue with IE8 and below not rendering my @font-face declarations.

    I have literally tried all the solutions that I can find online when others have encountered the problem and now ive pretty much run out of ideas.

    I am getting the issue on our live holding page: http://www.twdg.co.uk (thats not a link drop this is a genuine issue that I need a second pair of eyes to take a look at). The holding page doesnt matter to much but need to resolve it as I am developing our new site at the moment.

    Thanks in advance.

    • So in reply to my own issue I finally had the sense to open up console in IE dev tools and saw the following error “css3111: @font-face encountered unknown error” relating to the .eot fonts. After some initial research it seems this error relates to an issue with the font file, possibly not generated correctly or a miss match in font naming and file naming, so once I dig a little deeper and fix it I will share.

    • Ok so I finally managed to fix this today.

      This article helped: http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/

      Basically the original file used to generate the .eot fonts had a miss match within the actual font itself, so used fontforge to match up the font files family name, fontname and name for humans. Regen the font and now my .eot files are fixed and work in IE8 and IE7.

  85. Daigo Fujiwara
    Permalink to comment#

    Love your site/podcast, Chris! I just got set of web fonts from font vender and svgz files were included in them (as well as woff, ttf, eot, and svg) svgz is about quarter of the size of svg. Which browsers support them/How can I use them? Thanks!!

  86. Vivek
    Permalink to comment#

    Any one know about .woff and .ttf fonts issues it always showing 404 error even am having fonts on correct location

  87. bilal
    Permalink to comment#

    my font family do not work in ie 7 and 8 plz help me ,

  88. Help, my designer got an approval on a design using fonts from three different sources:
    Googlefont
    MyFonts (which uses the @fontface technique)
    and http://www.typograpy.com (which specializes in just fonts from one foundry).

    Anybody know if you can use all three kinds of fonts in one web application? I’m using Joomla, but that’s not the real issue.

    • Matt

      for the record googlefonts use @fontface as well…

      and there’s no real issue except a butt ton of overhead

  89. I’ve been using Google Fonts on my website http://www.moreonfew.com and I must say that I really like it. Not only it loads faster but it also provides a good amount of fonts collection to choose from.

    • Szatanica
      Permalink to comment#

      But google fonts sometimes have older versions of the fonts and they render weirdly because of that.

  90. RioBrewster

    @Greg Ledger

    If all the fonts have licenses that allow them to be used online, there’s no reason you can’t use them.
    Go to FontSquirrel and see if they already have font-kits for the fonts. If they do, download them, concatenate the stylesheet.css files and you are ready to go.

    If Fontsquirrel doesn’t already have a font-kit, go to the web-font generator, upload the .ttf files and it will create the font-kits for you.

    And honestly, who cares if web fonts render in IE8 and below? If you are going to use an ancient browser, you probably don’t even know there are fonts other than Times New Roman, Arial and Verdana and you aren’t going to see all the other wonderful anyway.

    Seriously I’m really tempted to start using normalize.css for my ieHacks.css file. Especially with Foundation.

  91. RioBrewster

    And don’t forget to do this:

        @font-face {
    ...
      font-weight: bold;
       font-style: normal;
    }
    

    If your font is bold. That way you can use the actual bold font instead of browser “faux-bold” and still have bolded fallbacks.

  92. Ramsin Jacob

    Hey everyone,

    I just completed my site.

    I set the font codes to “Trajan Pro”

    On my macbook pro and mac desktop the font style appears but for others it seems like an Arial font or some generic is appearing. I believe I have found the solution with this code here on this page but I am confused on how to set it up. Like as far as uploading the font? I don’t have the file, I just typed it in the code. Then where do I place this code on my html or css?

    Any advice/help will be greatly appreciate it. Thank you.

    • Szatanica
      Permalink to comment#

      If you’re using @font-face, then it’s always a CSS. And as with CSS you can put it either in HTML or CSS file, but puting it in HTML doesn’t really make any sense, because if CSS file loads quicker then your HTML (which is a bit funny but I guess that can happen), the @font-face might not load, so answering your question – put @font-face at the BEGINNING of your CSS file. Go to Fontsquirrel, download WebTypeKit with your fonts and read the manual, which is included in there How_to_use_webfonts.html. Hope that helps a bit. :)

  93. Carlos L.
    Permalink to comment#

    What about using a base64 version of the font and excluding all other versions? Is that optimal/practical?

  94. JL
    Permalink to comment#

    I’ve found that when using custom fonts with @font-face that there are differences in the way each browser renders them. The margins and padding is always different between chrome and FF. Chrome and Opera are the same, but FF and IE both require some adjusting to maintain consistency. For instance, the letter-spacing is always different between chrome, FF, and IE. I find myself browsing sniffing and then adjusting the fonts individually :
    if(is_IE){
    $(font_instance).css(marginTop:”+=2px”);
    }

    This works, but obviously browser sniffing, especially in this way, is not very efficient at all. There are some very strange differences though.

    Any thoughts? Has anyone else come across this?

    • Szatanica
      Permalink to comment#

      Would it make more sense to just add browser specific prefixes in the css file?

  95. JL
    Permalink to comment#

    Yes that would make way more sense, I’ll be doing that. I didn’t know you could do that. I’ve used the vendor prefixes for keyframes and such, but I didn’t know it could be applied to font positioning. Thanks for the reply.

  96. I was using all the font types but only single line of woff

    src:url(../fonts/Simple-Line-Icons.woff) format(‘woff’);

    worked for me … thank you

  97. Lalit
    Permalink to comment#

    Font face doesn’t work in ie9 and oldest version please suggest us

    if you have any solution about ie9 and oldest version

  98. Permalink to comment#

    I’m using WOFF url, and this is loading correctly on my home page…but when I go to another page on my website, the font reverts to the default….

    Any ideas why this might be happening?

    The font face isn’t being overridden by another CSS stylesheet.

    Cheers!

    • Permalink to comment#

      Got this to work by declaring the https and http as seperate font-families:

      @font-face {
          font-family: 'andika_basicregular';
          src: url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot');
          src: url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot?#iefix') format('embedded-opentype'),
               url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff2') format('woff2'),
               url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff') format('woff'),
               url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.ttf') format('truetype'),
               url('http://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.svg#andika_basicregular') format('svg');
          font-weight: normal;
          font-style: normal;
      }
      
      @font-face {
          font-family: 'andika_basicregulars';
          src: url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot');
          src: url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.eot?#iefix') format('embedded-opentype'),
               url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff2') format('woff2'),
               url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.woff') format('woff'),
               url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.ttf') format('truetype'),
               url('https://www.banditbirds.co.uk/themes/simplebird/fonts/andbasr-webfont.svg#andika_basicregular') format('svg');
          font-weight: normal;
          font-style: normal;
      }
      
  99. Jose
    Permalink to comment#

    Please update snippet with WOFF2 format.

    Example:

    @font-face {
        font-family: MyFont;
        src:
            url('myfont.woff2') format('woff2'),
            url('myfont.woff') format('woff');
    }
    
  100. GaneshShetty
    Permalink to comment#

    With every code if there would be example it’d be better to understand

  101. xavhan
    Permalink to comment#

    Hey people, do you have a trick to quickly see which of the source is used by the browser. Fonts are working but i cant tell if my browser is using the woff, or ttf or even the svg file.

    It’s pretty explicit in the font panel in firefox, but i’m looking for a way to see that in chrome devtools.
    Any ideas?

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".