Add Google Fonts

Updated

Add Google Fonts to your Site settings to use them on your Webflow site.

You can add additional fonts directly to your site from the Font dropdown in the Style panel. Choose Add fonts and you’ll be redirected to Site settings > Fonts tab. There, you can add Google fonts to your site.

If the fonts you want to use are custom fonts or Adobe fonts, you can add these to your site from their respective sections in Site settings > Fonts tab.

Good to know

You do not need a paid Site or Workspace plan to use Google fonts.

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 > Custom fonts. Learn more about uploading custom fonts. 

How to find Google fonts

If you want to browse through Google font options before making your selection, visit Google fonts for live previews of Google’s free web fonts. 

There, you can sort through font categories and test how fonts will appear to give you a better idea of what a font looks like at different sizes and weights before you add it to your Webflow site. 

How to add Google fonts to your site

Once you have your selections in mind, you can add them to your Webflow site: 

  1. Go to Site settings > Fonts tab > Google fonts 
  2. Choose the font you’d like to use on your site 
  3. Choose the variants (e.g., weight, italics, etc.), languages, and scripts you want to include on your site — note that you can always change your selections later 
  4. Click Add font 

The fonts you upload will be available in Style panel > Typography > Font the next time you load the Designer. If you already have the Designer open, the fonts you upload will be available once you refresh the page. 

The Font dropdown separates fonts by their source (e.g., Google fonts, Custom fonts, Web fonts) and orders fonts alphabetically within each source. Any fonts you’ve added to your site through the Google fonts integration appear under Google fonts, along with Google fonts that are available in the Designer by default (e.g., Lato, Varela, etc.).

Good to know

Google fonts that are available in the Designer by default (e.g., Lato,  Varela, etc.) won’t show up in the list of Google fonts in Site settings > Fonts tab > Google fonts.

How to remove Google fonts from your site

To remove a Google font from your site, you’ll first need to identify all instances of that Google font, remove all instances of the Google font from your site, and finally delete the Google font from Site settings > Fonts tab > Google fonts.

Important

Deleting a Google font from Site settings > Fonts tab > Google fonts alone will not remove the font from your site. The Google font will continue to show up in your site’s published CSS and continue to load the Google Fonts API script until you remove all instances of the Google font from your site. Any typography elements that reference the deleted font will render as Times New Roman on the published site. 

To identify all instances of a Google font on your site, open the Style selectors panel and type the name of the font you want to find. This generates a list of all the classes and HTML tags on your site that use that Google font. You can click the “list” icon next to each class to view a list of elements and components that use that class. 

Once you’ve identified the classes and/or HTML tags that use the Google font, you’ll need to either delete the elements that use that font and clean up their unused classes in the Style selectors panel, or change the font used by those classes and/or HTML tags in Style panel >Typography > Font.

Once you’ve removed all instances of the Google font from your site, you can remove the Google font from Site settings: 

  1. Go to Site settings > Fonts tab > Google fonts 
  2. Click Delete next to the Google font you want to remove from your site
  3. Republish your site for your changes to take effect 

How to check if your site loads the Google Fonts API 

After removing all Google fonts, you may want to check to ensure your site no longer loads the Google Fonts API. This is especially important if you want to ensure GDPR compliance.

To see if your site loads the Google Fonts API in Google Chrome: 

  1. Visit your published site 
  2. Right-click anywhere on the page and choose “Inspect” 
  3. Go to the Network tab
  4. Refresh the page
  5. Review the Network tab to find the webfont.js file 

If you can find the webfont.js file, your site loaded the Google Fonts API script, and you’ll need to retake the above steps to remove all Google fonts from your site. If you can’t find the webfonts.js file in the Network tab, your site did not call or load the Google Fonts API. 

Related articles