Web Fonts

If you are translating text that will be displayed on a web page, and your language uses something other than the latin-1 character set (Roman letters plus a few accented ones), you are probably already thinking about how to display the text so that your readers will see it. You can specify a font-family for use, via CSS markup, but the version of the font your user has may not have support for your language's character set. Worse still, the user may not have the font you specify, and it's going to be a total crap-shoot whether their fallback font has your character set or whether the user will see question marks or little boxes instead.

You can of course provide instructions to the user on how to download a font that will show your language correctly, and many web sites do this. But as of Firefox 3.1, you can also use CSS3 tags to provide a direct link to the font for download via the browser. Only fonts that are actually displayed on the page will be downladed, so you needn't figure out which fonts are actually used and encode only those in CSS tags.

First, you define the font family by means of the font-face tag:

@font-face {
  font-family: DejaVu Sans Web;
  src: url(DejaVuSans.ttf) format("truetype");
}

The font family name should be a name that is not the name of a font that is widely installed, if you want the user to be forced to download your version of the font. If the user has a local font with the same name, the user's copy will be used for display instead.

Now you can reference this font family anywhere that you normally would in your CSS markup. For example,

body {
  font-family: DejaVu Sans Web, Lucida Grande, sans-serif;
}

Don't forget to put fallback font faces into your markup; older browsers won't support this tag and they ought to see something specific instead of whatever the user default may happen to be. This ups the odds that the user gets readable text. Note that fonts can be somewhat hard on the dialup connection, so you may want to be economical in your use of multiple typefaces.

Opentype fonts can be included in a similar fashion:

@font-face {
  font-family: STIX General Bold Web;
  src: url(STIXGeneralBol.otf) format("onetype");
}

One complication is that not all current browsers support all types of fonts, and older browsers have varying to no degree of support for the font-family tag. A detailed discussion of this issue is outside of the scope of this book; please see [where?] for more information.

You may want the browser to download the font only in the case that the user does not already have a local copy. (This presumes that the local copy has support for your desired character set.) In this case you will want to add a "local" stanza to the src description, like this:

@font-face {
  font-family: DejaVu Sans Web;
  src: local("DejaVuSans"),
       url(DejaVuSans.ttf) format("truetype");
}

More examples of use of the font-face tag are available on the Mozilla blog: http://hacks.mozilla.org/category/font-face/.