@font-face

What it does:

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

Supported by:

Firefox 3.1, Safari 3, Opera 10, IE4+ (for Windows, note IE uses different format for fonts)

Not support by:

Chrome, Firefox 3, Safari 2, Opera 9

What happens when @font-face is not supported:

The next font-family in the list is used, so you need to ensure a suitable second choice font that is likely to be installed on your visitors computer is next in the list of fonts.

History:

Back in middle of the browser wars in 1997, MS introduced the then proposed CSS2 property @font-face with IE4. Like the button element which first became available with IE4, @font-face never can into popular use. Why?

  • Netscape choose to support the alternative TruDoc format instead
  • .eot files are a non-standard format, (though in 2008 Microsoft made a submission to the W3C to adopt .eot)
  • .eot files can be difficult to create (more on this later)
  • users will have download the font file and in 1997 with almost everyone on dialup this added considerable weight to the page.

Well in 2007, Webkit announced support for @font-face, which was included in CSS2 recommendations in 1998. This time the open source philosophy reigned and they choose to support the standard TTF and OTF formats. Safari, Firefox and Opera all followed within 12 months.

Issues

You need to deliver two different font formats to two different browsers, though that as not difficult as it seems.

Some font files and particularly TTF files can be large, with some exceeding 1Mb.

Not all fonts work with all browsers, while experimenting I found a number 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.

Creating .eot is a interesting challenge. I wasted a few hours with WEFT tool on Vista repeatedly crashing, I finally created a number of invalid .eot files. So I ended up using the WEFT tool with XP to successfully create .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 experience and I do not have easy access to XP.

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

Font licensing is a complex issue, I would suggest reading for and against standardizing font embedding by Bert Bos as a starting point. Personally I am taking a long hard look at the licence when I download a free font from the web to use. If the licence is unsuitable I do not install the font. I am currently going back through my font library and hunting down the licences for each font and reading them carefully before deciding to keep the font.

Writing the code

There are a few of issues here,

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

Webkit, Firefox, Safari and Opera will download 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 Firefox. However 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 computer, the computer will used the installed font instead of downloading.

So after after some thought and a little experimentation, 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 conditional comments to feed the EOT font to IE only.
  2. Use !important so IE will ignore any future declarations of src for that font-family.
  3. Provide the TTF file for other browsers to use.
  4. Use the normal name for the font, so people who already have that font will not have to download it a second time.
  5. Provide a suitable alternative for browsers that do not support @font-family

Example

A typographers worst nightmare Using InkedGod for headings, Bleeding Cowboys 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 support it. Screenshots Safari 3, Firefox 3.1beta, IE7 which support @font-face, Opera 10 alpha on a Mac with default fonts, Firefox 3 and Chrome which do not support @font-face and display impact.

Will I use it now?

I will definitely use @font-face when I redesign this blog and for any suitable projects before then, if I can get access to the WEFT tool on XP. At the moment, depending on the site between 50% and 90% of visitor’s browsers support @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 replacement or flash provide a light weight alternative

I will be extremely cautious about using @font-face for large amounts of body text. While there is a large number of suitable fonts for display (heading) text available with the right licence to use with @font-face. For long sections of text, I will stick to the best type for that job of reading online and that is usually already installed on most people’s computers.


