The Web Open Font Format (WOFF)

  • Revision slug: WOFF
  • Revision title: About the Web Open Font Format (WOFF)
  • Revision id: 338339
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

WOFF (the Web Open Font Format) is a new web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It uses a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired.

There are three main benefits to using WOFF:

  1. The font data is compressed, so sites using WOFF will use less bandwidth and will load faster than if they used equivalent uncompressed TrueType or OpenType files.
  2. Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. This improves availability of fonts to site designers.
  3. Both proprietary and free-software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.

Using WOFF

You can use the {{ cssxref("@font-face") }} CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except will likely let your content download more efficiently due to the addition of compression.

Specifications

Specification Status Comment
{{SpecName('WOFF1.0', '', '')}} {{Spec2('WOFF1.0')}} Initial specification.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatUnknown() }} {{ CompatGeckoDesktop("1.9.2") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • {{ cssxref("@font-face") }}
  • {{ CSS_Reference:Fonts() }}

Revision Source

<p><strong>WOFF</strong>&nbsp;(the <em>Web Open Font Format</em>) is a new web font format developed by Mozilla in concert with Type Supply, LettError, and other organizations. It uses a compressed version of the same table-based sfnt structure used by TrueType, OpenType, and Open Font Format, but adds metadata and private-use data structures, including predefined fields allowing foundries and vendors to provide license information if desired.</p>
<p>There are three main benefits to using WOFF:</p>
<ol>
  <li>The font data is compressed, so sites using WOFF will use less bandwidth and will load faster than if they used equivalent uncompressed TrueType or OpenType files.</li>
  <li>Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF&nbsp;format fonts. This improves availability of fonts to site designers.</li>
  <li>Both proprietary and free-software browser vendors like the WOFF&nbsp;format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.</li>
</ol>
<h2 id="Using_WOFF">Using WOFF</h2>
<p>You can use the {{ cssxref("@font-face") }}&nbsp;CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except will likely let your content download more efficiently due to the addition of compression.</p>
<h2 id="Notes" name="Notes">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{SpecName('WOFF1.0', '', '')}}</td>
      <td>{{Spec2('WOFF1.0')}}</td>
      <td>Initial specification.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Chrome for Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ cssxref("@font-face") }}</li>
  <li>{{ CSS_Reference:Fonts() }}</li>
</ul>
Revert to this revision