Convert TTF to WOFF2

Nothing is redrawn. A TTF is a set of tables — the outlines, the character map, the metrics, the kerning, the OpenType feature definitions — and WOFF2 keeps every one of them, compressed with Brotli after a preprocessing pass that rearranges font data into a shape the compressor handles well. Unwrapping a WOFF2 produces the TTF that went in.

That is why the conversion is lossless and why it takes no thought about quality. There is no setting to get wrong, no resampling, no colour decision. The only thing you can get wrong here is whether you were allowed to do it, which is the next section and the one most tools leave out.

A font is software and is licensed like software. The desktop licence that came with a purchased TTF covers installing it on a stated number of machines and using it to make things; it does not automatically cover putting the file on a web server where anyone can download it. Web use is normally a separate licence, sold separately, and often priced by monthly page views.

Nothing in the file stops you, which is precisely the problem — the conversion takes a second and the breach is invisible until somebody looks. The exception worth knowing is the SIL Open Font License, under which most free fonts are issued: it permits conversion, subsetting and self-hosting, subject to the font not being sold on its own and reserved names not being reused. Read the licence text in the download; it is usually one page.

A font reaches a page through an @font-face rule that gives it a family name, points at the file, and declares which weight and style that particular file represents. The family name is local to your stylesheet and arbitrary — it does not have to match what the foundry called the typeface — and the weight and style declarations are what let the browser pick the right file when text is set bold or italic.

The common mistake is one rule for the whole family. The browser will not refuse to set bold; it will synthesise one by smearing the regular weight, and the result is visibly worse than the real bold sitting unused in the same directory. One rule per file, with honest weight and style values, is the whole discipline.

A retail TTF covers Latin, Latin Extended, Cyrillic, Greek, currency symbols and several hundred glyphs nobody on an English-language site will ever type, and every visitor downloads all of it. Stripping the font to the characters actually needed generally beats what the compression achieves on its own.

Do both, in that order: subset first, then convert. A 300 KB desktop font reduced to basic Latin and wrapped as WOFF2 routinely lands around 25 KB. Be careful with the subsetter, though — told to keep only the characters in use, it will happily discard the ligature and alternate tables as well, and the CSS switching those on then does nothing at all.

A browser told to use a font it has not finished downloading has to decide what to do with the text meanwhile. By default it waits — up to three seconds in most browsers — and shows nothing. That is the flash of invisible text, and it is the single most common reason a site with custom type feels slow on a phone.

One line fixes it: font-display: swap in the @font-face rule draws the text immediately in a fallback and reflows when the real font lands. The reflow is visible and it is far better than a blank page. font-display: optional goes further, skipping the font entirely for that visit if it is not ready almost at once, which removes the reflow at the cost of some visitors never seeing the typeface.

The habit of declaring WOFF2, then WOFF, then TTF, then EOT, then an SVG font in the same rule dates from around 2013 and no longer serves anybody. Every current browser reads WOFF2, including Safari and the mobile browsers, and has for years.

Declaring the one file is the current advice. A browser old enough to miss WOFF2 will fall back to a system font, which is an acceptable outcome and considerably better than maintaining five copies of every weight so that a browser nobody runs gets its preferred one. Fewer files also means fewer chances for one of them to be stale after a typeface update.

Converting a family means converting each file: regular, italic, bold, bold italic, and any additional weights the design actually uses. Each becomes its own WOFF2 and its own @font-face rule under the same family name, and the browser downloads only the ones a page needs.

This is where the page-weight budget is usually lost. Four weights at 25 KB is 100 KB before anything else loads, and most designs use two. Convert what the stylesheet references rather than the whole folder — the unused weights cost nothing on disk and everything in the network waterfall if a rule quietly points at them.

TrueType outlines carry hinting instructions — a small stack-based program per glyph telling the renderer how to distort the shape at small sizes so stems land on whole pixels. Those instructions are tables like any other and survive the wrap into WOFF2 intact.

Whether they earn their bytes is another question. High-density screens have enough pixels that the nudge is invisible, and macOS ignores hinting entirely. On a font with heavy hinting the instructions can be a noticeable fraction of the file, and a subsetter can be told to drop them — worth measuring rather than assuming, and worth keeping if your traffic is Windows-heavy and the type is set small.

This one runs on our server rather than in your browser, because the work is done by fontTools and there is no browser build of it. The file travels over an encrypted connection, is converted in an isolated environment, and the working directory is removed as soon as the job finishes.

The free limit is 25 MB per file. No ordinary typeface comes close — a full-featured TTF with a large character set is a few hundred kilobytes, and a CJK font, which is the one category that gets genuinely large, still sits well inside it.