How to Add a Google Font in Webflow

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.