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

2026-10-28来源 dev.to CSSEnglish

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; }

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"

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>

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

原文：https://www.a8q9.cn/en/article/convert-ttf-otf-fonts-to-woff2-in-the-browser-no-install-no-upload-server-d6b976.html

相关文章