beautiful fonts with @font-face

This article is also available in Bulgarian.

While Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, and multiple weights along with support for rendering complex scripts, authors are still limited to using commonly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @font-face rule, a way of linking to TrueType and OpenType fonts just as code and images are linked to today. Safari has supported this type of font linking since version 3.1, and Opera has announced that they plan to support it in Opera 10.

Using @font-face for font linking is relatively straightforward. Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it’s bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.

/* Graublau Sans Web ( */
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;

Browsers that support @font-face will render text using Graublau Sans Web while older browsers will render text using either Lucida Grande or the default sans-serif face. Example here:

Digging A Little Deeper

Most font families today consist of only four faces: regular, bold, italic and bold italic. To define each of these faces the font-weight and font-style descriptors are used. These define the style of the face; there’s no concept of a cascade or inheritance that applies here. Without an explicit definition each of these defaults to a value of ‘normal’:

/* Gentium by SIL International   */
/* */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> default to normal */
@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
body { font-family: Gentium, Times New Roman, serif; }

The sample text below when rendered with this font family:

A feature that’s easy to overlook is that @font-face allows the creation of families with more than just regular and bold faces — up to nine weights can be defined for a single family. This is true even on Windows, where underlying platform limitations usually restrict font families to just regular and bold weights. Fonts such as those of the Japanese open source M+ Fonts project have as many as seven weights. A selection of these are used in the sample below:

In some situations, authors may prefer to use fonts available locally and only download fonts when those faces aren’t available. This is possible with the use of local() in the definition of the src descriptor of an @font-face rule. The browser will iterate over the list of fonts in the src descriptor until it successfully loads one.

/* MgOpen Moderna                      */
/* */
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"),
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  font-weight: bold;
body { font-family: MyHelvetica, sans-serif; }

The screenshot below shows from top to bottom the results on Mac OS X, Windows and Linux for a simple testcase that uses the font family defined above:

The Helvetica Neue font family is available on most Mac OS X systems but generally on neither Windows nor Linux machines. When the example here is rendered on Mac OS X, the local Helvetica Neue faces are used and no font is downloaded. Under Windows and Linux the attempt to load a local font fails and a substitute font — MgOpen Moderna — is downloaded and used instead. MgOpen Moderna is designed to be a substitute for Helvetica, so it renders similarly to Helvetica Neue. This way, an author can guarantee text appearance but avoid a font download when it’s unnecessary.

The name used to refer to a specific font face is the full name for an individual font. Generally it’s the family name plus the style name (e.g. “Helvetica Bold”). Under Mac OS X, the name is listed in the information panel for a given face. Select a single face and choose ‘Show Font Info’ from the Preview menu in FontBook:

Similar tools exist under Linux. On Windows, use the font properties extension, a free download from Microsoft to view these names. With the extension installed, the properties panel shows information about an individual font. The full name is referred to as the “Font Name” on the Name tab:

Safari only supports PostScript name lookup under Mac OS X, so under Mac OS X Postscript names are also supported. For OpenType PS fonts (often labeled with an .otf extension) the full name is the same as the PostScript name under Windows. So for these fonts, authors are advised to include both the full name and the PostScript name for cross-platform interoperability.

Supporting Many Languages

Many languages suffer from a lack of commonly available fonts. For minority languages and ancient scripts, the options often dwindle to just a handful. The use of @font-face allows authors using these languages to ameliorate this by including fonts with their pages.

