Learn · Fonts
Font Display CSS Choices
The `font-display` value controls what visitors see while a webfont loads. The right choice balances brand accuracy, speed, and layout stability.
Use swap for most sites
`font-display: swap` shows fallback text first, then swaps to the webfont when it is ready. It is a practical default for content-heavy sites because visitors can read immediately.
Use optional when speed matters more
`optional` lets the browser skip the webfont if loading is slow. This can be useful for performance-sensitive pages where the fallback font is acceptable.
Be careful with block
`block` can hide text briefly while the font loads. It may preserve brand appearance, but it can also make a page feel slower. Avoid it unless the visual requirement is strong and tested.
Test fallback spacing
The fallback font should be close enough that headings and buttons do not jump badly when the webfont appears. Check navigation, CTAs, form labels, and hero headings after adding CSS.
Generate CSS
Use Font CSS Generator to create a starter @font-face block.
Format choice
Read WOFF2 vs WOFF Font Formats before exporting files.
Before you ship webfonts
A font file can convert successfully and still be wrong for a website if the license, character coverage, weight selection, or CSS loading strategy is not ready. Test headings, body copy, numbers, and accented characters before publishing.
Treat conversion as one part of the webfont job. The final setup also needs correct file paths, fallback fonts, caching, and a font-display choice that matches the site. If the font is only used for headings, avoid shipping unnecessary weights that slow down every page.
- Confirm the license allows web use.
- Ship only the weights and styles the site needs.
- Use CSS with sensible fallback fonts and a clear font-display choice.
After downloading the result, open it once before using it in a client send, upload form, website, or archive. This final check catches format support issues, unexpected file size changes, missing characters, clipped media, or page-order mistakes while the original file is still available.
If the output will be reused, note the settings that produced it. That makes the next export easier to repeat and reduces guesswork when another file needs the same treatment.