refont

Webfont generator

Subset your fonts, compress them to WOFF2 and copy ready-made @font-face CSS. Everything runs in your browser, with no file size limit.

  • No upload
  • Variable fonts
  • Family grouping

1 · Fonts

Drop TTF, OTF, WOFF or WOFF2 files here, or a ZIP. Styles of the same family are grouped automatically.

2 · Settings

Characters to keep
Formats

3 · Output

0 KBAdd fonts to build a kit

fonts.css
/* Your @font-face rules will appear here. */

A preview of each style, using the subset fonts themselves.

How the kit is built

1. Subset

Removes the characters your site will never show, keeping every glyph that the kept characters' kerning and ligatures need. This is done by HarfBuzz, the text engine inside Chrome, Firefox and Android.

2. Compress

Packs each font as WOFF2, which every current browser supports, and optionally WOFF for very old ones.

3. Write the CSS

One @font-face rule per style, grouped by family, with weight, style, unicode-range and font-display filled in.

What subsetting saves, measured

FontOriginalWOFF2, all charactersWOFF2, Latin only
Arial Regular (4,503 glyphs)1,037 KB414 KB65 KB
Arial Bold981 KB394 KB54 KB
Bahnschrift, variable371 KB160 KB56 KB

The Latin subset kept 424 of Arial's 4,503 glyphs. Narrowing Bahnschrift's weight axis from 300–700 to 400–700 took it from 56 KB to 44 KB more.

Choosing which characters to keep

Start with the languages your site is written in. An English site needs Latin. Add Latin Extended for names and words like Łódź, Ştefan or Ærø, and Vietnamese, Cyrillic or Greek if you publish in them. Any character you leave out is drawn in the next font of your CSS font-family list, so add symbols you use, such as ₨, € or ✓, under Extra characters.

The character sets match the ones Google Fonts uses, and the unicode-range in the CSS lists exactly what was kept. Browsers use it to skip downloading a font for a page that doesn't need any of its characters.

Variable fonts

A variable font stays variable. Its CSS gets a weight range (font-weight: 300 700) instead of a single value, and a width range if it has a width axis. If your design only uses part of an axis, narrow it under the font in panel 1: everything outside the range is removed from the file.

Preload, Base64 and font-display

Preload
Tells the browser to fetch a font before it finds the CSS that needs it. Preload only the one or two fonts used above the fold; preloading every style slows the page down instead.
Base64
Puts the font inside the CSS file itself, saving a request but making the CSS larger and uncacheable on its own. Worth it only for a very small subset, such as an icon font or a logo face.
font-display: swap
Shows text straight away in a fallback font and swaps yours in when it loads. optional avoids the swap entirely and uses your font only if it arrives almost immediately.

Subsetting changes the font. Some licenses allow web use but not modification, and some fonts ask not to be subset. Refont shows each font's embedding setting in panel 1. How font licensing works

Written and tested by MatrixInn Solutions. Updated .

Related

TTF → WOFF2Convert only, no subsetting OTF → WOFF2For OpenType CFF fonts Font licensingWhat the license check means

Questions

Do I still need WOFF or EOT?

For almost every site, no. WOFF2 works in every current browser. WOFF is offered for sites that still support Internet Explorer 9 to 11. EOT only ever mattered for older Internet Explorer, so it isn't offered.

Will kerning and ligatures still work?

Yes, for the characters you keep. HarfBuzz keeps every OpenType feature and every glyph those features need, such as an "fi" ligature when both f and i are kept.

What happens to characters I removed?

The browser draws them with the next font in your font-family list. If a missing character matters, add it under Extra characters and rebuild.

Is the font's license text kept?

Yes. Refont keeps all of the font's name records. Subsetters usually keep only a few basic ones by default, which drops the license description and license URL.

Are my fonts uploaded?

No. Subsetting and compression run in your browser as WebAssembly. You can disconnect from the internet after the page has loaded and keep building kits.