Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Using @font-face

The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS.

Without the rule, our designs are limited to the fonts that are already loaded on a user's computer, which vary depending on the system being used. Here's a nice breakdown of existing system fonts.

Deepest Possible Browser Support

This is the method with the deepest support possible right now. The @font-face rule should be added to the stylesheet before any styles.

@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 */
}

Then use it to style elements like this:

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

Practical Level of Browser Support

Things are shifting heavily toward WOFF and WOFF 2, so we can probably get away with:

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}
Chrome Safari Firefox Opera IE Android iOS
5+ 5.1+ 3.6+ 11.50+ 9+ 4.4+ 5.1+

Slightly Deeper Browser Support

If you need a sort of a happy medium between full support and practical support, this will cover a few more bases:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}
Chrome Safari Firefox Opera IE Android iOS
3.5+ 3+ 3.5+ 10.1+ 9+ 2.2+ 4.3+

Super Progressive Browser Support

If we're staking the farm on WOFF, then we can expect things to shift toward WOFF2 at some point in time. That means we can live on the bleeding edge with:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}
Chrome Safari Firefox Opera IE Android iOS
36+ No 35+ with flag 23+ No 37 No

Alternative Techniques

@import

While @font-face is excellent for fonts that are hosted on our own servers, there may be situations where a hosted font solution is better. Google Fonts offers this as a way to use their fonts. The following is an example of using @import to load the Open Sans font from Google Fonts:

