TTF to WOFF Converter

What WOFF adds to a TTF

WOFF 1.0 wraps an existing sfnt font for web delivery. The W3C Recommendation defines a 44-byte header, a table directory, the font tables, then an optional extended metadata block and an optional private data block. Each table may be compressed individually with the zlib compress2() function. The font itself is untouched: the spec requires the same set of tables as the input font, and requires that a decoder restore them so the font displays identically.

Two things the wrapper buys that raw .ttf hosting does not. The container is font-specific, so a browser can reject a malformed file before handing it to the rasteriser, and the metadata block gives a foundry somewhere to state licensing and credits that travels with the file rather than sitting in a text file nobody reads.

WOFF or WOFF2?

WOFF2, for anything you actually serve. It compresses the whole font with Brotli instead of compressing each table with zlib, and it preprocesses glyf, loca and hmtx first so the compressor has less to work with. WOFF 1.0 is worth generating only as a fallback source for browsers that predate WOFF2 support, and on most sites that audience is now too small to justify the second file. Generate the primary with TTF to WOFF2 and add this one only if your analytics say you need it.

@font-face {
  font-family: 'Example Sans';
  src: url('/fonts/example-sans.woff2') format('woff2'),
       url('/fonts/example-sans.woff') format('woff');
  font-display: swap;
}

The browser takes the first entry whose format() it recognises, so WOFF2 is listed first and the WOFF line is only ever reached by an engine that cannot read the line above it.

Round-tripping

Because WOFF preserves table data rather than re-rendering outlines, unwrapping gives the font back unaltered, and WOFF to TTF does exactly that. The file will not always be byte-identical to the original: the spec makes the table directory rebuild in ascending tag order, and any unreferenced padding in the source is dropped when the WOFF is made. For a well-formed input font, with correct padding, correct checksums and no extraneous data between tables, the round trip preserves everything that affects rendering.

Related font conversions

• TTF to WOFF2 for the file that should be first in your src list.
• WOFF to TTF to unwrap a web font again.
• OTF to TTF when the source family has PostScript outlines.
• Font to Base64 to inline a small face into CSS instead.
• Format hubs: WOFF, WOFF2, TTF and OTF.