Convert TTF to WOFF2 for the web
WOFF2 wraps the exact tables your TTF already holds and compresses them with brotli, so this is a repack rather than a re-encode. Expect roughly 55 to 65% off, and the same glyphs on the other side.
or browse your device. Everything is processed on this device
No TTF to hand?
The .ttf you dropped is still loaded here. WOFF is the 2010 container, about a fifth larger than WOFF2 for the same font, and the only thing IE11 and Android 4 will take.
Convert the TTF to WOFFHow to convert a TTF to WOFF2
The table directory is read in this tab and the font is repacked here. Nothing is uploaded, so an unreleased typeface never leaves the machine.
Leave it on All for a like for like conversion. Narrow it if this font is for one site and you know which alphabets that site renders.
Read the note first: it says what came out, and whether anything went with it. Then put the file wherever your other static assets live.
One src line, format woff2, and font-display: swap so text is readable while the font arrives. Preload it in the head if it is your body face.
What WOFF2 is, and what it is not
WOFF2 is not a font format. It is a wrapper: the same sfnt table directory a TTF holds, rearranged so it compresses better, and put through brotli. There is no re-encoding step, no quality setting and nothing to lose. Unwrap a WOFF2 and you get a TrueType font back, which is exactly what the WOFF2 to TTF page here does. That is why this conversion is safe to run on a font you cannot replace, and why any tool offering you a quality slider for it is measuring something else.
What it buys you is transfer size, and only transfer size. A brotli compressed font is around 55 to 65% smaller over the wire than the raw TTF, and unlike gzip it is applied once at build time rather than by your server on every request. Support has not been the question for years: every version of Chrome, Firefox, Safari and Edge since 2016 reads WOFF2, and the only browsers that do not are IE11 and Android 4, which is what the WOFF fallback used to be for.
The bigger lever is the one this page leaves alone by default. A font from a large family often carries Latin, Latin Extended, Greek, Cyrillic and Vietnamese, and a site rendering English downloads every one of those to draw about ninety characters. Subsetting to the range you actually use takes far more off than the container ever will, and the two stack: the "Characters to keep" control does it on the way through.
One honest caveat about the file this page writes. The WOFF2 spec has an optional transform for the glyph table, which pulls it apart into separate streams so brotli sees more repetition. This packer does not apply it, because implementing the forward transform correctly is a large amount of code whose bugs produce fonts that render subtly wrong rather than fonts that fail to load. The cost is measurable and small: our output runs 4 to 20% larger than what fonttools or Google's encoder writes for the same font, and browsers read both identically.
TTF to WOFF2 FAQ
Is converting TTF to WOFF2 lossless?
Yes, when you leave "Characters to keep" on All. WOFF2 stores the same sfnt tables the TTF held and compresses them with brotli, so nothing is redrawn, renumbered or rounded, and unpacking the result gives back the font you started with. It is only lossy if you ask it to be, by narrowing the character range or dropping hinting, and the result panel says so when you do.
How do I use the WOFF2 in CSS?
Declare it once and reference the family as normal: @font-face { font-family: "Your Face"; src: url("/fonts/your-face.woff2") format("woff2"); font-weight: 400; font-display: swap; }. Add font-display: swap so text renders in a fallback while the font downloads rather than sitting invisible, and preload the file in your head if it draws your body copy.
Do I still need a WOFF fallback as well?
Almost certainly not. Every browser released since 2016 supports WOFF2, which in practice means everything except IE11 and Android 4. Shipping a WOFF alongside doubles your font requests for a fraction of a per cent of traffic that will fall back to a system font perfectly readably. If you do need one, the TTF to WOFF page here writes it from the same file.
Why is my WOFF2 bigger than the one fonttools produces?
Because this packer stores the glyph table untransformed. WOFF2 allows an optional transform that splits glyf into separate streams before brotli sees it, and Google's encoder applies it; ours does not, which costs 4 to 20% depending on the font. Both files are valid WOFF2 and every browser reads them the same way. If those bytes matter more than doing it in a tab with nothing uploaded, fonttools is the tool.
Will the WOFF2 keep kerning and ligatures?
Yes, with the range on All: GPOS and GSUB are carried across like every other table. Narrow the range and they are dropped rather than left pointing at renumbered glyphs, so the font loses its kerning pairs and its ligatures. That is invisible in body text and very visible in large display type, so check a heading before you ship a subset.
Does my font licence cover using it on a website?
Check it, because desktop and webfont licensing are usually sold separately. A licence that lets you install a font on your machine often does not let you serve it to visitors, and the format you convert to has no bearing on that either way. Open licences such as the SIL OFL do allow it. The licence description and licence URL are never removed from the name table here, so the terms travel with the file.
Are my TTF files uploaded to convert them?
No. The TTF is decoded and the WOFF2 is written by your own browser, in this tab. There is no upload endpoint in the site for a file to go to, which you can check in your network tools: convert something and watch that no request carries it. Disconnect from the network after the page loads and it still works.
Related
Same format joins the queue. Anything else re-routes to its own tool.