Evangelism/Firefox3.6/WOFF: Difference between revisions

Evangelism/Firefox3.6/WOFF (view source)

Revision as of 02:04, 7 October 2009

1,445 bytes added , 7 October 2009

no edit summary

Jdaggett

241

edits

@@ Line 5: / Line 5: @@
 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  [http://people.mozilla.com/~jkew/woff/woff-spec-latest.html 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 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  [http://people.mozilla.com/~jkew/woff/woff-spec-latest.html 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.  Many font vendors have [http://typegirl.tumblr.com/post/142912558/most-of-the-important-foundries-are-supporting-webfont expressed support for this new format] so the hope is this will open up a wider range of font options for web designers.
-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.
+Compression is part of the WOFF format so web authors can optimize the size
+of fonts used on their pages.  The compression format is lossless, the uncompressed font data will match that of the original OpenType or TrueType font, so the way the font renders will be the same as the original.  Similar compression can be achieved using general HTTP compression but because compression is part of the WOFF format, it's simpler for authors to use, especially in situations where access to server configuration is not possible.
+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 &#147;secure&#148; format by those looking for a mechanism to strictly regulate and control the use of their fonts.
 == Examples ==
-Below is a simple example that shows how to construct an @font-face rule that links to a WOFF font.  To support browsers that only support direct linking to OpenType and TrueType fonts, the <code>'src'</code> descriptor lists the WOFF font first along with a format hint (<code>"woff"</code>), followed by the TrueType version.  Structured this way, browsers that support the WOFF format will download the WOFF file and browsers that don't will download the TrueType version.
+Below is a simple example that shows how to construct an @font-face rule that links to a WOFF font.  To support browsers that only support direct linking to OpenType and TrueType fonts, the <code>'src'</code> descriptor lists the WOFF font first along with a format hint (<code>"woff"</code>), followed by the TrueType version:
 <pre>
@@ Line 26: / Line 29: @@
 </pre>
-As rendered:
+Structured this way, browsers that support the WOFF format will download the WOFF file and browsers that don't will download the TrueType version:
 [[File:Gentiumtest.png|center|link=http://people.mozilla.org/~jdaggett/webfonts/gentium-test.html|Simple cross-browser test]]
+Other examples below demostrate the use of WOFF formatted fonts but each example has been constructed so that it will work in any browser that supports @font-face, including Internet Explorer.
 === A font family with multiple faces ===
@@ Line 38: / Line 44: @@
 [[File:Chunkfivetest.png|center|link=http://people.mozilla.org/~jdaggett/webfonts/chunkfive-test.html|Using a Postscript CFF (.otf) font]]
+=== African Language Display ===
+Below is an example of how downloadable fonts can be used to render languages for which font support is usually lacking.  The example shows the UN Declaration of Human Rights, translated into two African languages, and how these render with default browser fonts vs. with a downloadable font suited for rendering these languages:
+[[File:Charissiltest.png|center|link=http://people.mozilla.com/~jkew/woff/udhr-sample/|African Language Display]]
@@ Line 67: / Line 80: @@
 * [http://people.mozilla.com/~jkew/woff/woff-spec-latest.html Latest draft WOFF specification]
 * [http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/ Original blog post on using @font-face]
-* [http://dev.w3.org/csswg/css3-fonts/ CSS3 Fonts draft]
+* [http://dev.w3.org/csswg/css3-fonts/ CSS3 Fonts working draft]
 * [https://developer.mozilla.org/en/CSS/@font-face MDC @font-face documentation]