Evangelism/Firefox3.6/WOFF: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
== Introducing support for WOFF == | == Introducing support for the WOFF font format == | ||
Support for the CSS @font-face rule was introduced in Firefox 3.5, a way of linking directly to TrueType and OpenType fonts. For Firefox 3.6, support for the WOFF font format has been added. The WOFF format is a simple way of packaging fonts for the web, the fonts are compressed so they are typically smaller than directly linked OpenType or TrueType fonts. | Support for the CSS @font-face rule was introduced in Firefox 3.5, a way of linking directly to TrueType and OpenType fonts. For Firefox 3.6, support for the WOFF font format has been added. The WOFF format is a simple way of packaging fonts for the web, the fonts are compressed so they are typically smaller than directly linked OpenType or TrueType fonts. | ||
Revision as of 08:24, 6 October 2009
Introducing support for the WOFF font format
Support for the CSS @font-face rule was introduced in Firefox 3.5, a way of linking directly to TrueType and OpenType fonts. For Firefox 3.6, support for the WOFF font format has been added. The WOFF format is a simple way of packaging fonts for the web, the fonts are compressed so they are typically smaller than directly linked OpenType or TrueType fonts.
The WOFF format originated from a collabaration between the font designers Erik van Blokland and Tal Leming and Mozilla's Jonathan Kew. Each had proposed their own format and WOFF represents a melding of these different proposals. The format itself is intended to be a simple repackaging of OpenType or TrueType font data, it doesn't introduce any new behavior, alter the @font-face linking mechanism or affect the way fonts are rendered.
The format includes optional metadata so that a font vendor can tag their fonts with information related to their use. This metadata doesn't affect how fonts are loaded but tools can use this information to identify the source of a given font, so that those interested in the design of a given page can track down the fonts used on that page. Fonts in WOFF format are compressed but are not encrypted, the format should not be viewed as a "secure" format by those looking for a mechanism to strictly regulate and control the use of their fonts.
A Simple Example
/* 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;
}
Simple test:
Other Examples
A font family with multiple faces:
Using a Postscript CFF font:
Another Postscript CFF font:
An example in Japanese:
Working With Other Browsers
Firefox 3.6 will be the first shipping browser to support the WOFF format so it's important to construct @font-face rules that work with browsers lacking WOFF support. One thing that helps greatly with this is the use of format hints to indicate the format of font data before it's downloaded; browsers that don't recognize a given format simply skip data in a format they don't support.
Internet Explorer, including IE8, only support the EOT font format and only implements a subset of the @font-face rule descriptors. This makes creating cross-platform @font-face rules that work with IE especially tricky. See Paul Irish's blog post for one interesting technique.
Note: until Firefox 3.6 ships, users can test the use of WOFF fonts with Firefox nightly builds.
Future Work
OpenType features, support for unicode-range and improved ClearType rendering.
Further Resources
Documentation
- Latest draft WOFF specification
- Original blog post on using @font-face
- CSS3 Fonts draft
- MDC @font-face documentation
Tools
Examples
- 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