@font-face {
  font-family: Scheherazade;
  src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"),
       url(fonts/ScheherazadeRegOT.ttf) format("opentype");
body { font-family: Scheherazade, serif; }

Languages such as Arabic require text shaping, where the display of a given character is affected by the characters surrounding it. Different platforms support different rendering technologies to enable text shaping; under Mac OS X, AAT fonts are required while under Windows and Linux OpenType fonts are required. Without a font in a format required for a given platform, text shaping will not be rendered correctly.

Under Mac OS X, the AAT version of the font is downloaded. On Windows and Linux, where rendering with AAT fonts is not supported, the download of the AAT font is skipped and the OpenType font is used instead. Hence, the text is rendered correctly on all platforms.

Cross-Site Font Usage

By default, Firefox 3.5 only allows fonts to be loaded for pages served from the same site. This prevents sites from freely using fonts found on other sites. For sites that explicitly want to allow cross-site font sharing, an online font library for example, Firefox 3.5 supports the use of access control headers to control this behavior. By adding an additional header to the HTTP headers sent with font files, sites can enable cross-site usage.

# example Apache .htaccess file to add access control header
<filesMatch ".(ttf|otf)$">
<ifModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"

With this HTTP header enabled, any page can access the fonts on this site, not just pages from the same site.

Font Licensing Issues

When using a font for a website, it’s important to always confirm that the font license permits use on a website. If the license agreement is filled with opaque legalese, err on the side of caution and check with the font vendor before using a font on a site. If the license permits its use, it’s a good idea to add a comment near the @font-face rules that points to the license, for future reference.

“I found a free font, can I use it on my site?”

Maybe, maybe not. Some free fonts are distributed as teaser products to encourage a purchase and don’t allow for redistribution or posting on a web server. Check the license, even for free fonts.

“I just want to use [insert favorite font name here] on my site. Is that possible?”

Right now, probably not. The use of font linking on the web is still in its infancy. Most fonts that ship with proprietary OS’s today have licenses that limit their use to standard desktop applications, so uploading these fonts to a web server is almost certainly not permitted. Piracy has plagued the font industry in the past, so most font vendors are wary of allowing their fonts to be used except in relatively limited contexts. Many font vendors are focused on the needs of publishing and printing industries, and the relative complexity of their license agreements often reflects this. In the future, some font designers may conclude that the sales of fonts as web fonts will outweigh any potential loss in sales due to piracy, others may not. Their license agreements will reflect this choice and should be respected.

The stock photography market is often described as a $2 billion market but the web font market is still close to a $0 market, it can only go up!

Font Linking In Internet Explorer

Font linking has been possible with Internet Explorer but only for linking to fonts in the proprietary EOT font format. The only way to create EOT fonts is to use the Microsoft WEFT tool, available only on Windows. Only TrueType and OpenType TT fonts can be converted to EOT format, OpenType PS (.otf) fonts cannot be used.

Internet Explorer only recognizes the font-family and src descriptors within @font-face rules, so each family can only contain a single face. It doesn’t understand format() hints and will ignore any @font-face rule containing these hints. This behavior can be used enable font linking cross platform:

/* Font definition for Internet Explorer */
/*         (*must* be first)             */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* can't use format() */;
/* Font definition for other browsers */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");

Future Work

For Firefox 3.5, the font-stretch and unicode-range descriptors are not supported. Fonts defined in SVG documents are also not supported yet. These are under consideration for inclusion in future releases. As always, patches are welcome!

Further Resources




Font Resources

Font Politics


  1. […] you’re interested in a longer, more detailed discussion of @font-face, check out this post on Mozilla Hacks. newsletterPromo(”Technology”, […]

    July 6th, 2009 at 13:47
  2. […] you’re interested in a longer, more detailed discussion of @font-face, check out this post on Mozilla […]

    July 6th, 2009 at 15:07
  3. […] the original: beautiful fonts with @font-face at Tags: Comments0 Leave a Reply Click here to cancel […]

    July 6th, 2009 at 16:48
  4. John Daggett

    Thanks for the edit! Feel free to post other things you find to the www-style mailing list, that’s the best place for editorial comments.

    @jens wedin
    No, the Windows embedding API which supports EOT does not currently support .otf (Postscript CFF) fonts. That’s also why you can’t embed these fonts in Word documents.

    July 6th, 2009 at 21:32
  5. James John Malcolm

    @Jens Wedin
    There is a way to covert OTF to EOT, just not directly. Fontforge[1] can convert OTF to TTF, and TTF2EOT[2] can (surprise, surprise!) convert TTF to EOT (only seems to work under Linux for now).
    Haven’t got Fontforge to correctly convert anything for myself yet, but it should definitely be possible.

    @Mr. Fussyfont
    Gee thanks. Come here and let me wri..uhm, thank you. It’ll be worth it!


    July 7th, 2009 at 02:27
  6. […] you’re interested in a longer, more detailed discussion of @font-face, check out this post on Mozilla […]

    July 7th, 2009 at 08:24
  7. Jens Wedin

    Hi and thanks for reply!
    I did some testing a research to see if I could get the an EOT file from an OTF file and this is what I did.

    1. Get the OTF file
    2. Convert the file at
    3. Download it and install in in Windows fonts folder
    4. Run WEFT (I have mac so I run ut under Paralels)
    5. Follow the instructions from this site,
    6. Make the changes to your css file and upload the eot file to the webserver.
    7. Check out the nice result :)

    Here is how it looks for my site in a bunch of browsers


    July 8th, 2009 at 02:29
  8. […] beautiful fonts with @font-face […]

    July 8th, 2009 at 07:12
  9. […] е от статията Beautiful fonts with @font-face. В нея можете да намерите и други съвети относно […]

    July 8th, 2009 at 15:15
  10. Dave Crossland

    I’ve documented how to relax CORS restrictions at

    July 8th, 2009 at 15:41
  11. […] show off the web fonts capability of FireFox 3.5, font design company Underware created some special glyph-limited editions of their […]

    July 9th, 2009 at 09:32
  12. letscounthedays

    With CSS3 and the continued development for Firefox, Safari, and Chrome its only a matter of time before we will all be able to use custom fonts within our websites. Other than a few licensing issue and Internet Explore being dead weight the time should be here sooner than later.

    Very good article, thank you!

    July 10th, 2009 at 12:28
  13. […] the release of Firefox 3.5, I decided to look into using embedded fonts. In the past, web designers have mostly been limited to the fonts pre-installed on most […]

    July 12th, 2009 at 12:16
  14. […] 原文地址:beautiful fonts with @font-face […]

    July 13th, 2009 at 19:21
  15. […] to “embed” fonts on their web-pages. And I’m a bit late on this, but it has found its way into the newest release of Firefox as well. The example rendered perfectly on version 3.5 using the […]

    July 16th, 2009 at 11:47
  16. skierpage

    I have the same question as Koolwriting, is there a way to do this using inline style=”font stuff here” on an HTML element? Blogger won’t let me put a script block in a post. :-( If I put the @font-face in a style attribute, Firefox 3.6a1pre Error Console complains “Warning: Expected declaration but found ‘@font-face'”

    July 16th, 2009 at 17:48
  17. […] Beautiful fonts with @font-face a super tutorial with plenty of linked resources. […]

    July 18th, 2009 at 07:39
  18. […] the use of new fonts as a native capability of web designers. The potential is just immense– designers will no longer be captive to the likes of Verdana, Georgia, Arial, and Tahoma, work-arounds such as image replacement […]

    July 20th, 2009 at 04:35
  19. John Daggett


    No, @font-face rules can’t be defined via style attribute settings.

    July 20th, 2009 at 15:48
  20. […] first reason, and more important of the two, is that I wanted to experiment with the new @font-face support in Firefox 3.5. I have a strongly held point of view that you don’t really learn about […]

    July 27th, 2009 at 18:13
  21. […] beautiful fonts with @font-face […]

    July 27th, 2009 at 20:27
  22. […] trouverez des informations plus complètes dans cet excellent article. […]

    July 28th, 2009 at 07:43
  23. […] beautiful fonts with @font-faceFirefox 3.5 unterstützt dank eines neuen CSS Tags font-face nun eigens eingebundene Schriftarten […]

    August 2nd, 2009 at 11:44
  24. […] beautiful fonts with @font-face […]

    August 2nd, 2009 at 21:46
  25. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 3rd, 2009 at 02:51
  26. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 3rd, 2009 at 06:04
  27. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 3rd, 2009 at 16:16
  28. […] beautiful fonts with @font-face at (tags: css typography fonts webdesign @font-face css3) […]

    August 3rd, 2009 at 17:36
  29. […] beautiful fonts with @font-face […]

    August 3rd, 2009 at 20:13
  30. Bradford Sherrill

    Great article, I can’t wait for the modern browsers to be more saturated so we can use CSS3! Its very tempting to start using them fully.

    August 4th, 2009 at 08:58
  31. Aric Bills

    My excitement for Firefox’s support of @font-face is tempered by the fact that Firefox seems unable to display beautiful fonts beautifully. Compare the following screenshots of the Gentium sample text, all made from openSUSE 11.0:

    Firefox 3.5.2:
    Konqueror 4.0.4:
    Opera 9.6.4:

    Gentium is installed on my machine, and every browser seems to render it fine–except Firefox. This font rendering problem is not limited to Gentium; many fonts display fine in other browsers but terribly in Firefox. I get similar results in my Windows Firefox (3.0.12). I’m a big fan of Firefox but I can’t understand why it struggles with font rendering when every other browser seems to have it figured out. What gives?

    August 8th, 2009 at 12:49
  32. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 8th, 2009 at 15:52
  33. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 10th, 2009 at 04:51
  34. […] months). Things still do visually look a little different across browser implementations, but they currently work cross-browser and with fixes like forcing Cleartype on for web fonts in Firefox, render quality is improving […]

    August 10th, 2009 at 06:28
  35. […] months). Things still do visually look a little different across browser implementations, but they currently work cross-browser and with fixes like forcing Cleartype on for web fonts in Firefox, render quality is improving […]

    August 11th, 2009 at 09:01
  36. […] of Web Typography is probably for the hard-core typography geek. Do as the authors say and read John Daggett’s primer about @font-face first. Then read about the potential of web typography. As they say, “fine typography has […]

    August 12th, 2009 at 05:40
  37. […] are several methods/technologies that allow you to essentially embed uncommon fonts on your site. Beautiful fonts with @font-face is a good summary of the potential for straight CSS-level font embeds; although there are legal […]

    August 14th, 2009 at 09:02
  38. […] Beautiful fonts with @font-face The basics of using @font-face for inserting truetype fonts within your designs. […]

    August 14th, 2009 at 11:04
  39. […] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 […]

    August 15th, 2009 at 04:33
  40. Jens Wedin

    @Aric, could it be because of the font? When I look at a testpage I did on my own it looks ok in Firefox, have a look below and tell us how it look.


    August 17th, 2009 at 23:36
  41. Aric Bills

    @Jens, thanks for your reply. Below is a screenshot of your webpage rendered in Firefox 3.5.2 on my system:

    And here it is rendered in Konqueror 4.0.4:

    The rendering in Firefox is not bad (it’s downright beautiful compared to the Gentium italics), although I do prefer the Konqueror rendering–compare the bowls of the “e” and kerning within the word “posted”. My problem is that I am a linguist working with Native American languages, which use uncommon accented letters such as a circumflex over the letter x or a dot below a barred l. I would like to use @font-face to make my linguistic data accessible to the Native community, but I will need to use a font (like Gentium) that supports these uncommon diacritics; so for me, simply switching to a more “renderable” font like Museo may not be a possibility.

    I think the issue I am running into is that Firefox doesn’t respect my system preferences regarding antialiasing (system is set to antialias, but Firefox doesn’t do any antialiasing). All other browsers I have tested, whether based on KDE or Gnome, honor the system antialiasing setting.

    I’m not sure whether this problem stems from the Firefox source code itself, from the way the particular executable I’m using was compiled, from some Firefox-specific settings I’m unaware of, or from some other reason. I do notice similarly bad rendering in Firefox for Windows, but that may or may not be the same issue. If anyone has any insights into the source of this problem and/or ways to resolve it, I would love to hear from you.

    Jens, thanks again for your response.


    August 18th, 2009 at 02:19
  42. Karl Tomlinson

    @Aric, comparing your screenshots, it looks like Firefox is using hintstyle:hintfull and rgba:rgb, whereas the other applications are using something like hintstyle:hintslight and rgba:none. Not all applications always respect fontconfig rules, which may explain the difference.

    Firefox will use screen settings, and let fontconfig rules tweak these.
    Check ~/.fonts.conf and files in /etc/fonts/conf.d to see if hintfull or rgba values are replaced there.

    The main problem I see here is that the native hinter is not producing good results with Gentium Italic. This may be because the hint instructions in the font are not so good.

    Fontconfig rules can be used for setting preferred behaviour for particular fonts. For example, the following lines will force use of the FreeType’s auto-hinter (if hinting), which does a better job for this font, without turning off hinting instructions from fonts with better instructions:

     <match target="font" >
      <test name="fullname" >
       <string>Gentium Italic</string>
      <edit name="autohint" >
    August 18th, 2009 at 23:29
  43. […] beautiful fonts with @font-face […]

    August 19th, 2009 at 00:54
  44. John Daggett

    @Aric Bills

    I’m sure there are ways of tweaking this on your system as Karl suggests but I think this is a bug if other browsers don’t suffer the same problem. I’ve logged this in bugzilla:

    You can add yourself to the CC list to track and make follow-on comments there.

    August 19th, 2009 at 17:50
  45. John Daggett

    @Aric Bills

    Just to clarify, the screenshots you posted are using the Gentium downloadable fonts example? Opera 9.5 doesn’t support downloadable fonts so I think you must be testing with Opera 10 beta perhaps? Or using a similar test with Gentium and Gentium Italic installed locally?

    August 19th, 2009 at 18:58
  46. Aric Bills

    @Karl, thanks for your help. Does this mean that Firefox is honoring my settings while all other browsers are not? In any case, I was able to adjust ~/.fonts.conf to rgba:none, hintstyle:hintslight and achieve the same font rendering in Firefox as in the other browsers. It’s also helpful to know that I can make adjustments on a per-font basis.

    @John, thanks for filing the bug report. If it is just a bug and easily fixable, that would be a great relief to me.

    August 20th, 2009 at 00:05
  47. Aric Bills

    @John, I have Gentium and Gentium Italic installed locally. The screenshots are all of the same URL (, but as far as I know only Firefox is downloading the font as directed in the CSS.

    Out of curiosity, which operating system did you use to render the examples in the article?

    August 20th, 2009 at 10:16
  48. Chris

    For some reason, all of the examples work fine for me except for the Gentium one–it seems to be rendering in Times New Roman. Any reason why this might be the case?

    August 21st, 2009 at 11:38
  49. John Daggett

    All the examples were done on Mac OS X 10.5 except for the composite example which was also done on Windows XP and Ubuntu 9.

    If it’s not working for you, could you file a bug with the details need to reproduce the problem, especially OS version. There’s a known problem with Gentium on Windows 7, Microsoft introduced a restriction on fonts with license data larger than 5K and this affects Gentium. If they don’t rework their “fix” we’ll have to workaround that problem.

    August 23rd, 2009 at 19:45
  50. […] of apothecary inspiration Jack Pierson — neon signs The making of Phaeton CSS text rotation Beautiful fonts with @font-face Granshan 09 Type Design Competition ‘Punctuation hero’ branded a vandal Blanka: […]

    August 30th, 2009 at 12:23

Comments are closed for this article.