Adding Custom Fonts

Framer offers a range of built-in web fonts. You can also select fonts from Google and Fontshare directly within the picker. If you need a typeface not supported by Framer, you can upload your own custom fonts.

Upload and use your own custom font

Upload and use your own custom font in your project by following these steps:

  1. Insert text into your project.

  2. In the properties panel on the right, select the font from the picker.

  3. Navigate to the Custom tab.

  4. Click the Upload button.

  5. Upload the font file from your computer.

  6. The font is now available in the Custom tab.

  7. Select a custom font from the Custom tab to use as the typeface for any text layer in your project.

custom fonts ui

Importing fonts from Figma

Custom fonts from imported Figma projects may revert to the default font in Framer. This occurs because the custom font from the original project is not available in Framer. To resolve this, upload the custom font to your imported project. Then, select the text layers and manually change the font to the newly uploaded custom font.

Note: Ensure you own the appropriate font license for your site to avoid issues. For optimal performance, use the .woff2 font format, which is optimized for size and helps your site load faster.