Using Custom Fonts

Framer comes with quite a few built-in web fonts. You can also choose one of the many Google Fonts from the font picker.

If you need a typeface that isn’t already supported by Framer, you can upload your own custom fonts to any project within a Pro or Enterprise team.

Uploading and using a custom font

Framer currently supports the font formats .ttf and .otf. Follow the steps below to upload your favorite font to a project:

  1. Open a project in your Pro or Enterprise team
  2. In the properties panel to the right, select the font picker
  3. Toggle the Custom tab
  4. After reviewing the Terms of Service, click the Upload button
  5. Upload the font file from your computer

You can now pick your custom font from the Custom tab as the typeface for any text layer in your project.

The font will only be available within the project you uploaded it to. We are working on introducing Team Fonts, which will allow you to upload fonts which will be available in any team project.

Removing a custom font

It is easy to remove a custom font that you no longer want to be available. Just right click the font and select Delete.

Deleted fonts won’t display in the project’s Prototype view anymore.

Visibility of your custom fonts

Your custom font will display within your project, Preview and Prototype views for you as well as viewers and editors.

This means anyone viewing your prototype won’t need to have the font installed locally.

Desktop support

The Framer Desktop app already allows you to use local fonts. However, projects downloaded from web that contain custom fonts may not always pick up the equivalent local font yet.

We are working on a solution to streamline this so custom fonts from web projects will work seamlessly when downloaded to desktop.

Figma and Sketch projects

When you import projects from Figma or Sketch, you may have fonts that revert back to the default font. This is because the custom font in the original project is not available in Framer.

We are currently working on automatically registering custom fonts for projects imported from Figma and Sketch.

Until then, we recommend uploading the custom font to your imported project, multi-selecting the text layers, and then manually changing the font to the newly uploaded custom font.