51 Responses to “@font-face”

  1. John Faulds Says:

    None of the links to the screenshots work.

  2. Nick Says:

    John thanks for that, problems of finishibg a post late at night and forgetting to check the links. All fixed now.

  3. Ben Buchanan Says:

    As an experiment, I tried to read through the license for Helvetica Neue on a couple of popular font websites; and near as I can tell you can’t legally use it on a web server. You just can’t – they don’t offer a suitable license. Even if you pay the (rather high for the context) fees, you’re not allowed to use the font using @font-face. I think, legally speaking, you could use it via a script that accessed the font in a non-public directory and generated graphics. But that certainly rules out using it for body text.

    So they don’t offer a way to do the right thing – I wonder what they expect people to do?

    Then of course I had a look at free font sites, and gosh some of those fonts look familiar. 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. Others let you embed their fonts in PDF files as long as they are not editable, does this mean:

    1. You can not use those fonts for forms in PDFs than can be completed online?
    2. You can only use them in normal PDFs? But they can be edited with a range of readily available tools
    3. You can only used in password protected PDFs? Even though PDF security is very poor and easily broken by a range of readily available tools

    As for websites, the standard EULA lets you create images files for display on websites and probably use non editable text in Flash and that is about it. As soon as you go beyond that you get differing opinions. If you look at fontembedding.com which gives the type industry’s point of view. Using non user installed fonts on websites fall into two categories embedded and linked.

    Embedded is when the font is restricted to a specific webpage or site by using .EOT format or using SIFR (and restricting what sites can access the font .SWF file). This might be covered by embedding section of the font EULA.

    Linking is when the font is not restricted to a specific page or site. For example using .TTF, .OTF format files with @font-face or a normal SIFR setup. Because these files have the potential to be used by any site and are downloaded to visitors’ computers. The panic the font companies and they would like you to pay a license fee for each time the font file is download.

    As for copyright on fonts, that makes type licensing look easy. It is a complex issue I know very little about. A large number of fonts are inspired by other fonts, some out of copyright, others in copyright.Type and copyright keeps numerous lawyers employed. The worse I would see happening if you used a free knock off and somebody got nasty about it, would be you would have to change the typeface used on your site. And that could be avoided if you investigated the history behind your type choice.

    As I said before, there are a number of great fonts for reading lots of text on a computer screen, that have been design by professionals for that purpose and most are already installed on your computer.

  5. Ricky Onsman Says:

    It’s also complicated by some of the better known fonts, including some that are regarded as standard, safe and popular are themselves at best variations 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 previous font and start being a knock-off?

    But thanks for working through the practicalities of using WEFT and @font-face in this way, Nick. Sets up some very interesting 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 conditional comments at the end cause ie6 doesn’t handle !important correctly

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

    [...] in a comment to my recent @font-face post suggested that you should place the conditional comments last because how IE6 does not handle the [...]

  10. Ed Trager Says:

    Hi, Nick,

    Your “worst nightmare” 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 software, so I am not worried. I have amended the post to reflect Opera 10 working with XP and Vista.

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

    [...] Nick Cowie » @font-face What is it, who supports it and how to use it. (tags: font typeface css webdesign @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 consider:
    • Firefox won’t use absolute URLs for src for fear of XSS.
    • Firefox won’t do TrueType.
    • IE8 doesn’t support any @font-face format.
    • EOT is crap because it relies on incredibly shaky and more to the point proprietary Microsoft tech that needs Windows XP to work, but the thing it does have above the rest is that it encrypts the font so that it cannot be freely used, whereas with standard @font-face implementation, the user can simply look at their CSS and grab the actual fonts.

    Mate of mine is currently working on a redesign of http://openfontlibrary.org/, who are working to provide the web with a rich collection of freely-usable fonts, which browsers (other than FF) can hotlink to.

  14. Nick Says:

    Hi Barney

    Well if Firefox does not allow absolute URLS, it means that developers who want to use @font-face be aware of the restrictions and host the fonts on their server and use relative URLS.

    Firefox 3 does not support TrueType, but Firefox 3.1 beta does (see screenshots above) and I expect that to be carried forwarded into 3.1 proper.

    IE8 beta 2 supports .eot format with @font-face. It would be surprising give the recent moves by Microsoft to get .eot adopted by the wider community.

    The WEFT tool is old and clunky and needs a revamp, I am sure Microsoft are working on a new tool, since that submission to the the W3C. Assigning the rights to the W3C and opening up the specifications to everybody.

    As for font licensing, read Bert Bos’ article to get the industry’s point of view.

  15. Andrew Says:

    IE has supported @font-face for years, but nobody used it because creating EOT files was such a pain. I tried converting my vanity handwriting font to EOT using the WEFT tool with a view to doing something similar to what Nick suggests in this post. I could never get it to work and eventually gave up.

    The whole field of font-face support seems mired in weird opinions. Nobody is going to host pirated professional grade fonts for embedding, enforcement is too easy and professional grade fonts are too large to download anyway.

    EOT solves nothing even if it worked, the glyphs can be extracted back into TTF format without trouble. Stripping unused characters may provide some benefit, but then the font cannot be used on sites with dynamic content, which is just about every site these days.

    All I wanted was have people read my blog in my own handwriting. I don’t even really care about people downloading and using my font. EOT and IE’s lack of TTF support makes custom fonts almost impossible to implement in a universal manner. In summary, they suck.

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

    [...] browsers have. For example the problem with border-radius and box-shadow, lack of support for @font-face. In addition the Chrome renders type differently from all other browsers. Still while it has a [...]

  17. Spam Says:

    Just checked on Google Android’s Browser, it is support @font-face tag. Doesn’t seem to be a comprehensive list anywhere, though.

  18. Juno Says:

    I have to say, I adore @font-face, and I’ve already had a lot of fun experimenting with it using Safari and Firefox 3.1 Beta. Same as you I’ve noticed the problem with big files. To compare 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 discussion: already the first font designers offer specific @font-face licenses/conditions. And there are quite a number of excellent fonts available that are completely free. Also, once Opera, Firefox and Safari support @font-face, I imagine that the professional foundries will come up with a licensing solution. What I really *like* actually, is putting the name of the font and a link to the artist or foundry into the footer of a site. Many books have an explanation of their typeset 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 gracefully and is very accessible. No extra technology, no extra images, and if a certain browser doesn’t support it, so what? I’ll certainly keep recommending 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 possible. It would really depend on the site, the design, the audience etc. I would like the file to be under 100kb, but would get concerned if it exceeded 250kb.

    As for .eot, the problem is in two parts.

    The first is philosophical, Microsoft is in the camp of the major font foundries, which wants to protect their intellectual property with old school technology.

    The second is the WEFT it is an extremely clunky tool. For .eot to actually gain acceptance, a simple online tool is required, where you upload the .ttf or .otf, type in the URL and the .eot file is created for you to download, all within a couple of minutes.

  21. Richard Says:

    I suggest that on Vista, you run the WEFT tool in compatibility mode. Right click the shortcut to Weft in the Start Menu, click on the compatibility tab and choose to run it in say, Windows XP SP2 mode. Worked great for me, no crashes whatsoever.

  22. Nazmul Says:

    I was trying to show my own language using unicode, for that i need vrinda.ttf in user’s font list. To avoid the dependency on user’s font list i tried to use @font-face and include the required font. I followed the steps mentioned here. Unfortunately its not working. Can you help me guys?

    Thanks everybody!!!

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

    [...] = checkBrowserWidth; NickCowie.com // « I have been out shinyed @font-face [...]

  24. Typografisk fallback | cynatic.org Says:

    [...] problem återstår ändå, Internet Explorer stödjer enbart ett alternativt 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 applying font family to some text, if we apply bold and italic, text not affexting the with bold and italic. How can we resolve this?

  32. Nick Says:

    Rajesh can you post an example, because I did a quick experiment with strong and em tags and font-weight property and had no issues with TTF fonts and either Firefox 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 available in your system fonts folder)?.

    Can you test the below text by replacing Bernie with your font name.

    @font-face {
    font-family: Bernie;
    font-style: normal;
    font-weight: normal;
    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 licensing issues with embedding fonts in PDFs. here a couple of font designers discovered @font-face and went lets make the world a better place. By creating The League of Moveable Type, convincing 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 !important clause as i place my if-comments after the link to the first CSS.

    I found the following site to convert any ttf to eot :

    http://ttf2eot.sebastiankippe.com/

    Not assosiated with it in any way, just hoping 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 utility for creating natively compressed EOT files for use with any domain.
    Convert once, use on any site. Savings in file size typically range from 45% to 70%.
    It’s fair to say that other conversions utilities like Microsoft WEFT or ttf2eot are now obsolete.
    A great screen font like Droid Serif starts out at 169kb as a TTF with the full character set but as an EOTFAST file it weighs in at only 80kb. With still the full character set. Compression is lossless.
    The documentation contains information for designers looking to prepare fonts for use on the web.
    The download package also contains a HTML “EOT File Integrity Test” page and a helpful “fallback” test font.
    EOTFAST is a must-have for anyone looking 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 supported: 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: webdev webdesign css tutorials resources Tweet [...]

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

    [...] [...]

Google