The latest beta and the nightly builds of Firefox 3.1 now support webfonts. Here is a sneak peek at the features and the differences to Safari’s @font-face support.
With the new render engine, introduced in Firefox 3.0, the quality of the displayed webfonts is now similar to Safari:
(The poor quality in IE 7 is caused by the fact, that IE still doesn’t support subpixel rendering for PostScript-flavoured OpenType fonts.)
Ligatures and Kerning
But Firefox not only catches up to Safari. With support for automatic ligatures and kerning, Firefox 3.1 might offer the best web typography ever.
The current builds still have a problem with contextual ligatures/alternates, which are usually needed in script typefaces and all writing systems which use ligatures.
In contrast to Safari, Firefox will currently only display fonts using a relative link. Linking fonts located on different domains is not possible with the default settings. At first glance this sounds like a good idea, but it would also prevent any sort of font service (as proposed by me and others). Hopefully this behavior can be bypassed with the use of Access Control Headers for webfonts, which are supposed to be implemented in the final release of Firefox 3.1.
Display text while downloading?
Safari will not display any text before the webfont is fully downloaded, but Firefox will use one of the available local fonts to display the text during the download. Once the download is complete, the text will reflow with the webfont. This issue is also known to web designers using sIFR. Usually web designers choose to turn this behavior off when using sIFR, because such an unexpected text reflow can be really irritating to a visitor, who has already started reading the text. So, what do you think? Which behavior do you prefer?
This problem is connected to the file size of fonts. A typical font with a character set like Latin 1 usually just has a file size of around 50 kilobyte and it is usually no problem to wait for such a small file to load. But if you are using fonts with larger character sets, loading times become a real issue. For example, if you want to link the usual 4 styles (regular, italic, bold and bold italic) of fonts like Linux Libertine or Charis SIL, your visitors need to download around 5 megabytes (!) of font data. A way to work around this problem would be the use of the unicode-range descriptor. This is already available in Safari, but not yet in the latest Firefox builds. With the unicode-range descriptor a font can be broken down to several files for the different codepages (Latin 1, Cyrillic, Greek…), and the browser will only download the files needed for the text on the website.