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
.otf. Follow the steps below to upload your favorite font to a project:
- Open a project in your Pro or Enterprise team
- In the properties panel to the right, select the font picker
- Toggle the
- After reviewing the Terms of Service, click the Upload button
- 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.
Upload a custom font from the font picker
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 that 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
Right-click a font to delete it
Deleted fonts won’t display in the project’s Prototype view anymore.
Visibility of your custom fonts
This means anyone viewing your prototype won’t need to have the font installed locally.
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.