Mozilla

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 (www.fonts.info) */
 
@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   */
/* http://scripts.sil.org/gentium */
 
@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                      */
/* http://www.zvr.gr/typo/mgopen/index */
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"), 
       local("HelveticaNeue"), 
       url(MgOpenModernaRegular.ttf);
}
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  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 "*"
</IfModule>
</FilesMatch>

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

Translations

Documentation

Examples

Font Resources

Font Politics

177 comments

Comments are now closed.

  1. Pingback from 精通 CSS 样式设计元素 « 前端设计 on January 28th, 2010 at 00:13:

    [...] Beautiful fonts with @font-face 关于 @font-face 属性的基本使用教程,以及如何在网页设计中插入 Truetype 字体。 [...]

  2. Pingback from 쉬운 예제로 보는 웹 폰트와 css 특징들 ✩ Mozilla 웹 기술 블로그 on April 20th, 2010 at 02:58:

    [...] fonts 각 버튼들은 @font-face를 사용하여 선언된 고유 폰트로 렌더링할 수 있습니다. 예를 들면 다음과 [...]

  3. Pingback from Modern CSS Layouts, Part 2: The Essential Techniques - Smashing Magazine on May 16th, 2010 at 08:08:

    [...] [...]

  4. Jared Stein wrote on May 24th, 2010 at 11:33:

    .htaccess header ftw! Thanks for sharing that.

  5. Webstandard-Blog wrote on June 7th, 2010 at 00:11:

    Very nice, but the best thing on it is the growing support of that feature by all the (important) browsers

  6. Pingback from Google soutient les fontes web on June 21st, 2010 at 02:16:

    [...] des fontes.  Les fontes étant libres, on peut aussi les utiliser sur son serveur de façon traditionnelle. Bonjour. Je m’appelle Inigo Montoya. Vous avez tué mon père. Préparez-vous à [...]

  7. Jane wrote on July 5th, 2010 at 00:12:

    Great trick to add fonts, will give it try, thanks for sharing!

  8. Nelson wrote on August 4th, 2010 at 16:58:

    Very useful article. Especially the IE part!

    Thank you!

  9. malaysia wec meet up wrote on September 23rd, 2010 at 22:18:

    Every now and again designers stumble upon the very same problem: the choice of a unique and beautiful typeface which manages to fulfill three basic tasks. Support the corporate identity, enrich the visual appearance and is compatible with the overall design. However, usually there are simply too many options you can consider, which is why you need time to find the option you are most comfortable with. Although the choice usually depends on clients’ requirements, it is necessary to have some pretty starting points for your font decision.

  10. the frozen boy wrote on October 28th, 2010 at 03:05:

    Do you know that Firefox 3.5 only allows fonts to be loaded for pages served from the same site. This is actually a drawback.

  11. Anas wrote on January 21st, 2011 at 06:12:

    Thank you for this great info, What you are saying that Firefox 3.5 and up can render arabic text correctly under Mac OS X, but it’s not, I tried your example on FF3.6.13 any OS is Mac OS X 10.6.6.
    FireFox renders the text with default font, it doesn’t render it correctly.

    Your example words only on Firefox 4.
    if you have any tips any idea, how to apply font-face for arabic text on FF3.5 I’ll be grateful.
    regards

  12. Harv wrote on March 30th, 2011 at 10:08:

    I’m having a problem displaying @font-face in Firefox on pages with SSL. All other browsers render it properly. When I change the path to the fonts in the stylesheet to absolute and use https://www… @font-face fails throughout the site on all browsers.

    Any ideas what could be causing this? Mixed content issue?

  13. nikeairus wrote on April 14th, 2011 at 22:57:

    Thank you for your sharing make me learn more about the fonts.I want to beautiful fonts.

  14. Jakykong wrote on May 30th, 2011 at 02:52:

    I thought I would add that, running under Linux at least, there is the mkeot command, available in the eot-utils package. Microsoft’s tool isn’t the only one on the market any more :).

  15. Pingback from Ultimate Guide of Web Typography Tutorials, Tips and Best Practices | CS5 Design on June 9th, 2011 at 04:29:

    [...] Beautiful fonts with font face [...]

  16. Pingback from Web Typography Tutorials, Tips and Best Practices « GRAPHIC & WEB DESIGN GUIDE RESOURCE on June 26th, 2011 at 09:33:

    [...] Beautiful fonts with font face [...]

  17. Pingback from How to Achieve Cross-Browser @font-face Support « ARM9 & Embedded System on July 5th, 2011 at 19:37:

    [...] If it is, we don’t want to download the font over the network. There are two of them because Safari only supports the postscript font name, so when the postscript name differs from the normal name, you should include both. The next format [...]

  18. Pingback from Can someone explain how fonts work with HTML? - SitePoint Forums on July 20th, 2011 at 22:40:

    [...] [...]

  19. Emisy wrote on August 3rd, 2011 at 02:46:

    However, usually there are simply too many options you can consider, which is why you need time to find the option you are most comfortable with.Very nice, but the best thing on it is the growing support …

  20. Pingback from Використання нестандартних шрифтів на сайті « Skinik’s Blog on August 23rd, 2011 at 14:34:

    [...] beautiful fonts with @font-face [...]

  21. Devve Knulle wrote on August 26th, 2011 at 12:09:

    THANK YOU for this, helps when using the Web Developer Extension, my web fonts weren’t appearing when I went to “Edit CSS”, using the local method made them appear.

  22. Lisa wrote on August 31st, 2011 at 12:12:

    Anyone managed to solve the issue with @fontface on Firefox with ssl?

  23. Pingback from Name that font! Finding the right name for a CSS font stack « Rachael L. Moore on September 12th, 2011 at 12:05:

    [...] http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ Back Matter [...]

  24. Incisive Point Interactive wrote on November 25th, 2011 at 11:00:

    I try it but sometimes it’s not works in slow connection. I think the font file is not loaded.

  25. Ryan wrote on September 5th, 2012 at 23:37:

    thanks for the in depth info. the fontsquirrel generator worked like a charm!

1 2 3 4

Comments are closed for this article.