This document is designed to help Korean users learning Framer overcome difficulties due to a lack of Korean resources by translating the content of the official blog into Korean and adding practical information. We hope it will be of some help to those using Framer.

All Framer sites use web fonts or custom fonts. Fonts must be loaded before the browser can render text, so Framer applies various optimizations to boost loading speed.

Related Tips

• Use fonts with weights from Light (300) to Bold (700). Text with these weights will be visible even while loading, thanks to the font-display: swap rule.

• Whenever possible, opt for Google Fonts. Google Fonts load faster due to automatic subsetting. In this case, select directly from the “Web” tab instead of manual upload.

Types of Fonts

Framer supports four types of fonts.

1. Google fonts: Available for selection under Font in the Web tab, provided at [fonts.google.com](http://fonts.google.comhttps://fonts.google.com/).

2. Fontshare fonts: Accessible under Font in the Web tab, available at [fontshare.com](http://fontshare.comhttps://www.fontshare.com/).

3. User-uploaded fonts: Fonts uploaded by the user and accessible from the Custom tab's Font.

4. Standard Inter: The default font for new text blocks. Unlike the Google Fonts version, this Inter supports italics.

Each font type has different optimization approaches based on its source and usage.

Font-display: swap

This CSS rule helps reduce perceived loading time by displaying system fonts first while web fonts are loading.

Applicable Fonts

• Google Fonts and Fontshare fonts (serif, sans-serif categories, weights of Light/Regular/Medium/Semibold/Bold)

• Custom fonts (all weights and styles)

• Standard Inter (weights of Light/Regular/Medium/Semibold/Bold)

Considerations

• Rare weights like Thin (100) show a significant difference between system and web fonts, thus font-display: swap is not used for these.

• Non-sans-serif fonts, like decorative fonts, do not use this rule to avoid mismatches with system fonts (e.g., Arial).

Optimizing Layout Shifts

For fonts with font-display: swap applied, Framer calculates and applies CSS rules like size-adjust to make system fonts resemble web fonts as closely as possible, reducing or eliminating layout shifts when the web fonts load.

Font Subsetting

Many fonts support multiple alphabets, such as Latin, Cyrillic, and Greek. However, if you use only one language on a site, you don't need to download unnecessary character sets.

Applicable Fonts

• Google Fonts, Standard Inter

Optimization Approach

• Fonts are separated into subsets like Latin, Cyrillic, and Greek characters. Google Fonts handles these subsets automatically, while Framer aligns Standard Inter with Google Fonts' subsetting structure.

• Browsers choose which subsets to load based on the characters used on the page, reducing font file size.

WOFF2 Font Compression

WOFF2 is the latest and most efficient font compression format, significantly smaller than TTF or OTF.

Applicable Fonts

• Google Fonts

• Fontshare fonts

• User-uploaded custom fonts after November 2023

• Standard Inter

Details

• Custom fonts uploaded before November 2023 will remain in their original format. To upgrade, upload a .woff2 file alongside the existing fonts. Framer automatically uses the WOFF2 version during page editing.

• The reason for not automatically converting existing custom fonts is to prevent issues that could impact site design.

Thanks to these optimizations, fonts load faster and performance improves on Framer sites.

This article is a translated and adapted version of Framer's official blog on ‘How fonts are optimized in Framer’.