Font converter (WOFF2)

What this font converter does

Choose a TTF or OTF file and the tool compresses it to WOFF2 using wawoff2, a WebAssembly build of Google’s reference woff2 encoder — the same code behind most build tools. Give it a WOFF2 and it decompresses back to a TTF/OTF you can open in a font editor. It detects the format from the file’s first bytes (not the extension), shows the before/after size with the saving, and offers a download. The font is converted in your browser and never uploaded, which matters for licensed fonts.

How to use it

1. Click Choose a font file and pick a .ttf, .otf or .woff2.
2. The detected format appears next to the filename. One button is offered: Convert to WOFF2 for TTF/OTF, or Convert to TTF for WOFF2.
3. Click it. Conversion takes well under a second for a typical 100–300 KB font.
4. Read the size badge and click ↓ Download to save the file.

Font format comparison

Format	Container	Compression	Typical size (Latin text font)	Browser support
TTF	raw sfnt, TrueType outlines	none	100% (e.g. 180 KB)	all, but wasteful
OTF	raw sfnt, CFF outlines	none	~90%	all, but wasteful
WOFF	zlib-wrapped sfnt	deflate	~60%	all since 2012
WOFF2	Brotli-wrapped sfnt, transformed tables	Brotli	~45%	Chrome 36, Firefox 39, Safari 10, Edge 14
EOT / SVG fonts	legacy	—	—	IE only / removed

In practice a 180 KB TTF becomes roughly 80–90 KB WOFF2. If you must support a browser older than 2016 you can add a WOFF fallback, but for everything else WOFF2 alone is correct and keeps the src list short.

The @font-face recipe

Self-hosting is faster than a third-party font CDN (no extra DNS and TLS handshake, full control over caching) and avoids leaking visitor IPs. Drop the converted file in /fonts/ and declare it:

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;        /* range for a variable font, or 400 for a single weight */
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC;
}

body {
  font-family: "Inter", system-ui, sans-serif;
}

Notes on the properties:

• font-display: swap shows fallback text immediately and swaps in the web font when it arrives — best for body text. Use optional for non-essential display fonts (the browser may skip them on slow connections) and block only for icon fonts where fallback glyphs would be wrong.
• unicode-range lets the browser skip the download entirely if the page uses none of those characters — ideal when you split a font into Latin, Cyrillic and Greek subsets.
• Preload the critical font to avoid a flash of fallback text on the LCP heading: link rel="preload" as="font" type="font/woff2" crossorigin. The crossorigin attribute is required even for same-origin fonts.
• Cache headers. Serve fonts with a hashed filename and Cache-Control: max-age=31536000, immutable.

Where the real savings are

Converting to WOFF2 is step one. The bigger wins usually come from the font itself:

Technique	Typical saving
TTF → WOFF2	30–50%
Subset to Latin only (from a full Unicode font)	50–80%
One variable font instead of 4 static weights	40–60% of the combined size
Drop unused OpenType features and hinting	5–15%

Subsetting and instancing need a dedicated tool (pyftsubset from fonttools or glyphhanger), but you can verify what a file contains — glyph count, weight, metrics — with the font inspector before and after.

Related tools and snippets

• Font inspector — check family name, weight and glyph count of the file you just converted.
• Image compressor — same idea for images: WebP and AVIF are to JPEG what WOFF2 is to TTF.
• CSS unit converter — convert px font sizes to rem when writing your type scale.
• Font tools in the browser — the post that introduced the converter and inspector.
• Gradient text snippet — a display effect that works best with a real web font.