Mithgol July 16, 2009 at 15:10

Fine fonts with @ font-face

Transfer
Tutorial

Although Firefox 3.0 improved the display of fonts, introducing support for kerning, ligatures, various thicknesses, as well as support for displaying complex styles, nevertheless, the authors limited the use of publicly available fonts in their designs. Firefox 3.5 removes this restriction by introducing support for the CSS @ font-face rule - this is a way to attach TrueType and OpenType fonts in the same way that code and illustrations are now attached. The Safari browser has supported this type of hyperlink with the font, starting from version 3.1, and Opera announced that they plan to support it in Opera 10.

Using @ font-face for hyperlinking with the font is relatively easy. Inside the style file, each @ font-face propertyspecifies the font family name to be used, and the font resource to be loaded, and the style characteristics of the given style — say, whether it is bold or italic. Firefox 3.5 downloads fonts only as needed, so a style file can specify a complete set of fonts, of which only selectively a few will be used in reality.

/* 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 display text using Graublau Sans Web, while older browsers will display text using either Lucida Grande or the default style for sans-serif. Here is an example :

Dig a little deeper

Today, most font families consist of only four styles: regular, bold, italic, and bold italic. To define each of these styles, the font-weight and font-style descriptors are used . They define the style of the outline; the principles of cascading and inheritance do not apply to them here. Without being explicitly set, each of them defaults to “normal”:

/* Gentium by SIL International   */
/* http://scripts.sil.org/gentium */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> по умолчанию normal */
}
@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
}
body { font-family: Gentium, Times New Roman, serif; }

The text of the example is shown below displayed using this font family:

There is a feature that is easy to overlook: @ font-face allows you to create families with more faces than just normal and bold - up to nine values of fat content can be defined within a single family. This is true even for Windows, where the platform’s internal flaws usually limit the font family to just the normal and bold fat content. Existing fonts, like the Japanese M + Fonts project (open source), have as much as seven bolds. As an example, we will select them:

In some circumstances, authors may prefer to use fonts available to the reader locally, and download fonts only when the corresponding styles are not available. This is possible if you use “local ()” when specifying the “src” descriptor in the @ font-face rule . The browser will sequentially try the elements of the font list from the "src" descriptor until it successfully downloads the desired font.

/* 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; }

Here is a screenshot showing the top-down display results for Mac OS X, Windows, and Linux of a simple example using the font family defined above:

The font family Helvetica Neue is available on most Mac OS X systems, but is usually not available on Windows and Linux machines. When this example is displayed on Mac OS X, Helvetica Neue local styles are used and no font is downloaded. On Windows and Linux, an attempt to load a local font fails, and a wildcard font (MgOpen Moderna) is downloaded and used instead. MgOpen Moderna was planned as a replacement for Helvetica, so it appears similar to Helvetica Neue. In this way, the author can provide the desired appearance of the text, but avoid downloading the font when there is no need.

The name used to refer to a particular font style is the full name of the individual font. This is usually the name of the family plus the name of the style (for example, “Helvetica Bold”). On Mac OS X, the name appears in the dashboard for the specified style. Select one style and select “Show Font Info” from the “Preview” menu in FontBook:

Similar tools exist under Linux. For Windows, use the font property extension , a free Microsoft download tool for viewing these names. When the extension is installed, the property panel displays information about the individual font. The full name is indicated as “Font Name” on the “Name” tab:

Safari on Mac Os X only supports searching by PostScript names, so Postscript names on Mac OS X are also supported. For OpenType PS fonts (usually marked with the .otf extension), the full name is the same as the postscript name for Windows. So for these fonts, authors are advised to specify both the full name and the postscript, and thereby achieve cross-platform performance.

Multi language support

Many languages suffer from a lack of publicly available fonts. In cases with minority dialects and ancient styles, the choice is literally narrowed to a handful. Using @ font-face allows authors using such languages to improve things by connecting fonts to 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 need a change in the shape of the text in which the characters surrounding it affect the display of a given character. Different platforms use different rendering technologies to make changing the shape of the text possible; Mac OS X requires AAT fonts, while Windows and Linux require OpenType fonts. If there is no font in the format required by this platform, changing the shape of the text will not be displayed 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, downloading the AAT font is skipped, and the OpenType font is used instead. Therefore, the text is displayed correctly on all platforms.

Cross-site font usage

By default, Firefox 3.5 allows fonts to be downloaded only for pages received from the same site. This prevents sites from using fonts found on other sites for free and for free. For sites that clearly want to allow cross-site font sharing (for example, an online font library), Firefox 3.5 supports the use of access control headers that control this behavior. By adding an additional header to the HTTP headers sent with font files, sites can make cross-site use possible.

# пример .htaccess-файла Apache для добавления заголовка контроля доступа

Header set Access-Control-Allow-Origin "*"

When this HTTP header is enabled, any page gains access to the fonts of this site, not just pages from the same site.

Font licensing issues

When a font is used on a site, it is always important to make sure that the font license allows its use on the site. If the license agreement is full of vague legal terms, check with the font provider before using the font on the site. If the license permits its use, then it would be nice to add a comment next to the @ font-face rules indicating the license for future reference.

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

Maybe; and maybe not. Some free fonts are distributed as promotional, inviting products (to encourage them to be purchased) - and they are not allowed to distribute on their own or put on a server on the Web. Check your license, even for free fonts.

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

Most likely not right now. The use of attached fonts on the Web has barely begun. Most fonts that now come with proprietary operating systems have licenses restricting their use to standard desktop applications, so downloading these fonts to a web server is almost certainly not allowed. In the past, font production was in great need of piracy, so most font manufacturers are wary of allowing their fonts to be used outside of relatively limited contexts. Many font providers have focused on the needs of the printing industry, which often reflects on the comparative complexity of their licenses. In the future, some font designers may come to the conclusion that selling fonts as Web fonts will exceed any potential damage to sales from piracy, while others may not come to that conclusion. Licensing agreements will reflect their choice, and they should be treated with respect.

The photo sales market is often called the two-billion dollar market, and the Web font market is still close to zero, so it can only grow!

Font hooking in Internet Explorer

Font hooking has long been possible in Internet Explorer, but only 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, and OpenType PS (.otf) fonts cannot be used.

In @ font-face rules, Internet Explorer only accepts font-family and src descriptors , so each family can contain only one style. It does not understand format () instructions and will ignore any @ font-face rule ,containing such instructions. This behavior can be used to enable font hooking cross-platform:

/* Определение шрифта для Internet Explorer */
/* (*должно* стоять первым) */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* нельзя использовать format() */;
}
/* Определение шрифта для других браузеров */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");
}

Future work

In Firefox 3.5, the font-stretch and unicode-range descriptors are not supported. Fonts defined in SVG documents are also not yet supported. Their introduction in future releases of Firefox is considered. As always, patches are welcome!

For further reading

Documentation

Examples

Font Resources

Font Policy

Tags: