@font-face

What it does:

Allows you to use fonts other than those installed on your user’s com­puter on your web pages.

Supported by:

Fire­fox 3.1, Safari 3, Opera 10, IE4+ (for Win­dows, note IE uses dif­fer­ent format for fonts)

Not support by:

Chrome, Fire­fox 3, Safari 2, Opera 9

What hap­pens when @font-face is not supported:

The next font-family in the list is used, so you need to ensure a suit­able second choice font that is likely to be installed on your vis­it­ors com­puter is next in the list of fonts.

History:

Back in middle of the browser wars in 1997, MS intro­duced the then pro­posed CSS2 prop­erty @font-face with IE4. Like the but­ton ele­ment which first became avail­able with IE4, @font-face never can into pop­u­lar use. Why?

  • Nets­cape choose to sup­port the altern­at­ive TruDoc format instead
  • .eot files are a non-standard format, (though in 2008 Microsoft made a sub­mis­sion to the W3C to adopt .eot)
  • .eot files can be dif­fi­cult to cre­ate (more on this later)
  • users will have down­load the font file and in 1997 with almost every­one on dia­lup this added con­sid­er­able weight to the page.

Well in 2007, Web­kit announced sup­port for @font-face, which was included in CSS2 recom­mend­a­tions in 1998. This time the open source philo­sophy reigned and they choose to sup­port the stand­ard TTF and OTF formats. Safari, Fire­fox and Opera all fol­lowed within 12 months.

Issues

You need to deliver two dif­fer­ent font formats to two dif­fer­ent browsers, though that as not dif­fi­cult as it seems.

Some font files and par­tic­u­larly TTF files can be large, with some exceed­ing 1Mb.

Not all fonts work with all browsers, while exper­i­ment­ing I found a num­ber of fonts both TTF and OTF that Opera 10 alpha on OS X refused to load and a few of those did not load in Opera 10 alpha on XP.

Cre­at­ing .eot is a inter­est­ing chal­lenge. I wasted a few hours with WEFT tool on Vista repeatedly crash­ing, I finally cre­ated a num­ber of invalid .eot files. So I ended up using the WEFT tool with XP to suc­cess­fully cre­ate .eot files and it only crashed once. Please don’t ask me for help with WEFT, it was just a trial and lots of errors exper­i­ence and I do not have easy access to XP.

The WEFT tool only works with TTF files. So unless you can con­vert OTF files to TTF, you can not use OTF files with IE.

Font licens­ing is a com­plex issue, I would sug­gest read­ing for and against stand­ard­iz­ing font embed­ding by Bert Bos as a start­ing point. Per­son­ally I am tak­ing a long hard look at the licence when I down­load a free font from the web to use. If the licence is unsuit­able I do not install the font. I am cur­rently going back through my font lib­rary and hunt­ing down the licences for each font and read­ing them care­fully before decid­ing to keep the font.

Writing the code

There are a few of issues here,

IE will down­load all EOT, TTF and OTF fonts declared with @font-face even though it can only use EOT fonts.

Web­kit, Fire­fox, Safari and Opera will down­load all EOT, TTF and OTF fonts declared with @font-face even though it can not use EOT fonts.

If you declare an EOT font for a font-family already declared with a TTF or OTF file, that font-family is no longer usable in Fire­fox. How­ever the reverse does not appear to be true for IE.

If you use a font-family name and that is the name of font already installed on a visitor’s com­puter, the com­puter will used the installed font instead of downloading.

So after after some thought and a little exper­i­ment­a­tion, this is how I will be using @font-face:

<!--[if IE]>
<style type="text/css" media="all">
@font-face { 
	font-family: Bleeding Cowboys; 
    font-style:  normal;
    font-weight: normal;
	src: url('BLEEDIN0.eot') !important; 
}
</style>
<![endif]-->
<style type="text/css" media="all">
@font-face { 
	font-family: Bleeding Cowboys;
	font-style:  normal;
    font-weight: normal; 
	src: url('Bleeding_Cowboys.ttf'); 
}
h1 {
	font-family: Bleeding Cowboys, 'Bleeding Cowboys', 2nd choice, serif;	
}
</style>

The logic is:

  1. Use con­di­tional com­ments to feed the EOT font to IE only.
  2. Use !import­ant so IE will ignore any future declar­a­tions of src for that font-family.
  3. Provide the TTF file for other browsers to use.
  4. Use the nor­mal name for the font, so people who already have that font will not have to down­load it a second time.
  5. Provide a suit­able altern­at­ive for browsers that do not sup­port @font-family

