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.