How fonts are optimized in Framer

All sites in Framer use web or custom fonts, which must load in the browser before rendering. To speed up text rendering, Framer applies several optimizations.

Best practices

  • Use web fonts with weights from Light (300) to Bold (700). 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 four types of fonts:

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

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

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

  4. Standard Inter: The default font for new text blocks. This version of Inter supports italics, unlike the Google Fonts version.

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:

  • Google Fonts and Fontshare fonts (serif and sans-serif categories only, for weights Light, Regular, Medium, Semibold, and Bold).

  • Custom fonts (all weights and styles).

  • Standard Inter (weights Light, Regular, Medium, Semibold, and Bold).

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.

  • Standard Inter.

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.

Applies to:

  • Google Fonts.

  • Fontshare fonts.

  • Custom fonts uploaded after November 2023.

  • Standard Inter.

Details:

  • Custom fonts uploaded before November 2023 remain in their original format. To upgrade, upload a .woff2 file alongside the existing font. Framer will automatically use the WOFF2 version when the page is edited.

  • Automatic conversion of existing custom fonts was avoided to prevent potential issues that could disrupt site design.

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