A Web Font Is a Desktop Font in a Delivery Wrapper

There is a persistent idea that a web font is a special kind of typeface, drawn differently or cut down for screens. It is not. A WOFF2 file contains the same sfnt tables as the TrueType or OpenType font it was made from: the same glyph outlines, the same character map, the same layout features. What changed is the packaging. That one fact settles most of the questions people have about which file to ship, and it explains why so many font problems turn out to be CSS problems in disguise.

What the wrapper actually does#

WOFF2 applies two things to a font. First it transforms the outline tables, re-encoding the glyf and loca data into a shape that compresses better. Then it runs Brotli over the whole file. The result averages around thirty percent smaller than the zlib-based WOFF that preceded it, with larger savings on fonts carrying big CJK character sets. Decompressing a WOFF2 reconstructs a working font, which is exactly why it is described as a transport format rather than a font format. Nothing about the typeface is lost or simplified on the way in.

• TTF and OTF are the installable containers. An operating system accepts them, a font editor opens them, and TrueType remains the most portable file you can hand to someone with no context.
• WOFF2 is what a modern site serves. No operating system will install it, and that is part of the design: the wrapper discourages casual desktop installation of a licensed web font.
• WOFF is the older web wrapper. Ship it only when a written browser-support policy asks for it, because it is otherwise weight with no audience.
• EOT belongs to the Internet Explorer era and has no place in a new project.

Renaming does nothing, and the browser says so#

A .ttf renamed to .woff2 is still a TrueType file. The browser reads the first four bytes, finds the TrueType version tag where it expected the ASCII marker wOF2, and refuses the font outright. There is no quiet fallback that makes it work anyway. The fix is a real repackaging: convert TTF to WOFF2, which opens the font, reads its tables, writes a genuine WOFF2 container, and checks the output signature before offering a download.

What a browser needs beyond the file itself#

A correctly packaged font still renders badly if the CSS around it is wrong, and that is where most real font bugs live. Four things matter more than the container choice.

1. One @font-face rule per weight and style, each declaring the font-weight and font-style it actually contains. Point three weights at one file and the browser synthesises the other two, producing the smeared fake bold that gives web type a bad name.
2. A consistent family name across every rule. The name in the CSS need not match the name inside the font, but it must match itself, and a stray capital or a trailing space breaks the match without any warning.
3. A deliberate font-display value. The default behaviour hides text while the font is arriving, which is a content problem rather than a typographic one.
4. Preload only what is above the fold. Preloading every weight sets the fonts competing with the resources the page needs first, and a font that arrives before the text it styles has gained you nothing.

Going back the other way#

You will sometimes receive a web font and need a desktop copy to inspect it, check its metrics, or open it in an editor. WOFF to TTF unwraps the older container, and OTF to TTF covers the case where a foundry supplied OpenType and a downstream tool insists on TrueType. If all you inherited is a legacy package from an old site, EOT to WOFF2 brings it forward. None of this changes what you are permitted to do with the font, which is a separate question and one worth settling before you start.

The thing conversion will not do#

Conversion is repackaging, not slimming. If your source carries nine thousand glyphs covering scripts your site will never set, the WOFF2 is smaller than the TTF and still far larger than it needs to be. Cutting the character set down is subsetting, a separate operation with its own licensing implications, and no container change substitutes for it. The honest order of work is: confirm what the licence permits, subset if it permits that and the font is heavy, then package for delivery and test.

For the full route map across all five font containers, including which destinations this site writes and which it only reads, see converting TTF, OTF, WOFF, WOFF2 and EOT. It is the companion piece to this one and covers the mechanics rather than the reasoning.