English ▾
Free, Fast & Secure Online Tools
WOFF stands for Web Open Font Format, and the first thing to understand is that it is not a new kind of font. It is a wrapper: an existing TrueType or OpenType font, compressed, with a little metadata attached, packaged so a browser can download it quickly.
The letterforms inside are unchanged. What changed is how efficiently they travel.
The practical advice is unusually simple: serve WOFF2 only. The older fallbacks that web guides used to recommend — WOFF, TTF, EOT, SVG fonts — are now dead weight that every visitor’s browser ignores.
TTF and OTF do work in browsers, but they carry desktop baggage the web does not need and are substantially larger. They belong on your computer, not in a page.
Here is where web fonts stop being a solved problem, and it is worth stating in numbers.
A Latin font covers perhaps 200 to 400 characters — the alphabet, digits, punctuation, accents. As WOFF2 that is typically 20 to 50 KB. Trivial.
A Chinese font must cover thousands of characters. A font supporting common Traditional or Simplified Chinese runs to 6,000 to 20,000 glyphs, and as WOFF2 that is typically 3 to 15 MB — for one weight. Japanese and Korean are comparable.
That is a hundred times the size, and it is not a compression problem anyone can fix: the font genuinely contains that many distinct drawings. Shipping it as a normal web font means a visitor downloads several megabytes before text renders properly, which is unacceptable on a phone connection.
Three real approaches exist:
Subsetting. Build a font file containing only the characters the page actually uses. For a fixed page — a landing page, a book cover, a heading set — this works beautifully and can bring 10 MB down to 30 KB. It fails for anything with changing content, because a character not in the subset falls back to a different font and is visibly wrong.
Unicode-range splitting. The font is cut into many small files by character range, and the browser downloads only the pieces containing characters present on the page. This is how large CJK web font services work, and it is the only approach that handles arbitrary content. It still means dozens of requests and a few hundred kilobytes.
System fonts. Use the fonts already on the reader’s device. Nothing downloads, text renders instantly, and the typography is whatever that device has. For body text in Chinese this is often the honest choice — the performance cost of a custom CJK font is real, and the visual gain on a phone is small.
A common compromise: a subsetted custom font for headings, where the character set is small and known, and system fonts for body text.
Between the page appearing and the font arriving, the browser has to show something, and the two possible behaviours both have names:
You choose between them with font-display in the stylesheet. swap gives you FOUT and is the right default for body text — readable immediately beats pretty eventually. optional goes further: the browser uses the custom font only if it arrives almost instantly, and otherwise keeps the fallback for that visit, which eliminates the jump entirely.
The jump itself is reduced by choosing a fallback whose proportions resemble the real font, so that less text reflows when the swap happens.
A traditional font family ships a separate file per weight and style — regular, bold, italic, bold italic, light, semibold. Six files, six downloads.
A variable font puts the whole range in one file, with weight as a continuous axis. It is larger than any single weight but much smaller than all of them together, so the moment you need three or more weights it wins. Some also expose width, slant or optical size as further axes.
This one has real consequences and is widely missed.
A desktop font licence does not normally permit web embedding. The font you bought, or that came with design software, is licensed for creating documents on your machine — not for being served to every visitor of a website. Web use is a separate licence, often priced on page views.
Converting a desktop TTF to WOFF2 and uploading it is technically trivial and is, in most cases, a licence breach. Open-source font families exist in large numbers and cover most needs, including several good CJK families; they are the straightforward answer.
The same distinction applies to embedding fonts in a published EPUB, which is also distribution rather than personal use.
Font trouble in a PDF looks similar but has a different cause. A PDF embeds its fonts inside the document, so it is self-contained; when a PDF’s fonts change, it is because they were not embedded and the reader substituted something.
A web font is never embedded in the page — it is a separate file fetched over the network, and it can fail to arrive for reasons a PDF never faces: a blocked request, a slow connection, a stylesheet that names a file that is not there.
font-display: swap shows readable text immediately instead of blank space