@import url(//fonts.googleapis.com/css?family=Open+Sans);

Then we can use it to style elements:

body {
  font-family: 'Open Sans', sans-serif;
}

If you open the URL for the font, you can actually see all the @font-face work being done behind the scenes.

A benefit of using a hosted service is that it is likely to include all the font file variations, which ensures deep cross-browser compatibility without having to host all those files ourselves.

See the Pen Using @import for custom fonts by CSS-Tricks (@css-tricks) on CodePen.

<link>ing a stylesheet

Similarly, you could link to the same asset as you would any other CSS filter, in the <head> of the HTML document rather than in the CSS. Using the same example from Google Fonts, this is what we would use:

<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

Then, we can style our elements like the other methods:

body {
  font-family: 'Open Sans', sans-serif;
}

Again, this is importing the @font-face rules but, instead of injecting them to our stylesheet, they are added to our HTML <head> instead.

See the Pen Using for custom fonts by CSS-Tricks (@css-tricks) on CodePen.

It's about the same thing... both techniques download the assets needed.

Understanding Font File Types

The original snippet at the top of this post references a lot of files with strange extensions. Let's go over each one and get a better understanding of what they mean.

WOFF / WOFF2

Stands for: 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 the next generation of WOFF and boasts better compression than the original.

SVG / SVGZ

Stands for: 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 iOS. SVG fonts are not currently supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely to focus on WOFF.

SVGZ is the zipped version of SVG.

EOT

Stands for: Embedded Open Type.

This format was created by Microsoft (the original innovators of @font-face) and is a proprietary file standard supported only by IE. In fact, it’s the only format that IE8 and below will recognize when using @font-face.

OTF / TTF

Stands for: OpenType Font and TrueType Font.

The WOFF format was initially created as a reaction to OTF and TTF, in part, because these formats could easily (and illegally) be copied, However, OpenType has capabilities that many designers might be interested in (ligatures and such).

A Note on Performance

Web fonts are great for design but it's important to also understand their impact on web performance. Custom fonts often cause sites to take a performance hit because the font must be downloaded before it's displayed.

A common symptom used to be a brief moment where fonts first load as the fallback, then blink to the downloaded font. Paul Irish has an older post on this (dubbed "FOUT": Flash Of Unstyled Text).

These days, browsers are generally hiding the text before the custom font loads by default. Better or worse? You decide. You can exert some control over this through various techniques. A little out-of-scope for this article, but here's a trifecta of articles by Zach Leatherman to get you started down the rabbit hole:

Here are some more considerations when implementing custom fonts:

Watch the file size

Fonts can be surprisingly heavy, so lean towards options that offer lighter versions. For example, favor a font set that is 50KB versus one that weighs 400KB.

Limit the character set, if possible

Do you really need the bold and black weights for one font? Limiting your font sets to load only what is used is a good idea and there are some good tips on that here.

Consider system fonts for small screens

Many devices are stuck on crappy connections. One trick might be to target larger screens when loading the custom font using @media.

In this example, screens smaller than 1000px will be served a system font instead and screens that wide and above will be served the custom font.

@media (min-width: 1000px) { 
  body {
    font-family: 'FontName', Fallback, sans-serif; 
  }
}

Font Services

There are a number of services that will host fonts and provide access to commercially-licensed fonts as well. The benefits of using a service often boil down to having a large selection of legal fonts delivered efficiently (e.g. serving them on a speedy CDN).

Here are a few hosted font services:

What About Icon Fonts?

It's true, @font-face can load a font file full of icons that can be used for an icon system. However, I think you're far better off using SVG as an icon system. Here's a comparison of the two methods.

More Resources

Reference URL

Comments

  1. Eddie
    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');
    }
    
    • Micah
      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.

    • Chris

      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. Nicola Seidita
    Permalink to comment#

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

    • Alex Leiphart
      Permalink to comment#

      Those are the font files. The extension .otf is an open-type font.

    • Murtaza
      Permalink to comment#

      What should i do if a font has spaces for example I have a font called “some font” but the file name is somefont.ttf

    • traq
      Permalink to comment#

      exactly what you just did: put the two words “in quotes”

    • Chris

      As mentioned above fontsquirrel.com.

    • Jeremy
      Permalink to comment#

      Thanks, Chris!

      I knew I had used this once before, but couldn’t remember where I found the conversion tool. Saved me a bunch of time.

  3. Jacob Bixler
    Permalink to comment#

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

    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...
    }
    
    • Andy
      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.

    • Zandergraphics
      Permalink to comment#

      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. George Dicu
    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. Mohamed gad
    Permalink to comment#

    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?

    • Gabe
      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. Renee
    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?

    • ilter
      Permalink to comment#

      What browser do you use on that WinXP machine?
      IE6? IE7,8,9?
      Firefox?

  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. AceeBaba
    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. Adrian
    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. Sol Martin
    Permalink to comment#

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

  16. Brent

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

    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.

    • ChrisBinghamDesign
      Permalink to comment#

      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

    • Leban Hyde
      Permalink to comment#

      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. John
    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. bhupendra singh
    Permalink to comment#

    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

    • Shinyman Studio
      Permalink to comment#

      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.

    • Cody
      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. Brandon
    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. Debbie
    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. seo
    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. Idham
    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. Ben Palmer
    Permalink to comment#

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

    • Idham
      Permalink to comment#

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

    • Craig Patik
      Permalink to comment#

      WOFF is less than half the file size of TTF (and WOFF2 is even smaller).

  39. invalididentity
    Permalink to comment#

    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. Sams
    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. Mustafa
    Permalink to comment#

    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

    • Erika

      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?

    • Ben Racicot

      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. Alicia
    Permalink to comment#

    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. Godban
    Permalink to comment#

    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. matth
    Permalink to comment#

    I can not with IE . firefox and google chrome

  59. Zhivko
    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. Afy
    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. Alex
    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. Henry Wood
    Permalink to comment#

    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. Paul Wallas
    Permalink to comment#

    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. Patrick
    Permalink to comment#

    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. Robotica educativa
    Permalink to comment#

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

    @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
    https://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. Andriyan
    Permalink to comment#

    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. Question
    Permalink to comment#

    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. Randy K
    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. Matt Porter
    Permalink to comment#

    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.

    • Matt Porter
      Permalink to comment#

      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.

    • Matt Porter
      Permalink to comment#

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

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

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

    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

    • Chris Coyier
      Permalink to comment#

      It does though ;)

    • lalit
      Permalink to comment#

      Suggest us how

    • Chris Coyier
      Permalink to comment#

      You use the code provided in this snippet. If it doesn’t work for you in IE 9, I’d suggest creating a reduced test case and posting it to the forums.

  98. Simon
    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!

    • Simon
      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?

    • cyn3rgy
      Permalink to comment#

      @xavhan, use the developer tools and look at the network section (files the browser downloads), seems to work ok for me. I’m not aware of another method but perhaps there is.

  102. John-Albert Eadie
    Permalink to comment#

    Using the css at the top works fine on all PC’s and browsers I’ve tested but not on Android with latest Chrome5 (39.xyz), even after including woff2 file & reference.

  103. Mario Ranftl
    Permalink to comment#

    Thank you for putting these CSS-templates together and discussing the implications.

    I’m using these templates for generating CSS snippets in the google-webfonts-helper service for easily downloading Google web fonts in all formats (woff, woff2, svg, ttf and eot files) and self-hosting them.

  104. yazı fontları
    Permalink to comment#

    Some font files are really large. Though they add beauty to the designs, they can significantly increase the page load time, and therefore can affect search engine rankings and decrease the amount of returning visitors of your website. While some users do not have to use extended language parameters like cyrilic, arabic etc., I for example have to use them. And this almost doubles the file size of the font. Because of this I remember that I had to use in some of my pages standart fonts like Arial, Tahoma despite I wanted to use new age font faces.

    It would be great if sometime on the web, all the font files could be joined into one unique font file, that will be readable for all operating systems and devices. With this, it will speed up the loading time of the pages and therefore the user enhance experience.

    Well saying this is easy, if it will become true(it should!!), will we see in the future.

  105. Michael A. Waltz
    Permalink to comment#

    Using the css at the top works fine on all PC’s and browsers I’ve tested but not on Android with latest Chrome5 (39.xyz), even after including woff2 file & reference.

  106. Forest J Kvasnikoff
    Permalink to comment#

    Really aweful newbie question here. How is the link to the font format file delt with for the follow two:

    url(‘webfont.svg#svgFontName’) – Does the #svgFontName part change to #svgMyAwesomeFont or #MyAwesomeFont? On a different note, what is with the #SomeText thing doing after the actual link to the font file?
    Similar question with url(‘webfont.eot?#iefix’) – Does the ?#iefix get dropped in after the link to the font file and why?

  107. Cinthia
    Permalink to comment#

    The advantage of many of the web based font-face generators is they actually do lot of processing (like striping font names of special characters, generating correct css etc.) to make sure the generated font-face works across broad spectrum of the browsers. Apart from font squirrel mentioned here everythingfonts does a great job as well, as a font face generator : https://everythingfonts.com/font-face.

    The disadvantage with the webfont generators though is because they change the font name they are incompatible with many font licenses.

  108. Aaron
    Permalink to comment#

    Hi. I believe you have a typo in your second snippet of code.
    currently:
    url(‘myfont2.woff’) format(‘woff2′)
    should be:
    url(‘myfont.woff2′) format(‘woff2′)

  109. Sarah Drasner
    Permalink to comment#

    I saw a really interesting talk by Ilya Grigorik at HTML5DevConf last year, Making Web Fonts Fast(er). The most valuable take-away was that if you use an often-used font on google fonts and use the html head link, chances are that font is already cached in the user’s browser. So the load time will be smaller for more popular fonts. I used to want to use fonts that were more unique and have since changed my dev practices. Just thought I would pass that info along.

  110. Mathias Bynens
    Permalink to comment#

    Corrections:

    Practical […]: Opera 27+ should be Opera 11.50+.
    Super Progressive […]: Opera 10+ should be 23+.
    The Google Font URLs should use HTTPS.

    • Chris Coyier
      Permalink to comment#

      Got that fixed.

    • Mathias Bynens
      Permalink to comment#

      It seems like you forgot the last suggestion in my list?

    • Chris Coyier
      Permalink to comment#

      I’ll update to protocol relative…

      Google themselves provide it to you as I had it in the article, so I’m not sure if they PREFER you NOT using HTTPS or what. But since it works either way, I figure protocol relative is the way to go.

  111. Hans Koevoet
    Permalink to comment#

    If I’m right, IE7+IE8 (in total) still has a desktop browser market penetration of about 5 percent, which in my view is way too much to neglect. None of the @font-face-solutions presented here work for pre-IE9-browsers. Now what about them?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```