Made Good Designs

TTF to WOFF Converter

Convert a .ttf font to the .woff web format so you can serve it with @font-face. WOFF (Web Open Font Format v1) is the older web font wrapper, but it keeps wide legacy browser support — handy when you need to reach older browsers. WOFF2 is newer and smaller, so consider offering both. Everything runs entirely in your browser: nothing is uploaded, and there’s no signup.

100% private — runs in your browser

Converts fonts locally with WOFF2 compression for the web. Web-font kit includes a .woff2 file and ready-to-paste @font-face CSS.

How to convert TTF to WOFF

  1. Drop your .ttf file onto the tool, or click to select it from your device.
  2. Set the Output dropdown to WOFF (web, legacy) — it’s preselected on this page.
  3. Pick a font-display option (swap is a good default for web text).
  4. Click Convert & download to save your new .woff file.
  5. Use Copy CSS to grab a ready-made @font-face rule for your stylesheet.

Conversion happens entirely in your browser — your font is never uploaded to a server, so the process is completely private.

Why convert TTF to WOFF?

A .ttf (TrueType) file is built for installing on a desktop, not for streaming over the web. WOFF wraps that same font data in a compressed package designed for web delivery, so it downloads faster and plugs straight into an @font-face rule. The big advantage of WOFF v1 is reach: it works in older browsers — including Internet Explorer 9–11 and legacy Android and Safari versions — that predate WOFF2. The conversion is lossless: your glyphs, spacing, and outlines are unchanged; only the container and compression differ.

WOFF vs WOFF2: which should you use?

WOFF2 is the newer standard. It uses Brotli compression and is typically around 30% smaller than WOFF v1, which makes it the preferred choice for modern sites. WOFF v1 uses older zlib compression and is slightly larger, but it has wider legacy browser support. The best-practice answer is usually both: serve WOFF2 first for modern browsers and list WOFF as a fallback for older ones.

FormatCompressionSizeBest for
WOFF2BrotliSmallest (~30% smaller)Modern browsers (preferred)
WOFFzlibSlightly largerLegacy browser fallback

Using your WOFF font on a website

Upload the font file(s) to your site, then add an @font-face rule that lists WOFF2 first and WOFF as a fallback. Browsers use the first format they understand:

@font-face {
  font-family: "My Font";
  src: url("/fonts/my-font.woff2") format("woff2"),
       url("/fonts/my-font.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "My Font", sans-serif;
}

Adding font-display: swap; shows a fallback font while yours loads, so text stays visible during the download.

Related tools

  • TTF to WOFF2 — compress a TTF font into the modern WOFF2 web format with @font-face CSS

Frequently asked questions

Is TTF to WOFF conversion lossless?

Yes. WOFF is just a compressed wrapper around the original font data, so every glyph, kerning pair, and outline is preserved exactly. Nothing about the design is altered — only the file container and compression change.

Should I use WOFF or WOFF2?

For most sites, WOFF2 is preferred because it’s smaller and faster. Use WOFF as a fallback when you need to support very old browsers. The safest approach is to offer both, with WOFF2 listed first in your @font-face rule.

Do modern browsers support WOFF?

Yes, universally. WOFF is the older, broadly supported web font standard, so every current browser handles it. That’s exactly why it works well as a fallback behind WOFF2.

Is it free and private?

Yes. The converter is free to use and runs entirely client-side in your browser. Your font file is never uploaded, and there’s no signup required.

Can I convert an OTF file to WOFF too?

Yes. The tool accepts TrueType and OpenType outlines, so you can wrap an .otf font into WOFF the same way — just select your file and keep the Output set to WOFF.

Do I still need the original TTF after converting?

Keep it. TTF remains the best format for installing the font on a desktop or editing it later. Use the WOFF file only for serving the font on your website via @font-face.

Related font & conversion tools