Evangelism/Firefox3.5/35Days/Articles/@font-face: Difference between revisions

Firefox 3.0 improved typographic rendering by introducing support for kerning, ligatures, multiple weights, along with support for rendering complex scripts.  But 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 since version 3.1 supports this type of font linking and Opera has announced planned support 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.

Most font families today consist of only four faces, regular, bold, italic and bold italic.  To define each of these faces the <code>font-weight</code> and <code>font-style</code> 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':

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 [http://mplus-fonts.sourceforge.jp M+ Fonts project] have as many as seven weights.  A selection of these are used in the [http://people.mozilla.org/~jdaggett/demos/multipleweights.html sample] below:

The Helvetica Neue font family is available on most Mac OS X systems but generally not on either Windows or 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 face fails and a substitute font, MgOpen Moderna is downloaded and used instead.  MgOpen Moderna is intended to be a substitute for Helvetica, hence it renders similar to Helvetica Neue.  So an author can guarantee text appearance but avoid a font download when it's not necessary.

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, 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.

Right now, probably no.  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 currently.  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, 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.

For Firefox 3.5, the [https://bugzilla.mozilla.org/show_bug.cgi?id=3512 <code>font-stretch</code>] and [https://bugzilla.mozilla.org/show_bug.cgi?id=475891 <code>unicode-range</code>] descriptors are not supported.  [https://bugzilla.mozilla.org/show_bug.cgi?id=119490 Fonts defined in SVG documents] are also not supported yet.  These are under consideration for inclusion in future releases.  As always, patches welcome!