TTF to WOFF2 Converter
Turn TrueType (.ttf) and OpenType (.otf) fonts into compact WOFF2 or WOFF web fonts and get the @font-face CSS to use them. Conversion runs entirely in your browser, so your font files never leave your device.
@font-face CSS
How to use the TTF to WOFF2 Converter
- Drop your .ttf or .otf files onto the box or click it to choose them. Conversion starts automatically.
- Pick the output: WOFF2 for modern browsers, WOFF2 + WOFF for the widest support, or WOFF only.
- Check the result: each font shows the new size, the percentage saved and whether the browser loaded it.
- Set the CSS options – the folder where you will upload the fonts, font-display and optional Base64 embedding.
- Press Download per file or Download all (ZIP), then copy the @font-face CSS into your stylesheet.
TTF vs WOFF vs WOFF2
| TTF / OTF | WOFF | WOFF2 | |
|---|---|---|---|
| Compression | None | zlib (deflate) per table | Brotli + glyph table transforms |
| Typical size of a 300 KB TTF | 300 KB | about 140–170 KB | about 100–130 KB |
| Browser support | All, but not recommended for the web | All, including IE 9+ | All current browsers |
| CSS format() hint | truetype / opentype | woff | woff2 |
| MIME type | font/ttf, font/otf | font/woff | font/woff2 |
Savings are calculated as (original size − new size) ÷ original size × 100. Example: a 741.9 KB TTF that becomes 330 KB as WOFF2 saves (741.9 − 330) ÷ 741.9 × 100 ≈ 55.5%.
How a WOFF file is built
The built-in encoder follows the W3C WOFF 1.0 specification:
- A 44-byte header starting with the signature
wOFF, the original flavor (0x00010000for TrueType orOTTOfor CFF), the total file length, the number of tables and the size the uncompressed font will have. - A table directory with one 20-byte entry per table, sorted by tag: tag, offset, compressed length, original length and the table's checksum.
- The table data, each table compressed with zlib when that makes it smaller (otherwise stored as is), padded to a 4-byte boundary.
Because every table is kept byte for byte, the browser recreates exactly the original font when it decompresses the file.
Using the generated @font-face CSS
@font-face {
font-family: "Inter";
src: url("/fonts/Inter-Regular.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
body { font-family: "Inter", system-ui, sans-serif; }
- Upload the converted files to the folder given in "Font URL folder" (for example
/fonts/). - Add one @font-face rule per weight and style, all with the same font-family name, so
font-weight: 700picks the Bold file. - font-display: swap shows fallback text immediately and swaps in the web font when it arrives, which avoids invisible text.
- Preload the most important font with
<link rel="preload" href="/fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin>. - Serve fonts from the same domain or send an
Access-Control-Allow-Originheader; browsers block cross-origin fonts without CORS.
Frequently asked questions
Why convert TTF to WOFF2?
WOFF2 is a compressed font format made for the web. It uses Brotli compression and font-specific transforms, so a WOFF2 file is typically 30–50% smaller than the original TTF, which makes pages load faster. Every current browser supports it.
Are my fonts uploaded to a server?
No. The WOFF2 encoder runs as WebAssembly inside your browser and the WOFF encoder uses the browser's built-in compression. Your font files never leave your device.
What happens if the WOFF2 encoder cannot load?
The encoder is downloaded from a public CDN the first time you convert. If you are offline or the CDN is blocked, the tool tells you and creates WOFF files with its built-in encoder instead. WOFF also works in all browsers; it is just a little larger than WOFF2.
Do I still need WOFF files?
For almost all sites, no. WOFF2 is supported by Chrome, Edge, Firefox, Safari (since version 12 on macOS and 10 on iOS) and Samsung Internet. Choose WOFF2 + WOFF only if you must support very old browsers such as Internet Explorer 11.
Is it legal to convert a font to WOFF2?
It depends on the font's license. Open-source fonts under the SIL Open Font License or Apache License may be converted and self-hosted. Many commercial desktop licenses do not include web embedding, so check the license (the Font Viewer tool shows it) before publishing.
Does conversion change how the font looks?
No. WOFF and WOFF2 are lossless containers: glyph outlines, kerning, OpenType features and hinting are preserved, and the browser decompresses the file back to the original font data.
Should I embed the font as Base64?
Usually not. Base64 makes the data about 33% larger and stops the browser from caching the font separately from the CSS. It can make sense for a small icon font or a single-file HTML document.