This document was created to help domestic users who are learning Framer and experiencing difficulties due to the lack of Korean resources. It translates content from the official blog into Korean and adds practical information. We hope it will be of some help to Framer users.

Why use custom fonts?

Framer natively offers a variety of web fonts and integration with Google and Fontshare. However, if you need to use a brand-specific font or a custom font you created, you should upload and use it in the ‘Custom’ tab.

Upload & Apply Steps

1. Add a text layer to the project

2. Open the font selector in the right properties panel

3. Click the Custom tab

4. Press the Upload button

5. Select .woff2, .woff, .ttf, .otf files locally

6. Once uploaded, the font item will be added to the ‘Custom’ tab

7. After selecting the font, it can be immediately applied to the text

Note: The .woff2 format is best for web optimization. It has a small file size and fast loading.

Tips for Applying Custom Fonts Imported from Figma

When importing text from Figma to Framer, custom fonts may sometimes be replaced by default fonts.
In this case, upload the custom font within the Framer project and then select the text to reapply it.

Performance Optimization & License

• Font Performance: When using .woff2 files, Framer automatically provides optimization features (compression, subsetting, font-display: swap).

• Font License: For websites, a Webfont (WOFF/WOFF2) license is needed. It's faster and more compatible than desktop (TTF/OTF).

Tips for Resolving Errors After Font Upload

• Weight variation not showing?: Check if only .woff2 files are uploaded.

• Font family/style recognition not working: Ensure the font name (metadata) matches the actual name, and multiple styles are grouped under one family. (Edit using Glyphs, etc.)

What services need this feature?

For example, professional corporate branding pages or sites often require unique font styles, where it might be necessary to use custom-created or purchased fonts. In this case, we can freely use various fonts within Framer through ‘custom font upload’.

This article is a translated and adapted version of Framer's official blog content ‘Adding custom fonts’.