How to Add a Google Font in Webflow
Learn how to add a Google Fonts font in Webflow: native integration, CSS import, and font weight optimization.
In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to add a Google Fonts typeface to your Webflow project.
1. Use the native Webflow integration
In the Designer, select a text element. In the Typography panel, click the font selector. The list includes the most popular Google Fonts directly. Select your font and choose the weights you need.
2. Add a Google Fonts typeface that isn't listed
For a font that doesn't appear in the native list, go to fonts.google.com, select your font and the weights you want. Copy the provided <link> code and paste it into Project Settings > Custom Code > Head. The font will then be available in Webflow by typing its name in the Font Family field.
3. Limit the weights you load
Each weight is an extra file. Only import the weights you actually use (usually Regular 400 and Bold 700 are enough). In the Google Fonts URL, adjust the wght@400;700 parameter to fit your needs.
Conclusion
Google Fonts integrates into Webflow in just a few clicks. For custom fonts: upload a custom font to 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.
