Adding Custom Fonts in Framer

Framer includes a wide selection of built-in web fonts and gives you access to Google Fonts and Fontshare directly from the font picker. But if the font you need isn't available, you can upload and use your own custom typeface.

Upload and Use Your Own Custom Font

To add a custom font to your project:

1. Add a text element to your canvas.

2. Open the Properties panel on the right.

3. In the font picker, switch to the Custom tab.

4. Click the Upload button.

5. Choose the font file from your computer (make sure it’s a supported format).

6. Once uploaded, the font will appear under the Custom tab.

7. Select the uploaded font and apply it to any text layer in your design.

Importing Fonts from Figma

When importing a Figma design that uses a custom font, Framer may automatically replace it with a default system font. This happens when the original font isn’t available in Framer.

To resolve this:

• Upload the missing custom font manually in Framer (as described above).

• Re-select the affected text layers.

• Apply the uploaded font again from the Custom tab.

Note: Make sure you have the proper license to use any custom fonts on your website. For best performance and faster loading times, use the .woff2 format when uploading your font files.