How fonts are optimized in Framer

Best practices

• Use web fonts with weights from Light (300) to Extra Bold (800). Text with these weights won’t be hidden during loading, thanks to the font-display: swap rule.

• Choose Google Fonts when possible. Fonts from Google load faster due to automatic subsetting. Select them from the “Web” tab instead of uploading them manually.

Kinds of fonts

Framer supports five types of fonts:

1. Google Fonts: Available under “Font” in the “Google” tab and sourced from fonts.google.com.

2. Fontshare fonts: Available under “Font” in the “Fontshare” tab and sourced from www.fontshare.com.

3. Custom fonts: Fonts you upload into Framer, accessible under “Font” in the “Custom” tab.

4. Open-source fonts: Fonts sourced from various font foundries.

5. Framer font alternatives: Inter and Inter Display fonts, used as default fonts for new text blocks.

Each type is optimized differently depending on its source and use.

font-display: swap

This CSS rule tells the browser to display a system font while the web font loads, reducing perceived loading time.

Applies to all fonts, with the following specifics:

• Only applies to weight Light (300) to Extra Bold (800)

• For Google and Fontshare fonts, only applies to fonts in categories serif and sans-serif

Considerations

• Rare font weights like Thin (100) do not use font-display: swap because the difference between the system font and the web font would be too noticeable.

• Fonts from non-sans-serif categories (e.g., decorative fonts) also don’t use font-display: swap to avoid mismatches with fallback system fonts like Arial.

Layout shift optimization

For fonts with font-display: swap, Framer calculates and applies CSS rules like size-adjust to ensure the system font closely matches the web font. This reduces or eliminates layout shifts when the web font loads.

Font subsetting

Many fonts include support for multiple alphabets (e.g., Latin, Cyrillic, Greek). If your site uses only one language, downloading unused character sets is unnecessary.

Applies to:

• Google Fonts.

• Framer font alternatives.

Optimization

• Fonts are split into subsets (e.g., Latin, Cyrillic, Greek). Google Fonts handles subsetting automatically, while Framer subsets Standard Inter to match Google Fonts’ subsets.

• The browser determines which subsets to load based on the characters used on the page, reducing font file size.

WOFF2 font compression

WOFF2 is the most modern and efficient font compression format, significantly smaller than TTF or OTF. We automatically convert all fonts (except fonts uploaded before November 2023) into WOFF2.

These optimizations ensure faster font loading and better performance across all Framer sites.