> ## Content Index > Fetch the complete content index at: https://designzig.com/llms.txt > Use this file to discover other available public pages before exploring further. # Framer Custom Fonts 2.0: Upload, Preview, and Organize Your Type with Ease - URL: https://designzig.com/custom-fonts-in-framer/ - Published: 2025-11-06T13:07:31.000Z - Updated: 2026-08-12T06:22:22.000Z - Author: DesignZig Editor - Tags: framer, News, #Import 2026-10-18 19:23 [Framer](https://framer.link/designzig) 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 [![](https://designzig.com/content/images/2025/11/Framer-custom-fonts.png)](https://framer.link/designzig) Framer Custom Fonts selector 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](https://framer.link/designzig), eliminating the disparity between how built-in and uploaded fonts are handled.​ ## How to Upload Custom Font in Framer [![](https://designzig.com/content/images/2025/11/Screenshot-2025-11-06-181436.png)](https://framer.link/designzig) Uploading 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](https://framer.link/designzig) 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**](https://framer.link/designzig) 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 [![](https://designzig.com/content/images/2025/11/Framer-fotn-family-grouping.png)](https://framer.link/designzig) Framer Font family Grouping 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](https://framer.link/designzig).​​ ## 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 [![](https://designzig.com/content/images/2025/11/Framer-variable-font.png)](https://framer.link/designzig) Framer Variable font weight change 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** ](https://framer.link/designzig)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](https://framer.link/R80eTl6) 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. [![](https://designzig.com/content/images/2025/05/collections-designzig-com.png)](https://collections.designzig.com/) [Discover top design tools & resources](https://collections.designzig.com/)