How Do I Implement @font-face?

March 16, 2010 | Thoughts & Words By | 31 Comments

FontFace

At great risk of angering the web design overlords I need to get something off my chest, I can’t stand the term "Bulletproof." When someone decides they have come up with a "sure fire" solution they label it bulletproof, which in reality nothing ever is. @font -face is supported by the top browsers using various font types, for example Safari, Opera, Firefox and Chrome handle .TTF and .OTF, Internet Explorer can handle .EOT, and what’s probably worth a mention, Firefox 3.6 now handles .WOFF, and Opera supports .SVG. What I’m going to show you is the most solid (not bulletproof!) method of @font-face implementation I personally find best and use within my projects.

For your CSS:

@font-face {
font-family: "Museo 300";
src: url("fonts/Museo300-Regular.eot");
src: local("Museo 300"), local("Museo 300"),
url("fonts/Museo300-Regular.otf") format("opentype"),
url("fonts/Museo300-Regular.woff") format("woff"),
url("fonts/Museo300-Regular.svg#Museo 300") format("svg");
}

 

Let’s break it down!

font-family: "Museo 300";

This is the font name, and how you will call it in your stylesheet.

src: url("Museo300-Regular.eot");

This will enable your font on Internet Explorer.

src: local("Museo 300"), local("Museo 300"),

This is the local setting which will call it from your machine if it exists.

url("Museo300-Regular.otf") format("opentype"),

This covers Safari, Opera and Firefox below 3.6

url("Museo300-Regular.woff") format("woff"),

This is the Firefox 3.6 file type.

url("Museo300-Regular.svg#Museo 300") format("svg");

This is the Opera font type. This will cover Safari, Firefox, Internet Explorer, Chrome and Opera at the very least and it provides a local setting which will find the local file on your machine. This can be altered to accommodate any other OpenType font or TrueType font (IF you have permission to use it!)

Example Usage:

#main {font: 18px "Museo 300", Helvetica, Arial, sans-serif;}

Anything Else?

When using the @font-face font in other elements, its good practice to have a few fallback fonts for users who are using a dated browser or browser that don’t support @font-face.

Demo And Download

I have included a very simple demo along with the various font types which you can run locally and view in the various browsers, and use the sample code to adapt for your own uses. If you have the .OTF file you can use the Font Squirrel Generator which will create the .SVG, .WOFF and .EOT formats for you to use.

RSS SubscribeSubscribe Via Rss
OR Email



Never miss a freebie or some creative inspiration!



Thoughts & Words By


Paul Maloney is a web designer/developer and runs Tropica Web Design which is a UK based web design agency. Away from Tropica, Paul can be found blogging, writing and tweeting about design.


Related Posts :