Example

A typo­graph­ers worst night­mare Using Inked­God for head­ings, Bleed­ing Cow­boys for body text, both faces I adore in the right place. Note neither font works with Opera 10 alpha on a Mac(you get your default fonts) and Impact for browsers that do not sup­port it. Screen­shots Safari 3, Fire­fox 3.1beta, IE7 which sup­port @font-face, Opera 10 alpha on a Mac with default fonts, Fire­fox 3 and Chrome which do not sup­port @font-face and dis­play impact.

Will I use it now?

I will def­in­itely use @font-face when I redesign this blog and for any suit­able pro­jects before then, if I can get access to the WEFT tool on XP. At the moment, depend­ing on the site between 50% and 90% of visitor’s browsers sup­port @font-face. Once Firefox3.1 in released that will rise to around 90% to 95% within a couple of months.

There are a couple of exceptions :

I will not use it just for a logo, if image replace­ment or flash provide a light weight alternative

I will be extremely cau­tious about using @font-face for large amounts of body text. While there is a large num­ber of suit­able fonts for dis­play (head­ing) text avail­able with the right licence to use with @font-face. For long sec­tions of text, I will stick to the best type for that job of read­ing online and that is usu­ally already installed on most people’s computers.


51 Responses to “@font-face”

  1. John Faulds Says:

    None of the links to the screen­shots work.

  2. Nick Says:

    John thanks for that, prob­lems of fin­ishibg a post late at night and for­get­ting to check the links. All fixed now.

  3. Ben Buchanan Says:

    As an exper­i­ment, I tried to read through the license for Hel­vetica Neue on a couple of pop­u­lar font web­sites; and near as I can tell you can’t leg­ally use it on a web server. You just can’t — they don’t offer a suit­able license. Even if you pay the (rather high for the con­text) fees, you’re not allowed to use the font using @font-face. I think, leg­ally speak­ing, you could use it via a script that accessed the font in a non-public dir­ect­ory and gen­er­ated graph­ics. But that cer­tainly rules out using it for body text.

    So they don’t offer a way to do the right thing — I won­der what they expect people to do?

    Then of course I had a look at free font sites, and gosh some of those fonts look famil­iar. If I use one in good faith and it turns out to be a ripoff, where will that leave me?

    So in the end I look at the thin list of default fonts, sigh and use them anyway.

  4. Nick Says:

    Ben, font licenses can barely cope with PDF files. Some EULAs require you to pay extra to embed fonts. Oth­ers let you embed their fonts in PDF files as long as they are not edit­able, does this mean:

    1. You can not use those fonts for forms in PDFs than can be com­pleted online?
    2. You can only use them in nor­mal PDFs? But they can be edited with a range of read­ily avail­able tools
    3. You can only used in pass­word pro­tec­ted PDFs? Even though PDF secur­ity is very poor and eas­ily broken by a range of read­ily avail­able tools

    As for web­sites, the stand­ard EULA lets you cre­ate images files for dis­play on web­sites and prob­ably use non edit­able text in Flash and that is about it. As soon as you go bey­ond that you get dif­fer­ing opin­ions. If you look at fontembedding.com which gives the type industry’s point of view. Using non user installed fonts on web­sites fall into two cat­egor­ies embed­ded and linked.

    Embed­ded is when the font is restric­ted to a spe­cific webpage or site by using .EOT format or using SIFR (and restrict­ing what sites can access the font .SWF file). This might be covered by embed­ding sec­tion of the font EULA.

    Link­ing is when the font is not restric­ted to a spe­cific page or site. For example using .TTF, .OTF format files with @font-face or a nor­mal SIFR setup. Because these files have the poten­tial to be used by any site and are down­loaded to vis­it­ors’ com­puters. The panic the font com­pan­ies and they would like you to pay a license fee for each time the font file is download.

    As for copy­right on fonts, that makes type licens­ing look easy. It is a com­plex issue I know very little about. A large num­ber of fonts are inspired by other fonts, some out of copy­right, oth­ers in copyright.Type and copy­right keeps numer­ous law­yers employed. The worse I would see hap­pen­ing if you used a free knock off and some­body got nasty about it, would be you would have to change the typeface used on your site. And that could be avoided if you invest­ig­ated the his­tory behind your type choice.

    As I said before, there are a num­ber of great fonts for read­ing lots of text on a com­puter screen, that have been design by pro­fes­sion­als for that pur­pose and most are already installed on your computer.

  5. Ricky Onsman Says:

    It’s also com­plic­ated by some of the bet­ter known fonts, includ­ing some that are regarded as stand­ard, safe and pop­u­lar are them­selves at best vari­ations of pre-existing fonts.

    If those font-makers could get away with it, why can’t the more recent knock-offs do the same?

    At what point does a new font stop being inspired by a pre­vi­ous font and start being a knock-off?

    But thanks for work­ing through the prac­tic­al­it­ies of using WEFT and @font-face in this way, Nick. Sets up some very inter­est­ing possibilities.

  6. Browser compatibility - Screenshots from different Browsers Says:

    […] Nick Cowie » @font-face […]

  7. Browser compatibility - Screenshots from different Browsers Says:

    […] Nick Cowie » @font-face […]

  8. yeah Says:

    i think you should use the con­di­tional com­ments at the end cause ie6 doesn’t handle !import­ant correctly

  9. Nick Cowie » !important keyword and IE Says:

    […] in a com­ment to my recent @font-face post sug­ges­ted that you should place the con­di­tional com­ments last because how IE6 does not handle the […]

  10. Ed Trager Says:

    Hi, Nick,

    Your “worst night­mare” URL http://nickcowie.com/proge/fontface.html works fine for me using Opera 10.00 alpha today on WinXP.

  11. Nick Says:

    Hi Ed

    I just checked with Opera 10.00 alpha, it works fine with Vista but not with Os X. Why, I have no idea, it is alpha soft­ware, so I am not wor­ried. I have amended the post to reflect Opera 10 work­ing with XP and Vista.

  12. links for 2009-01-26 | Yostivanich.com Says:

    […] Nick Cowie » @font-face What is it, who sup­ports it and how to use it. (tags: font typeface css web­design @font-face font-face) […]

  13. Barney Carroll Says:

    The ratio of informed/tested/up-to-date in this post is almost too good to be true!

    Few extra things to con­sider:
    • Fire­fox won’t use abso­lute URLs for src for fear of XSS.
    • Fire­fox won’t do TrueType.
    IE8 doesn’t sup­port any @font-face format.
    EOT is crap because it relies on incred­ibly shaky and more to the point pro­pri­et­ary Microsoft tech that needs Win­dows XP to work, but the thing it does have above the rest is that it encrypts the font so that it can­not be freely used, whereas with stand­ard @font-face imple­ment­a­tion, the user can simply look at their CSS and grab the actual fonts.

    Mate of mine is cur­rently work­ing on a redesign of http://openfontlibrary.org/, who are work­ing to provide the web with a rich col­lec­tion of freely-usable fonts, which browsers (other than FF) can hot­link to.

  14. Nick Says:

    Hi Barney

    Well if Fire­fox does not allow abso­lute URLS, it means that developers who want to use @font-face be aware of the restric­tions and host the fonts on their server and use rel­at­ive URLS.

    Fire­fox 3 does not sup­port TrueType, but Fire­fox 3.1 beta does (see screen­shots above) and I expect that to be car­ried for­war­ded into 3.1 proper.

    IE8 beta 2 sup­ports .eot format with @font-face. It would be sur­pris­ing give the recent moves by Microsoft to get .eot adop­ted by the wider community.

    The WEFT tool is old and clunky and needs a revamp, I am sure Microsoft are work­ing on a new tool, since that sub­mis­sion to the the W3C. Assign­ing the rights to the W3C and open­ing up the spe­cific­a­tions to everybody.

    As for font licens­ing, read Bert Bos’ art­icle to get the industry’s point of view.

  15. Andrew Says:

    IE has sup­por­ted @font-face for years, but nobody used it because cre­at­ing EOT files was such a pain. I tried con­vert­ing my van­ity hand­writ­ing font to EOT using the WEFT tool with a view to doing some­thing sim­ilar to what Nick sug­gests in this post. I could never get it to work and even­tu­ally gave up.

    The whole field of font-face sup­port seems mired in weird opin­ions. Nobody is going to host pir­ated pro­fes­sional grade fonts for embed­ding, enforce­ment is too easy and pro­fes­sional grade fonts are too large to down­load anyway.

    EOT solves noth­ing even if it worked, the glyphs can be extrac­ted back into TTF format without trouble. Strip­ping unused char­ac­ters may provide some bene­fit, but then the font can­not be used on sites with dynamic con­tent, which is just about every site these days.

    All I wanted was have people read my blog in my own hand­writ­ing. I don’t even really care about people down­load­ing and using my font. EOT and IE’s lack of TTF sup­port makes cus­tom fonts almost impossible to imple­ment in a uni­ver­sal man­ner. In sum­mary, they suck.

  16. Nick Cowie » Browsers I rather not support Says:

    […] browsers have. For example the prob­lem with border-radius and box-shadow, lack of sup­port for @font-face. In addi­tion the Chrome renders type dif­fer­ently from all other browsers. Still while it has a […]

  17. Spam Says:

    Just checked on Google Android’s Browser, it is sup­port @font-face tag. Doesn’t seem to be a com­pre­hens­ive list any­where, though.

  18. Juno Says:

    I have to say, I adore @font-face, and I’ve already had a lot of fun exper­i­ment­ing with it using Safari and Fire­fox 3.1 Beta. Same as you I’ve noticed the prob­lem with big files. To com­pare notes, what would you say is a good file size for using @font-face? Where would you make the cut?

    In terms of the license dis­cus­sion: already the first font design­ers offer spe­cific @font-face licenses/conditions. And there are quite a num­ber of excel­lent fonts avail­able that are com­pletely free. Also, once Opera, Fire­fox and Safari sup­port @font-face, I ima­gine that the pro­fes­sional foundries will come up with a licens­ing solu­tion. What I really *like* actu­ally, is put­ting the name of the font and a link to the artist or foundry into the footer of a site. Many books have an explan­a­tion of their type­set on the last page. Why not use that method online, too, and spread the font-love?

    Re: IE Explorer. I can’t be bothered with WEFT/.eot. What I like best about @font-face is that with a little bit of effort, it degrades very grace­fully and is very access­ible. No extra tech­no­logy, no extra images, and if a cer­tain browser doesn’t sup­port it, so what? I’ll cer­tainly keep recom­mend­ing using any browser BUT IE

  19. 3 simple examples: why Internet Explorer 8 disappoints web developers « C. Murray Consulting Says:

    […] (more on cross browser @font-face support) […]

  20. Nick Says:

    Juno

    A good file size is as small as pos­sible. It would really depend on the site, the design, the audi­ence etc. I would like the file to be under 100kb, but would get con­cerned if it exceeded 250kb.

    As for .eot, the prob­lem is in two parts.

    The first is philo­soph­ical, Microsoft is in the camp of the major font foundries, which wants to pro­tect their intel­lec­tual prop­erty with old school technology.

    The second is the WEFT it is an extremely clunky tool. For .eot to actu­ally gain accept­ance, a simple online tool is required, where you upload the .ttf or .otf, type in the URL and the .eot file is cre­ated for you to down­load, all within a couple of minutes.

  21. Richard Says:

    I sug­gest that on Vista, you run the WEFT tool in com­pat­ib­il­ity mode. Right click the short­cut to Weft in the Start Menu, click on the com­pat­ib­il­ity tab and choose to run it in say, Win­dows XP SP2 mode. Worked great for me, no crashes whatsoever.

  22. Nazmul Says:

    I was try­ing to show my own lan­guage using uni­code, for that i need vrinda.ttf in user’s font list. To avoid the depend­ency on user’s font list i tried to use @font-face and include the required font. I fol­lowed the steps men­tioned here. Unfor­tu­nately its not work­ing. Can you help me guys?

    Thanks every­body!!!

  23. Nick Cowie » Lessons in Progressive Enhancement with CSS2 and CSS3 Says:

    […] = check­Browser­Width; NickCowie.com // « I have been out shinyed @font-face […]

  24. Typografisk fallback | cynatic.org Says:

    […] prob­lem åter­står ändå, Inter­net Explorer stöd­jer enbart ett altern­at­ivt format och inte .ttf eller .odt som de […]

  25. Take Your Design To The Next Level With CSS3 | CSS | Smashing Magazine Says:

    […] @font-face […]

  26. Take Your Design to the Next Level with CSS3 « leylamanavi.com Says:

    […] @font-face […]

  27. Rolandyh’s World of Web » Blog Archive » Take Your Design To The Next Level With CSS3 Says:

    […] @font-face […]

  28. Take Your Design To The Next Level With CSS3 - Myfreepedia.com Says:

    […] @font-face […]

  29. 用CSS3将你的设计带入下个高度| CSS| 前端观察 Says:

    […] @font-face […]

  30. Take Your Design To The Next Level With CSS3 « Ramesh Says:

    […] @font-face […]

  31. rajesh Says:

    Hello,

    We are using font-face to link ttf fonts in safari. After apply­ing font fam­ily to some text, if we apply bold and italic, text not affex­ting the with bold and italic. How can we resolve this?

  32. Nick Says:

    Rajesh can you post an example, because I did a quick exper­i­ment with strong and em tags and font-weight prop­erty and had no issues with TTF fonts and either Fire­fox 3.5 or Safari 4.0 on XP

  33. rajesh Says:

    Hello Nick,

    Thanks for your response. Did you tested with dynamic fonts (which are not avail­able in your sys­tem fonts folder)?.

    Can you test the below text by repla­cing Bernie with your font name.

    @font-face {
    font-family: Bernie;
    font-style: nor­mal;
    font-weight: nor­mal;
    src: url(“fonts/Bernie.ttf”);
    }

    add below code in Body and replace font-family with the above @font-face value:

    <p>
    <span style=“font-family: Bernie;”>
    <em>
    <strong>
    Test Label Test Label Test Label Test Label
    </strong>
    </em>
    </span>
    </p>

  34. CSS3新特性一览 | 帕兰映像 Says:

    […] @font-face […]

  35. CSS3新特性一览 Says:

    […] @font-face […]

  36. 拉托妮参上~ » 提升你设计水平的CSS3新技术 Says:

    […] @font-face […]

  37. CSS3新特性一览 | EViit Says:

    […] @font-face […]

  38. Nick Cowie » The League of Moveable Type Says:

    […] on licens­ing issues with embed­ding fonts in PDFs. here a couple of font design­ers dis­covered @font-face and went lets make the world a bet­ter place. By cre­at­ing The League of Move­able Type, con­vin­cing a […]

  39. @font-face kullanımı Says:

    […] http://nickcowie.com/2008/font-face/ […]

  40. Sevdalimsin.Net Sohbet » Blog Archive » @font-face kullanımı Says:

    […] http://nickcowie.com/2008/font-face/ […]

  41. TulipVorlax Says:

    Thanks for all of this.

    I dont use the !import­ant clause as i place my if-comments after the link to the first CSS.

    I found the fol­low­ing site to con­vert any ttf to eot :

    http://ttf2eot.sebastiankippe.com/

    Not asso­si­ated with it in any way, just hop­ing it’s usefull.

  42. Tutte le nuove caratteristiche dei CSS3 « Beaver Magazine Says:

    […] @font-face […]

  43. Richard Fink Says:

    If you’re going to be using @font-face web fonts check out this new free tool:
    EOTFAST
    EOTFAST is a util­ity for cre­at­ing nat­ively com­pressed EOT files for use with any domain.
    Con­vert once, use on any site. Sav­ings in file size typ­ic­ally range from 45% to 70%.
    It’s fair to say that other con­ver­sions util­it­ies like Microsoft WEFT or ttf2eot are now obsol­ete.
    A great screen font like Droid Serif starts out at 169kb as a TTF with the full char­ac­ter set but as an EOTFAST file it weighs in at only 80kb. With still the full char­ac­ter set. Com­pres­sion is lossless.
    The doc­u­ment­a­tion con­tains inform­a­tion for design­ers look­ing to pre­pare fonts for use on the web.
    The down­load pack­age also con­tains a HTMLEOT File Integ­rity Test” page and a help­ful “fall­back” test font.
    EOTFAST is a must-have for any­one look­ing to use @font-face web fonts today.

  44. Articles about @font-face volume 1 « Article Directory Says:

    […] Nick Cowie ” @font-face What hap­pens when @font-face is not sup­por­ted: The next font-family … I will be extremely cau­tious about using @font-face for large amounts of body text. … […]

  45. 用CSS3将你的设计带入下个高度 - lanmiz.net Says:

    […] @font-face […]

  46. Lynn's Blog - 网页编程|XHTML+CSS|HTML5|CSS3|AJquery|JS|AJAX|WordPress|Flash|Asp.net|Video Says:

    […] @font-face […]

  47. CSS3新特性一览 | 玩转前端 Says:

    […] @font-face […]

  48. Sesliparti.Com Seslichat,Seslisohbet,Kameralichat,Kameralisohbet,Muhabbet,parti,Parti Sohbet,Teknikpanel » Blog Archive » @font-face kullanımı,Sesliparti.com,Sesliparti Says:

    […] http://nickcowie.com/2008/font-face/ […]

  49. 提升你设计水平的CSS3新技术 - 奔跑的蜗牛 Says:

    […] @font-face […]

  50. @font-face – http://nickcowie.com/2008/font-face/ | Julien Ferla Says:

    […] – nickcowie.com/2008/font-face/ Tags: web­dev web­design css tutori­als resources Tweet […]

  51. @font-face kullanımı • Teknozzi.com Says:

    […] […]

Google