All sites created in Framer use web fonts or custom fonts, which must be loaded before the browser renders them. Framer applies various optimizations to speed up text rendering.

Font Optimization Tips

• Use web font weights from Light (300) to Bold (700).
  This range of text won't be hidden while loading, thanks to the font-display: swap rule.

• We recommend using Google Fonts.
  Google Fonts feature automatic subsetting for faster loading.
  It's better to select from the “Web” tab rather than uploading directly.

Supported Font Types

Google Fonts: Available from the “Web” tab, provided by fonts.google.com.
Fontshare Fonts: Available from the “Web” tab, provided by fontshare.com.
User-uploaded Fonts: Accessible in the Custom tab’s Font section.
Standard Inter: The default font applied to new text blocks, supporting italics unlike the Google Fonts version.

Each font type is optimized differently depending on its source and usage.

Font-display: swap

This CSS rule displays system fonts first until web fonts are loaded, reducing perceived loading time for users.

Applies to: Google Fonts and Fontshare Fonts (Serif / Sans-serif, Light~Bold weights), Custom Fonts (all weights and styles), Standard Inter (Light~Bold weights)

Notes

• Special weights like Thin (100) are not applied due to significant differences with system fonts.

• Decorative fonts and non-sans-serif types are not applied to prevent mismatches with replacement fonts (e.g., Arial).

Framer calculates and applies CSS rules like size-adjust to make system fonts appear as close as possible to the actual font, minimizing layout shifts when web fonts load.

Font Subsetting

Many fonts support a range of alphabets, including Latin, Cyrillic, and Greek. However, if a site uses only one language, there's no need to download unnecessary character sets.

Applies to: Google Fonts, Standard Inter

Optimization Methods

• Google Fonts handle subsetting automatically.

• Framer subsets the Standard Inter font in the same way as Google Fonts.

• The browser only loads the needed subsets based on actual characters used on the page, reducing font file size. WOFF2 Font Compression

WOFF2 Font Compression

WOFF2 is the latest and most efficient font compression format, significantly smaller in size 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 retain their original format.

• To upgrade, upload a .woff2 file along with the existing font, and Framer will automatically use the WOFF2 version.

• Automatic conversion is not applied to prevent issues affecting site design.

Thanks to these optimizations, all sites created in Framer ensure faster font loading and stable performance. Actively use Google Fonts and choose the appropriate weights and compression formats to enhance your website's text experience.

This article is an adapted translation of Framer's official blog post ‘How fonts are optimized in Framer’.