Getting a font ready for the web

You have a font file and want it on a website. It needs to be allowed, in the right format, with CSS that loads it, and ideally without the text jumping when it arrives. These tools do each step in your browser; nothing is installed or uploaded.

1. Check what you’ve got

Drop the file on the Font Inspector. The table gives its names, version, maker, licence and embedding rights; read the licence that came with the font as well, as that’s what counts for self-hosting. A variable font gets a slider for each axis, and OpenType features shows the extras worth using, such as old-style figures or small capitals. Characters by alphabet tells you whether it covers the languages your site needs.

2. Convert it and write the CSS

Drop it on the Font Converter. Save as WOFF2 makes the compressed web font every current browser reads, and @font-face gives the CSS with the family name, weight and style filled in (a weight range for a variable font): choose A WOFF2 file beside the CSS under Load the font from. If you already have a WOFF2 from the font’s maker, keep it: theirs is usually a little smaller.

3. Stop the page jumping

Until the web font loads, the browser shows a fallback such as Arial, and when the font arrives the lines rewrap and the page shifts. In the Fallback Font Matcher, choose the web font and the fallback. It measures both and writes an @font-face rule that resizes the fallback (size-adjust and line height overrides) to match. Put that fallback after the web font in font-family; Compare shows they now wrap in the same places.

4. Pick the sizes

Set a base size and a ratio in Type Scale to get a matched set of sizes for headings and small print, previewed in your text, as CSS custom properties in rem. Tick Fluid for sizes that grow smoothly with the screen using clamp().