How to Upload a Custom Font in Webflow
Learn how to upload and use a custom font in Webflow: WOFF2, Project Settings, and font weights.
In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to upload and use a custom font (owned or purchased) in your Webflow project.
1. Convert your font to WOFF2
If you have a TTF or OTF file, convert it to WOFF2 with CloudConvert (free). WOFF2 is 30% lighter than WOFF and supported by all modern browsers.
2. Upload it in Webflow Fonts
In the Designer, go to Project Settings > Fonts. Click Upload Font. Upload your WOFF2 file (and optionally WOFF for fallback). Set the Font Family Name you want to use in your styles.
3. Use the font in your styles
The uploaded font now appears in the font picker in the Typography panel. Select an element, open the Typography panel, and choose your font from the list.
4. Load all the weights you need
If your font has multiple weight files (Regular, Bold, Italic...), upload each one separately in Project Settings > Fonts. Set the same Font Family Name and specify the matching weight and style for each file.
Conclusion
Custom fonts upload directly in Project Settings, no code needed. For performance: optimize fonts in Webflow.
Good to know
Heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
