Developers

Search

Adding custom fonts

Framer provides a variety of built-in web fonts and allows you to select fonts from Google and Fontshare directly within the picker. If a typeface you need isn’t supported by Framer, you can upload your own custom fonts.

Upload and use your own custom font

Follow these steps to upload and use a custom font in your project:

  1. Add text to your project.

  2. Open the properties panel on the right and select the font from the picker.

  3. Go to the Custom tab.

  4. Click Upload.

  5. Choose the font file from your computer.

  6. The font will now appear in the Custom tab.

  7. Select the uploaded font from the Custom tab to apply it to any text layer in your project.

The image shows a graphic design software interface with a font and text panel, featuring customizable font, size, color, alignment, and style options, allowing users to upload fonts from their computer for use in projects.

Importing fonts from Figma

Custom fonts from Figma projects may default to Framer’s standard font because the original custom font isn’t available. To fix this, upload the custom font to your project in Framer. Then, select the text layers and reapply the font by choosing the newly uploaded custom font.

Note: Ensure you have the proper font license for your site. For better performance, use the .woff2 font format, as it is optimized for faster loading.

FAQ

Lesson FAQ

  • How do I upload and use a custom font in my Framer project?

    To upload and use a custom font in your Framer project, add text to your project, open the properties panel on the right, and select the font from the picker. Go to the Custom tab, click Upload, and choose the font file from your computer. The font will now appear in the Custom tab, and you can select it to apply to any text layer in your project.

  • What should I do if my custom font from Figma is not showing up in Framer?

    If a custom font from your Figma project defaults to Framer’s standard font, upload the custom font to your project in Framer. Then, select the text layers and reapply the font by choosing the newly uploaded custom font.

  • Are there any best practices or requirements for uploading custom fonts to Framer?

    Ensure you have the proper font license for your site. For better performance, use the .woff2 font format, as it is optimized for faster loading.

Updated