DEV Community

Sherotree
Sherotree

Posted on

Convert TTF/OTF fonts to WOFF2 in the browser (no install, no upload server)

#webdev #css #fonts #frontend

Convert TTF/OTF fonts to WOFF2 in the browser (no install, no upload server)

You designed a landing page. The brand font is a .ttf sitting on your desktop. Chrome DevTools is already complaining about font payload. You need WOFF2 — and you do not want to install FontTools, pay for a desktop app, or upload the file to a random converter that keeps a copy.

This post is a short, practical path: what WOFF2 is, when to use it, and how to convert TTF/OTF → WOFF2 entirely in the browser.

Why WOFF2 still matters

  • Smaller than TTF/OTF for the same glyphs (Brotli-based compression).
  • Widely supported in evergreen browsers for @font-face.
  • Better for Core Web Vitals when you also subset and use font-display.

A typical pattern:

@font-face {
  font-family: "Brand";
  src: url("/fonts/brand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
Enter fullscreen mode Exit fullscreen mode

Keep a TTF around for design tools if you need it — ship WOFF2 (and optionally WOFF as a rare fallback) on the web.

Option A — Convert in the browser (recommended for one-off work)

I maintain a free utility on Uwarp that runs the conversion locally in your tab:

  1. Open https://www.uwarp.design/ttf-to-woff2.
  2. Drop a .ttf or .otf file.
  3. Download the .woff2 result.
  4. Put it in your /public/fonts (or CDN) folder and wire @font-face as above.

No account. No server-side font storage for the happy path — useful when the typeface is under NDA or you simply do not want another third-party upload.

Tip: convert only the weights you use. A full family dump (Thin → Black, italics included) is the fastest way to undo the win from WOFF2.

Option B — CLI when you need a pipeline

If this is part of a build (subsetting, CI), use fonttools / woff2_compress locally instead of a GUI. Example sketch:

# after installing fonttools / brotli tooling in your environment
pyftsubset Brand.ttf \
  --output-file=brand.woff2 \
  --flavor=woff2 \
  --layout-features='*' \
  --unicodes="U+0020-007E"
Enter fullscreen mode Exit fullscreen mode

Use the browser tool for ad-hoc design handoff; use the CLI when the font set is versioned in git and must be reproducible.

Checklist before you ship

  • [ ] Only the weights/styles actually used in CSS
  • [ ] font-display: swap (or optional for non-critical UI)
  • [ ] License allows webfont embedding (desktop license ≠ web license)
  • [ ] Prefer WOFF2; skip mega TTF on production
  • [ ] Preload the primary WOFF2 if it is above-the-fold text 
<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>
Enter fullscreen mode Exit fullscreen mode

Related free utilities

If you are already cleaning up design/dev handoff assets:

Wrap-up

WOFF2 is still the default webfont format worth shipping. For a one-off TTF from a designer, a local in-browser converter avoids installs and upload risk; for a design system, automate subsetting in CI.

If this helped, try the converter at uwarp.design/ttf-to-woff2 and tell me what font workflow still hurts — happy to improve the tool.

Written by Sherotree · Uwarp

Top comments (1)

Collapse
 
marcusykim profile image
Marcus Kim •

The U+0020-007E subset in the CLI sketch is worth making an explicit demo-only choice. I'd keep a fixture with accented names, curly punctuation, and a currency symbol, then render it with the generated WOFF2 in CI. That catches a font file which downloads correctly but silently falls back for actual product copy. Your versioned-build approach makes this repeatable as the site's language coverage changes.