What WOFF2 does to a TTF that gzip cannot
TTF and OTF are desktop formats. They are what a foundry sells you, what Figma and Adobe applications install, and what your operating system’s font folder holds. Nothing in their design anticipated being fetched over a network on the critical path of a page render.
WOFF2 is that same font data in a wrapper built for exactly that. Its advantage over simply gzipping the TTF comes from knowing what it is compressing. Before the general-purpose Brotli pass runs, the encoder transforms the glyph outline tables into a representation that compresses far better: point coordinates get split into separate streams and re-encoded, the glyph offset table is largely reconstructible rather than stored, and per-table checksums that a decoder can recompute are dropped. Brotli then works on data that has already been reshaped in its favour. A generic compressor sees only opaque bytes and cannot do any of that, which is why the result is smaller than the same font handed to a general-purpose transport compressor, because the transform understands what the bytes mean.
Practically, that is one fewer render-blocking-shaped delay before your text appears in the right typeface. The tool shows one before and after total for the whole batch, plus the size of every file it hands back, so you can see the actual number for your actual font rather than trusting a range.
Choosing a direction before you drop the file
- Set Direction. The default, TTF/OTF to WOFF2, is the website case. Switch it only if you are going backwards.
- Drop one font or several into the box. Batches are processed in sequence with the progress bar tracking files completed.
- Press Convert TTF to WOFF2. A small batch of fonts finishes without a meaningful wait.
- Collect the downloads and check the size comparison.
The direction is a real switch and not a hint, which is deliberate. Hand a .woff2 to the forward direction and you get an error naming your file and telling you which option to flip, instead of a nonsense double-compressed result. The same happens in reverse for a .ttf. Guessing from the file extension would have been easy to write and would have silently done the wrong thing for anyone whose file was misnamed, so we made the choice explicit and the mismatch loud.
The @font-face file, and where the family name comes from
Converting forwards gives you two downloads per font: the .woff2 itself and a small .css file holding a complete @font-face rule with the src URL already pointing at the converted filename, font-display: swap set, and the family name filled in.
That name is read out of the font rather than guessed. Fonts carry a name table with numbered records, and we look for the typographic family name first, falling back to the plain family name, preferring the Windows platform record over the old Macintosh one when a font ships both. Windows records are UTF-16 and Mac records are single-byte, so the two need decoding differently; getting that wrong produces family names with a null byte between every letter, which is a classic and very visible bug. When the table cannot be read at all the name comes from your filename with separators turned into spaces, so Inter-Regular.ttf becomes Inter Regular. Quotation marks and backslashes in a family name are escaped for CSS.
Read the snippet before pasting it. The weight and style lines are placeholders, as the FAQ below explains, and a family of four static styles needs four rules with four different weight values rather than four copies of the same one. Once the rules are in place, Minify CSS will squeeze the stylesheet that references them.
Going back to TTF, and what that direction is for
The reverse direction exists for one specific situation: the only copy of a face you have is the compressed asset a site serves, and you need something a font editor will open. Decoding is not lossy in the sense that matters, since all the outline and metric data is reconstructed faithfully, but the resulting file is a freshly built sfnt rather than a bit-perfect copy of whatever the original was. No CSS snippet is generated for this direction, because a TTF is not what you should be putting on a website.
Do keep in mind that being able to decode a font says nothing about being allowed to use it. Retrieving a webfont from a site’s network panel and installing it locally is a licensing question, not a technical one. If what you are really after is a small set of icons rather than a typeface, a favicon set from the Favicon Generator or a cleaned-up vector from the SVG Optimizer will serve you far better than an extracted font file.
Why the encoder runs in your tab rather than on our server
The engine here is wawoff2, a WebAssembly build of Google’s own reference woff2 encoder and decoder, which is the same codebase the command line tools and build plugins wrap. We checked the compiled bindings for SharedArrayBuffer and pthread usage before adopting it and found none, which matters on this site because the COOP and COEP headers that threaded WebAssembly demands would break our ad frames. The wasm binary is embedded in the JavaScript as a data URI, so there is no extra asset fetch at runtime either.
The upshot for you is that a licensed commercial typeface, or a custom face a designer cut for one brand, never travels anywhere to have its container changed. It is read, converted and handed back inside the tab. Font files are among the most tightly licensed assets a site carries, and “we only uploaded it to convert the format” is not a distinction most licence agreements recognise.