Why WOFF2 for your website
WOFF2 is not a different kind of font. It is the same TrueType font, wrapped and compressed for the web. The compression uses Brotli, plus a step that rearranges TrueType glyph data so it compresses far better than the raw file would. When the browser downloads it, it unpacks the exact font you started with.
Every current browser supports WOFF2: Chrome, Edge, Firefox, Safari and their mobile versions. The only browser that never did is Internet Explorer.
How much smaller, measured
These are real files converted with this page. WOFF is shown for comparison.
| Font | Original | WOFF | WOFF2 | WOFF2 vs original |
|---|---|---|---|---|
| Arial Regular (TTF, 4,503 glyphs) | 1,037 KB | 542 KB | 414 KB | 40% |
| Arial Bold (TTF) | 981 KB | 516 KB | 394 KB | 40% |
| Bahnschrift (variable TTF) | 371 KB | 211 KB | 160 KB | 43% |
| Commercial OpenType font (OTF) | 133 KB | 73 KB | 58 KB | 43% |
A font with thousands of glyphs, like Arial, is still large after compression because it carries Greek, Cyrillic, Hebrew, Arabic and more. If your site only uses English, removing the characters you never show (subsetting) shrinks the same Arial to about 65 KB. The webfont generator does that and writes the CSS for you.
What stays exactly the same
Everything. WOFF2 is a container, so the outlines, TrueType hinting, kerning, ligatures and other OpenType features, and variable font axes all come through untouched. The report under each file lists what the font contains, so you can check before you publish it.
Using it on your site
Upload the .woff2 file with your site's other assets and point a @font-face rule at it:
@font-face {
font-family: "Your Font";
src: url("/fonts/your-font.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}font-display: swap shows text in a fallback font straight away and swaps yours in when it arrives, instead of hiding text while the font downloads. One WOFF2 source is enough today; a WOFF or TTF fallback only matters if you still support Internet Explorer.
Self-hosting Google Fonts? The download from fonts.google.com is a ZIP of TTF files. Drop the whole ZIP here and every font in it is converted in one go.
Good to know
- Encoding takes a moment. For ordinary web fonts Refont uses Brotli's highest setting, which is slow to write and quick to read: a typical web font takes about a second, a large one like Arial several. Very large fonts, such as Chinese or Japanese families of 10 MB or more, get a slightly lower setting so they finish in under a minute per font instead of several, for files about 6% larger.
- OTF works too. WOFF2 can hold CFF-based OpenType fonts as well. See OTF to WOFF2.
- Converting is reversible. WOFF2 to TTF unpacks the original font again.
A desktop license is not always a web license. Many commercial fonts need a separate webfont license before you can put them on a site, in any format. How font licensing works