This document was created to assist local users learning Framer who face challenges due to a lack of Korean resources. We've translated content from the official blog into Korean and added practical information. We hope this is helpful to everyone using Framer.

Why Use Custom Fonts?

Framer offers a variety of web fonts and integrates with Google and Fontshare by default. However, if you need to use a unique brand font or a custom-made typeface, you must upload it via the ‘Custom’ tab.

Upload & Application Steps

1. Add a text layer to your project

2. Open the font selector in the properties panel on the right

3. Click the Custom tab

4. Hit the Upload button

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

6. Once uploaded, the font entry is added to the ‘Custom’ tab

7. Selecting the font will instantly apply it to the text

Note: The .woff2 format is best optimized for the web. It has a small file size and loads quickly.

Tips for Applying Custom Fonts from Figma

When importing text from Figma to Framer, custom fonts may be replaced with default fonts.
In such cases, you need to upload the custom font within the Framer project and select the text to reapply it.

Performance Optimization & Licensing

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

• Font License: For websites, a Webfont (WOFF/WOFF2) license is necessary. It's faster and has better compatibility than desktop fonts (TTF/OTF).

Troubleshooting Tips After Font Upload

• If you can't see the variation (weight): Make sure only .woff2 files were uploaded.

• If font family/style is not recognized: Check if the font name (metadata) matches the actual name and if multiple styles are grouped under one family. (Modify in tools like Glyphs)

What Services Require This Feature?

For example, in professional corporate brand pages or sites, font style is crucial, and you often need to apply custom or purchased fonts. In such cases, through 'Custom Font Upload,' we can freely use various fonts within Framer.

This content is a translation and adaptation of Framer's official blog post ‘Adding Custom Fonts’.