What's the difference between swap and optional?

Swap shows fallback text immediately and swaps to the web font when it loads. Optional uses the web font only if it loads within a short time window (usually 100ms), otherwise it skips it entirely. Use swap for most cases, optional for non-critical decorative fonts.

Do I need to preload fonts?

Preload critical above-the-fold fonts to start loading them earlier. For fonts below the fold or non-critical fonts, preload is optional. Always use crossorigin='anonymous' when preloading fonts from CDNs.

FOIT (Flash of Invisible Text) happens when browsers use font-display: block or auto, hiding text until fonts load. Use font-display: swap to prevent this by showing fallback text immediately.

Can I use font-display with Google Fonts?

Yes, but Google Fonts CSS doesn't include font-display by default. You can either use this tool to generate @font-face rules with font-display, or add font-display to your own CSS that overrides Google Fonts.

Generate font loading code – Free Font Display Generator

Learn more

Need font loading optimization? Generate @font-face declarations with font-display and preload tags to improve web font performance.

Font Loading

Need font loading tips? Generate font-display snippets

Font Loading Strategy

swap: Show fallback immediately, swap when font loads (recommended)
optional: Use font only if available quickly, otherwise skip
fallback: Brief invisible text, then fallback, then swap
block: Invisible text until font loads (not recommended)
auto: Browser default (usually block)

Options

Configure font loading behavior

Include Preload Tags

Generate <link rel="preload"> tags for fonts

Include font-display

Add font-display property to @font-face rules

Default font-display

No fonts added yet

Best Practices

Use font-display: swap for most web fonts
Preload critical fonts (above-the-fold) with <link rel="preload">
Use crossorigin="anonymous" for preloaded fonts from CDNs
Prefer WOFF2 format for best compression and browser support
Limit the number of font weights/styles to improve performance