How to Add Custom Fonts in Webflow

Custom fonts bring a unique personality to your web designs. Here’s a simple guide to uploading them in Webflow, plus tips on variable fonts to keep your site looking sharp and loading efficiently.

Google font integration

Before we dive into custom font uploads, it's worth noting that Webflow offers easy integration with Google Fonts, giving you access to a wide range of free fonts that can be instantly added to your project. While this is a convenient option, it’s important to be aware that using Google Fonts may not be fully compliant with GDPR regulations in Europe, as it can involve user data being transferred to Google servers in the U.S. For projects targeting European users, it’s wise to consider custom font uploads or explore locally-hosted fonts as an alternative to Google Fonts, ensuring you’re in line with privacy laws.

Adding a custom font

Step 1: Choose the Right Font File

For web use, WOFF and WOFF2 files are optimal. They’re compressed and load faster than older formats, providing compatibility across modern browsers. If your custom font file isn’t in WOFF or WOFF2, consider converting it for better web performance.

Step 2: Upload Your Font to Webflow

1. Open Project Settings: Navigate to your Webflow project, and under Settings, go to Fonts.
2. Upload the Font Files: Scroll to the Custom Fonts section and click Upload. Select your prepared files (up to 10MB per file).
3. Name the Font: This is the name that will appear in your Designer font list, so choose something recognizable.

Once uploaded, the font is available for use across the project.

Step 3: Apply Your Custom Font

In the Webflow Designer:

1. Select any text element, like a heading or paragraph.
2. In the Typography section, find your custom font under the font list.
3. For consistency, you can quickly apply your font across similar elements by selecting HTML tags like All Headings or All Paragraphs. This allows you to apply the font to every heading tag in one step, ensuring your typography is unified across the site.

Your custom font will display as you work in the Designer and on the live site, giving you a real-time preview.

Variable Fonts

Variable fonts give you a unique way to streamline and enhance your website’s typography by packing multiple font styles—such as different weights, widths, and even slants—into a single font file. This results in reduced load times compared to using multiple separate files, offering both visual flexibility and technical efficiency. You can make dynamic adjustments to a font’s appearance without switching between files, leading to a smoother and more polished user experience.

Using Variable Fonts in Webflow:

1. Upload Your Variable Font: Begin by uploading your variable font file, typically in WOFF2 format, through the Asset Manager. This ensures the best compatibility with Webflow and modern browsers.
2. Adjust Font Variants in the Designer: Once uploaded, Webflow’s typography panel allows you to control supported attributes, like weight or width, directly in the Designer. Some fonts have extensive customization options, while others may be more limited, so Webflow’s compatibility may vary based on the font's features. For users, this approach can unlock smooth font transitions, unique visual effects, and a cohesive look without adding multiple font files.

Variable fonts not only enhance creative freedom but also streamline file management and performance, making them a powerful option for web designers looking to keep their sites visually engaging yet optimized.