Adding Custom Fonts
Framer comes with quite a few built-in web fonts. You can also choose Google Fonts from the font picker. However, if you need a typeface that isn’t already supported by Framer, you can upload your own custom fonts.
Uploading and using a custom font
• Add text to your project.
• In the properties panel to the right, select the font picker
• Toggle the Custom tab.
• Click the Upload button.
• Upload the font file from your computer.
• The font should now be available in the Custom tab.
• You can now pick your custom font from the Custom tab as the typeface for any text layer in your 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.
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.
Format and License
You should always make sure you own the appropriate font license for your site (or it might be taken down). The preferred format is .woff2 which is optimized for size so your site loads faster.
