Self-hosting fonts? Serve WOFF2. It is the most compact web font format and is supported by every current browser. ConvertCove compresses your TrueType or OpenType font with Google’s reference woff2 library, compiled to WebAssembly and running on your machine.
How to convert TTF to WOFF2
- Click Select TTF files or drag them onto the box above. You can add as many as you like.
- Check that the target says WOFF2. Click the slider icon next to a file to change its options.
- Press Convert. Each file shows its own progress, and the work happens on your device.
- Download files one by one, or use Download all (ZIP). Press Convert more to start a new batch.
Check your font licence first. Many commercial desktop licences do not include web embedding, while SIL Open Font License fonts may be converted freely.
TTF vs WOFF2
What is TTF?
TTF (TrueType) is the classic desktop font format from Apple and Microsoft. Its tables are stored uncompressed, which is fine for installed fonts but wasteful over the network. More about the TTF format.
What is WOFF2?
WOFF2 wraps the same font tables with Brotli compression plus font-specific transforms of the glyph data. It is usually about 30% smaller than WOFF and often less than half the size of the original TTF. More about the WOFF2 format.
| TTF | WOFF2 | |
|---|---|---|
| Full name | TrueType Font | Web Open Font Format 2 |
| Extensions | .ttf | .woff2 |
| MIME type | font/ttf | font/woff2 |
When to convert TTF to WOFF2
- You are self-hosting a font for GDPR reasons instead of loading it from a third-party CDN.
- Lighthouse flags large font downloads or slow text rendering.
- You licensed a desktop font that permits web embedding and need a web format.
- You want to drop legacy TTF and WOFF files from your @font-face rules.
Quality and settings
WOFF2 compression is lossless for the font itself: glyphs, kerning, hinting and OpenType features work exactly as in the TTF. Only the packaging changes. OTF fonts with CFF outlines are converted the same way. After converting, reference it with @font-face { src: url(font.woff2) format("woff2"); font-display: swap; } and preload the weights used above the fold.