Add Google Fonts

You can add more fonts to your project directly from the font dropdown in the Style panel. Just choose add fonts, and we'll take you to your Project settings → Fonts settings. There, you can select and add Google fonts to your projects.

Using Google fonts is just one of three ways you can import additional fonts into your Webflow projects. The other two are Adobe fonts (Typekit) and custom fonts, available on all plans.

Important: Webflow’s Google Font integration requires the use of the Google Fonts API, which sends End User IP addresses to Google servers and may not be GDPR-compliant. Learn more about Google Fonts Privacy and Data Collection.

‍To keep from sending End User IP addresses to Google Servers, we recommend downloading fonts from Google and uploading them in Site settings > Fonts tab. Learn more about uploading custom fonts.

In this lesson

• Browsing Google fonts
  
• Adding a Google font to your project
• Removing a Google font 

Browsing Google fonts

If you want to browse through all the Google font options before making your selection, visit Google fonts [↗] for live previews of Google's collection of free web fonts. Once on the Google Fonts page, you can browse and sort through different categories and test how fonts will appear. This gives you a better idea of what a font will look like at a certain size and weight before you add it to your Webflow project.

Adding a Google font to your project

Once you have your selections in mind, go to your Webflow project:

1. Select the font from the dropdown under Project settings → Fonts → Google fonts

2. Select the weight variants, languages, and scripts you want for your project. You can always come back to this later to add or remove selections.

3. Add the font 

Selected fonts will be available in the Webflow designer the next time you load it. Refresh the designer if you already have it open.

Need to know
Google fonts that are already available in the Designer — like Lato— won't show up in the Google fonts list under Project settings → fonts.

Removing a Google font

To remove a Google Font from a project, just delete it in Project settings → fonts → Google fonts.

Need to know
Elements in the project that still have the font attached when it’s deleted will still display it as being selected, but it will render as Times New Romans.