Framer includes a wide range of built-in fonts and provides access to Google Fonts and Fontshare. If your preferred typeface isn’t available, you can upload custom font files and use them throughout your project.

Upload and use a custom font

Follow these steps to upload a custom font to your project:

1. Add a text layer to your project.

2. Select the text layer.

3. In the right panel, open the font picker.

4. Go to the Custom tab.

5. Click Upload Fonts.

6. Select the font file from your computer.

7. After the upload is complete, select the font from the Custom tab.

The uploaded font can be applied to any text layer in your project.

Import custom fonts from Figma

When importing designs from Figma, custom fonts may be replaced with Framer’s default font if the original font is not available in Framer.

To restore the correct font:

1. Upload the custom font to your Framer project.

2. Select the imported text layers.

3. Reapply the uploaded font using the font picker.

Once the font is uploaded, it can be used across all compatible text layers in the project.

Font licensing and file formats

Before uploading a custom font, make sure you have the appropriate license to use it on your website.

For the best performance, use the .woff2 file format whenever possible. WOFF2 files are optimized for web delivery and typically load faster than other font formats.