Web Open Font Format in Firefox 3.6
- Transfer
This article was written by John Daggett, a Mozilla employee who worked extensively with font designers and web programmers to improve the position of fonts on the web. The article is a superficial overview of new features and contains some examples of the application of WOFF (Web Open Font Format). A complete list of other organizations working in this area can be found on the official Mozilla blog ( archive ).
In Firefox 3.5, we have included support ( archive ) for connecting TrueType and OpenType fonts. In Firefox 3.6, we will include support for the new Web Open Font Format or WOFF font format, which has two main advantages over raw TrueType and OpenType:
- this is a compressed format, which means you will see a much smaller amount of downloaded data than when using raw TrueType or OpenType;
- it contains information about where this font came from, but without DRM or signatures for a specific domain, this means that it is supported ( archive ) by many designers and organizations involved in fonts.
WOFF fonts born as a result of cooperation of designers Erik van Blokland ( Erik van Blokland ( archive )) and Tola Leming ( Tal Leming ( file )). They were assisted by Jonathan Kew of Mozilla. Everyone suggested ( archive) its format and WOFF is a merger of these proposals. The format was planned as a simple repackaging of OpenType and TrueType, it does not present new features, alternatives to the @ font-face connection mechanism or a new rendering method. Many font manufacturers have expressed support ( archive ) for the new format, so there is hope that this format will open new horizons for web designers.
First, compression is now part of WOFF, and webmasters can reduce the size of their pages using compressed fonts. The new format uses lossless compression, so that the unpacked font matches the original OpenType or TrueType, which allows you to leave the rendering mechanism unchanged. Such compression can be obtained by HTTP compression, but since compression is included in the WOFF format itself, it is easier to use, especially in situations where there is no access to the server settings.
Secondly, the format includes additional metadata into which the font manufacturer may include information about the use of the font. This information does not affect how this font is downloaded, but allows you to determine the origin of this font, so those interested in the font used on the web page can trace which font is used. Fonts in WOFF are compressed, but not encrypted, this format was not created as a protected format for those who want to tightly control the use of the font.
Until Firefox 3.6 comes out, you can test WOFF in the nightly builds of Firefox.
Below is a simple example that shows how to write an @ font-face rule to connect a WOFF font. For the correct operation of browsers that support only direct connection of OpenType and TrueType fonts, we write the font in the src descriptor WOFF first, indicating the type "woff", and the TrueType version of the font after it:
Browsers supporting WOFF will download the WOFF file, while other browsers that support @ font-face but still do not support WOFF will use the TrueType version. As WOFF spreads, the need to provide links to several font formats will decrease.
Other examples below show how to use WOFF fonts, so that they work in any browser that supports @ font-face, including Internet Explorer.
Below is an example of how downloadable fonts can be used to display less supported languages. An example shows the Declaration of Human Rights translated into two African languages, and how it will be displayed in standard browser fonts versus a downloadable font suitable for displaying these languages.
Please note that in the first case 3.1 MB TTF file was compressed to 1 MB WOFF, and in the second 172KB TTF file was compressed to 80KB WOFF.
Firefox 3.6 will be the first released browser with WOFF support, and it’s important to make @ font-face rules that will work correctly on browsers without WOFF support. In this case, explicitly indicating the type of font helps to indicate the format before downloading it, browsers that do not support the specified type will simply ignore it.
Internet explorer, including IE8, supports only the EOT format and does not fully support @ font-face. This makes writing the cross-browser @ font-face rule especially tricky. One solution is to write several different rules:
An unpleasant moment is that IE does not understand the format hints and does not recognize the @ font-face URL correctly, so webmasters will see these log entries:
IE successfully downloads the EOT version of the font, but still tries to load the WOFF file, despite the available prompt. This attempt is unsuccessful, and although it does not affect the display of the page, it consumes server resources. Discussion of the problem can be found in the blog ( archive ) of Paul Irish.
Another problem with IE is that it tries to download all font files, whether they are used or not. This makes it difficult to use a single CSS file for the entire site, since IE will try to load all the fonts specified there, wasting traffic. (This will negatively affect both the server and the client. Note by the translator.)
Documentation
Latest draft WOFF specification
Original the blog the post on using the @ font-face
of CSS3 Fonts working draft
the MDC @ font-face documentation
tools
of Jonathan Kew's sample The encoding / DECODING below code
woffTools - tools for Examining and Validating Moderators Cookie Family WOFF files is
FontTools / the TTX - the Python library and tool for manipulating font data
Web-based font subsetting tool
Use cases @ font-face
CSS @ Ten: The Next Big Thing
Example layout using Graublau Sans
Examples of Interesting Web Typography
The Elements of Typographic Style Applied to the Web Font
Sources
Font Squirrel
10 Great Free Fonts for @ font-face
40 Excellent Free Fonts by Smashing Magazine
In Firefox 3.5, we have included support ( archive ) for connecting TrueType and OpenType fonts. In Firefox 3.6, we will include support for the new Web Open Font Format or WOFF font format, which has two main advantages over raw TrueType and OpenType:
- this is a compressed format, which means you will see a much smaller amount of downloaded data than when using raw TrueType or OpenType;
- it contains information about where this font came from, but without DRM or signatures for a specific domain, this means that it is supported ( archive ) by many designers and organizations involved in fonts.
WOFF fonts born as a result of cooperation of designers Erik van Blokland ( Erik van Blokland ( archive )) and Tola Leming ( Tal Leming ( file )). They were assisted by Jonathan Kew of Mozilla. Everyone suggested ( archive) its format and WOFF is a merger of these proposals. The format was planned as a simple repackaging of OpenType and TrueType, it does not present new features, alternatives to the @ font-face connection mechanism or a new rendering method. Many font manufacturers have expressed support ( archive ) for the new format, so there is hope that this format will open new horizons for web designers.
Details of the differences between TrueType, OpenType, and WOFF
First, compression is now part of WOFF, and webmasters can reduce the size of their pages using compressed fonts. The new format uses lossless compression, so that the unpacked font matches the original OpenType or TrueType, which allows you to leave the rendering mechanism unchanged. Such compression can be obtained by HTTP compression, but since compression is included in the WOFF format itself, it is easier to use, especially in situations where there is no access to the server settings.
Secondly, the format includes additional metadata into which the font manufacturer may include information about the use of the font. This information does not affect how this font is downloaded, but allows you to determine the origin of this font, so those interested in the font used on the web page can trace which font is used. Fonts in WOFF are compressed, but not encrypted, this format was not created as a protected format for those who want to tightly control the use of the font.
Until Firefox 3.6 comes out, you can test WOFF in the nightly builds of Firefox.
Examples
Below is a simple example that shows how to write an @ font-face rule to connect a WOFF font. For the correct operation of browsers that support only direct connection of OpenType and TrueType fonts, we write the font in the src descriptor WOFF first, indicating the type "woff", and the TrueType version of the font after it:
/ * Gentium (SIL International) * /
@ font-face {
font-family: GentiumTest;
src: url (fonts / GenR102.woff) format ("woff"),
url (fonts / GenR102.ttf) format ("truetype");
}
body {
font-family: GentiumTest, Times, Times New Roman, serif;
}
Browsers supporting WOFF will download the WOFF file, while other browsers that support @ font-face but still do not support WOFF will use the TrueType version. As WOFF spreads, the need to provide links to several font formats will decrease.
Other examples below show how to use WOFF fonts, so that they work in any browser that supports @ font-face, including Internet Explorer.
Multi-typeface font family
Using Postscript CFF
Mapping African Fonts
Below is an example of how downloadable fonts can be used to display less supported languages. An example shows the Declaration of Human Rights translated into two African languages, and how it will be displayed in standard browser fonts versus a downloadable font suitable for displaying these languages.
Please note that in the first case 3.1 MB TTF file was compressed to 1 MB WOFF, and in the second 172KB TTF file was compressed to 80KB WOFF.
Another Postscript CFF Font
Japanese example
Work with other browsers
Firefox 3.6 will be the first released browser with WOFF support, and it’s important to make @ font-face rules that will work correctly on browsers without WOFF support. In this case, explicitly indicating the type of font helps to indicate the format before downloading it, browsers that do not support the specified type will simply ignore it.
Internet explorer, including IE8, supports only the EOT format and does not fully support @ font-face. This makes writing the cross-browser @ font-face rule especially tricky. One solution is to write several different rules:
@ font-face {
font-family: GentiumTest;
src: url (fonts / GenR102.eot); / * for IE * /
}
@ font-face {
font-family: GentiumTest;
/ * Works only with browsers supporting WOFF * /
src: url (fonts / GenR102.woff) format ("woff");
}
An unpleasant moment is that IE does not understand the format hints and does not recognize the @ font-face URL correctly, so webmasters will see these log entries:
GET /fonts/GenR102.eot HTTP/1.1" 200 303536
GET /fonts/GenR102.woff)%20format(%22woff%22) HTTP/1.1" 404 335IE successfully downloads the EOT version of the font, but still tries to load the WOFF file, despite the available prompt. This attempt is unsuccessful, and although it does not affect the display of the page, it consumes server resources. Discussion of the problem can be found in the blog ( archive ) of Paul Irish.
Another problem with IE is that it tries to download all font files, whether they are used or not. This makes it difficult to use a single CSS file for the entire site, since IE will try to load all the fonts specified there, wasting traffic. (This will negatively affect both the server and the client. Note by the translator.)
Additional Resources
Documentation
Latest draft WOFF specification
Original the blog the post on using the @ font-face
of CSS3 Fonts working draft
the MDC @ font-face documentation
tools
of Jonathan Kew's sample The encoding / DECODING below code
woffTools - tools for Examining and Validating Moderators Cookie Family WOFF files is
FontTools / the TTX - the Python library and tool for manipulating font data
Web-based font subsetting tool
Use cases @ font-face
CSS @ Ten: The Next Big Thing
Example layout using Graublau Sans
Examples of Interesting Web Typography
The Elements of Typographic Style Applied to the Web Font
Sources
Font Squirrel
10 Great Free Fonts for @ font-face
40 Excellent Free Fonts by Smashing Magazine