Help center

Publishing

How are fonts optimized in Framer?

Search

How are fonts optimized in Framer?

All sites in Framer use web or custom fonts. This means the browser has to load the fonts before it can use them. To make text render as soon as possible, we apply multiple optimizations.

If you’re curious about the details, here are the exact optimizations we make. (Note: this logic might – and likely will – change in the future.)

TL;DR: Best Practices

  • For web fonts, pick fonts with weights from Light (300) to Bold (700). By default, browsers hide text that uses web fonts until the font loads. However, text that uses these weights won’t be hidden thanks to font-display: swap.

  • Prefer Google fonts over custom ones. If you know some font is available in Google Fonts, pick that font in the “Web” tab instead of uploading it manually. Google Fonts load faster thanks to subsetting.

Kinds of Fonts

Framer supports four kinds of fonts:

  1. Google Fonts: fonts from fonts.google.com; available in “Font” → “Web”:

  2. Fontshare fonts: fonts from www.fontshare.com; available in “Font” → “Web”

  3. Custom fonts: fonts you upload into Framer; available in “Font” → “Custom”

  4. Standard Inter: the font that’s used when you create a new text block and don’t change the font. It’s identical to Google Fonts’ Inter except that it supports italics (Google Fonts don’t)

For a multitude of reasons, each kind of fonts is optimized differently.

We add font-display: swap

Applies to:

  • Google Fonts, Fontshare fonts (but only fonts from serif and sans-serif categories + the following weights: Light, Regular, Medium, Semibold, and Bold),

  • Custom fonts (all of them)

  • Standard Inter (but only the following weights: Light, Regular, Medium, Semibold, and Bold)

font-display: swap is a CSS rule that tells the browser to render the text using a system font while the proper web font is loading.

  • We apply font-display: swap to most common font weights and styles. It’s Light (+ Italic), Regular (+ Italic), Medium (+ Italic), Semibold (+ Italic), and Bold (+ Italic) fonts from serif and sans-serif categories.

    • We don’t apply font-display: swap to rare weights like Thin (100) because that will make the jump between the fonts jarring. Imagine your site uses Roboto Thin – but while Roboto is loading, we render text in a regular (thick) Arial? That won’t look nice.

    • We don’t apply font-display: swap to other font categories because they might look very different from fallbacks. E.g. you don’t really want to render Arial while Kablammo loads.

  • We carefully adjust system font’s size to minimize layout shift. The system font and the web font may have very different glyph sizes. This often causes an unpleasant jump when the web font loads. To avoid this, for every font with font-display: swap, we calculate and apply CSS size-adjust and a few other similar CSS rules. This prevents the jump completely or makes it much smaller.

We subset the fonts

Applies to: Google Fonts, Standard Inter

Most fonts include support for multiple alphabets (e.g.: Latin, Cyrillic, and Hebrew) in the same file. But what if your website only uses English? You wouldn’t want to download Cyrillic and Hebrew characters, right?

That’s why we split every font file into subsets – one per alphabet.

  • Every font file is split into subsets like latin, cyrillic, greek, etc. Google Fonts are split automatically by Google Fonts themselves. Standard Inter is split by us and follows the same subsets Google Fonts uses.

  • We tell the browser about every available subset. The browser automatically chooses which subsets to download based on the characters that are present on the page.

We load WOFF2 fonts

Applies to: Google Fonts, Fontshare fonts, custom fonts (uploaded after Nov 2023), Standard Inter

WOFF2 is the most modern font compression format. It’s typically several times smaller compared to a TTF or OTF font version.

  • We serve all Google Fonts, Fontshare fonts, custom fonts (uploaded after Nov 2023) and Standard Inter in the WOFF2 format.

  • Custom fonts uploaded in or before Nov 2023 are served in the same format they were uploaded in.

    • If you want to upgrade your custom font from OTF/TTF to WOFF2, simply upload the .woff2 font file next to the existing font. Next time you edit a page or a component, that page or component will realize it has a WOFF2 version of the font now – and use it.

    • (We didn’t convert existing custom fonts to WOFF2 automatically because there’s a small risk that might break something in a font. Which, in turn, will break how your site looks – also automatically. Not a fun automation!)