Framer released Custom Fonts 2.0 as part of its November 2025 update, introducing a complete redesign of how custom fonts work within the web design platform. The update brings family-based font grouping, realtime previews, enhanced variable font support, and improved management workflows to address long-standing usability challenges for designers working with custom fonts in Framer.
Why This Update Matters
The previous custom font in Framer system displayed every individual font file separately in the font picker, creating significant navigation challenges for designers working with extensive font libraries.
Custom Fonts 2.0 addresses this friction by organizing fonts by family rather than by file, making it substantially faster to locate and apply the desired typeface.
This update aligns custom fonts with the existing web font experience in Framer, eliminating the disparity between how built-in and uploaded fonts are handled.
How to Upload Custom Font in Framer
Understanding how to upload custom font in Framer remains essential for designers implementing brand-specific typography.
- Select any text element on the Framer canvas.
- Open the Properties panel on the right side.
- In the Font picker, click the “Custom” tab.
- Press the “Upload” button.
- A file selection window will open.
- Choose a font file from your computer — supported formats include .woff2, .woff, .ttf, and .otf.
- Once uploaded, the custom font appears in the Custom tab.
- You can now apply the font to text layers throughout your project.
For designers who want custom fonts available across all projects, Framer offers workspace-level font management.
- Navigate to the Workspace Settings panel.
- Locate the Font section.
- Click the “Upload” button.
- Select and upload your custom font file.
- The uploaded font will automatically appear in every new project within that workspace.
This eliminates the need to repeatedly upload the same fonts for each individual project.
Family Grouping Simplifies Font Selection
Custom fonts are now automatically grouped by font family in the picker interface, eliminating the need to scroll through dozens of individual weight and style variations.
Previously, a single typeface family with multiple weights could generate eight or more separate entries in the font picker; now these appear as a single family group. This organizational change dramatically reduces visual clutter and accelerates the font selection process for designers managing multiple custom typefaces in Framer.
Realtime Previews Match Web Font Experience
Before:
- Custom fonts appeared as plain text entries in the font picker.
- Designers had to apply the font manually to see how it rendered.
- This caused trial-and-error when experimenting with different typefaces.
Now:
- Custom fonts now show real-time previews directly in the font picker.
- The experience now matches Framer’s built-in web fonts.
- Designers can evaluate typefaces visually before applying them, streamlining the workflow.
Enhanced Variable Font Support
Families containing multiple variable font files now properly display all available weights and styles in Framer's property panel.
The previous system struggled to correctly render the full range of variable font properties when multiple files were uploaded as part of a single family. This improvement ensures designers can access the complete typographic flexibility that variable fonts offer, including intermediate weight values and style variations.
Best Practices for Custom Fonts
- Framer recommends using the .woff2 font format for custom fonts due to its smaller file size and faster loading performance.
- Designers should verify proper font licenses for website deployment before uploading custom fonts.
- When importing projects from Figma with custom fonts, those fonts may default to Framer’s standard font if the originals aren’t available.
- To fix this, upload the missing custom font to the Framer project.
- Then, select the affected text layers and reapply the font from the Custom tab.
Additional November Update Features
- Design Pages now open automatically when no Web Pages exist.
- Added right-to-left (RTL) support for Ticker, Carousel, and Slideshow components.
- A new command-drag shortcut prevents automatic layer nesting during element rearrangement.
- Performance improvements include:Faster CMS Sample collection additions.Improved availability of CMS field changes on the canvas.
- Bug fixes address:Text style duplication issues.Desktop App stability on both Mac and Windows.Various asset panel behavior inconsistencies.