31 Responses to “How Do I Implement @font-face?”

  1. Russell Bishop 16. Mar, 2010 at 8:59 PM #

    I think there are a few essential things to add here; firstly Licensing issues. Whenever we discuss @font-face, we should always remind people that the fonts they use must have @font-face embedding mentioned in their respective EULA’s.

    Also, the local() declaration should never include a real font name, as this can lead to intimidating pop-ups when people visit your website.

  2. Alan 16. Mar, 2010 at 9:02 PM #

    Excellent, this is exactly what i have been looking for, for my next project, thansk very much.
    .-= Alan´s last blog ..Services =-.

  3. Paul 17. Mar, 2010 at 1:44 AM #

    I have never experienced any popups Rusell, but your correct locally you can use something different such as ? (Unicode: #263A) or ? (Unicode: #2639) for example!
    .-= Paul´s last blog ..How Do I Implement @Font-Face? =-.

  4. Paul 17. Mar, 2010 at 1:45 AM #

    ^^ ok those question marks where happy and sad faces!
    .-= Paul´s last blog ..How Do I Implement @Font-Face? =-.

  5. Logobird 17. Mar, 2010 at 9:27 AM #

    Great post Paul. This is something I am definitely start experimenting with more. Thank you! :)
    .-= Logobird´s last blog ..Beyond the Brief – Undertanding a Logo Design Client =-.

  6. Jon Reil 17. Mar, 2010 at 12:56 PM #

    Great info on this. I’m looking forward to playing around with this. Per Russell’s comment, what are the steps that need to be taken in order to deal with licensing issues? Also, do you think this is the best way to use custom fonts? Thanks much.
    .-= Jon Reil´s last blog ..Now You See It, Now You Don’t =-.

  7. Paul 17. Mar, 2010 at 5:27 PM #

    Hi Jon,

    I find this method to work best, I have tried a few different ways but this covers the most.

    Regarding license issue with fonts, OTF are usually the type that are licensed for this usage, but please read the authors terms beforehand.

    http://www.theleagueofmoveabletype.com offer some awesome OpenType fonts that can be used with @font-face.
    .-= Paul´s last blog ..How Do I Implement @Font-Face? =-.

  8. Simon 17. Mar, 2010 at 11:59 PM #

    Great article thanks. Really well explained. Just a shame that with the fonts I tested, IE, still doesn’t display them as beautifully as FF, Chrome or Safari :(

  9. Eva 19. Mar, 2010 at 2:07 AM #

    Really helpful article Paul, well explained, enjoyed reading it.

    Eva
    @friendsofdesign
    .-= Eva´s last blog ..New Design Weapons of Choice =-.

  10. Paul 19. Mar, 2010 at 5:39 AM #

    Cheers folks :)

    @Simon Yeah they don’t look superb on IE, but even the fact it supports @font-face is amazing! lol
    .-= Paul´s last blog ..How Do I Implement @Font-Face? =-.

  11. vps hosting 05. Apr, 2010 at 5:46 PM #

    Really helpful article Paul, thanks.
    .-= vps hosting´s last blog ..ItsJustHosting.com Managed VPS cPanel WHM RAID-10 Storage! =-.

  12. R1soft 05. Apr, 2010 at 5:47 PM #

    Really helpful article Paul, thanks.
    .-= R1soft´s last blog ..ItsJustHosting.com Managed VPS cPanel WHM RAID-10 Storage! =-.

  13. g maudonet 10. Apr, 2010 at 12:42 PM #

    Thanks man. It was reaally helpfull.

  14. Andri 06. Jul, 2010 at 5:09 PM #

    Great info here.Thanks

  15. TwitterBackgrounds 20. Jul, 2010 at 11:29 PM #

    a very instructive post. Thanks a lot ;-)

  16. parfum artscent 27. Jul, 2010 at 1:17 PM #

    thanks for you information

  17. yetimade 31. Aug, 2010 at 10:51 PM #

    Hey! This seems to be a really nice article, but I’m having an issue getting this to work. Any suggestions where I can find support?

    Thanks!
    JC

  18. Brett Widmann 05. Nov, 2010 at 8:49 AM #

    This is a very helpful break-down of implementing font-face. Thanks for sharing.

  19. alex 14. Nov, 2010 at 2:32 PM #

    Cool information, this is exactly what i have been searching for. thanks again for sharing
    alex´s last [type] ..Nama Domain – Bagaimana Memilih Nama Domain Yang Tepat

  20. Carnell 02. Dec, 2010 at 3:00 PM #

    I’m looking for a way to implement font face in wordpress. This should help. I’ll let you know how it goes.
    Carnell´s last [type] ..Satellite Direct TV for PC

  21. susu colostrum 12. Feb, 2011 at 2:05 PM #

    Really helpful article Paul, thanks
    susu colostrum´s last [type] ..Manfaat Susu Colostrum

  22. rendang padang asli 04. Mar, 2011 at 7:13 PM #

    Excellent, this is exactly what i have been looking for, for my next project, thanks very much.

  23. kenny 04. Jun, 2011 at 1:18 AM #

    oh man.. I didn’t so understand about changing the code in html text. Is there a way could be easy one like plugings maybe? anyway it’s nice sharing, thanks!

  24. Filip 11. Jul, 2011 at 1:11 AM #

    Hey… just a question – is there a place on my server that need to upload the font? Where does it pull the font info from?

Trackbacks/Pingbacks

  1. uberVU - social comments - 17. Mar, 2010

    Social comments and analytics for this post…

    This post was mentioned on Twitter by prosam: How Do I Implement @font-face? http://ff.im/-hB4mA...
  2. ??? » ???????? - 17. Mar, 2010

    [...] How Do I Implement @font-face? | Little Box Of Ideas [...]
  3. [User Link:How Do I Implement @font-face?] | Tips for Designers and Developers | tripwire magazine - 17. Mar, 2010

    [...] User News if (typeof Meebo == 'undefined') { Meebo=function(){(Meebo._=Meebo._||[]).push(arguments)}; (function(q){ var args = arguments; if (!document.body) { return setTimeout(function(){ args.callee.apply(this, args) }, 100); } var d=document, b=d.body, m=b.insertBefore(d.createElement('div'), b.firstChild); s=d.createElement('script'); m.id='meebo'; m.style.display='none'; m.innerHTML=''; s.src='http'+(q.https?'s':'')+'://'+(q.stage?'stage-':'')+'cim.meebo.com/cim/cim.php?network='+q.network; b.insertBefore(s, b.firstChild); })({network:'tripwiremagazine_fu72bi'}); }How Do I Implement @font-face? [...]
  4. You are now listed on FAQPAL - 17. Mar, 2010

    How Do I Implement @font-face?…

    What I’m going to show you is the most solid (not bulletproof!) method of @font-face implementation I personally find best and use within my projects….
  5. About Us - 19. Mar, 2010

    [...] How Do I Implement @font-face? | Little Box Of Ideas [...]
  6. Privacy Policy - 19. Mar, 2010

    [...] How Do I Implement @font-face? | Little Box Of Ideas [...]
  7. All about @font-face - FrancescoMugnai.com - Graphic Design Inspiration and Web Design Trends - 13. May, 2010

    [...] Do I Implement @font-face?http://www.littleboxofideas.com/blog/tutorials/how-do-i-implement-font-faceCSS3 Generator : Generate CSS3 On The [...]