Integrate Google Typeface

You have the option to include extra typefaces directly on your website using the Font selection within the Style panel. Opt for Include typefaces, which will lead you to Site configurations > Typeface tab. From there, you can embed Google typefaces to your site.

If you wish to utilize custom typefaces or Adobe typefaces, you can integrate them into your website from their respective sections within Site configurations > Typeface tab.

Valuable information: No premium Site or Workspace plan is necessary to utilize Google typefaces.

Key point: Webflow’s integration with Google typefaces relies on the Google Typefaces API, which transmits End User IP addresses to Google servers and may not comply with GDPR regulations. Find out more about Google Typefaces Privacy and Data Collection.

To avoid transmitting End User IP addresses to Google servers, we suggest downloading typefaces from Google and uploading them in Site configurations > Typeface tab > Custom typefaces. Explore further about uploading custom typefaces.

In this tutorial, you will understand:

1. How to locate Google typefaces
2. How to insert Google typefaces into your website
3. How to eliminate Google typefaces from your website
4. How to verify if your website loads the Google Typefaces API

How to locate Google typefaces

If you want to explore Google typeface choices before making your decision, visit Google typefaces for live previews of Google’s free web typefaces.

There, you can filter through typeface categories and test how typefaces will display to get a better understanding of a typeface’s appearance at various sizes and styles before integrating it into your Webflow site.

How to insert Google typefaces into your website

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

1. Access Site configurations > Typeface tab > Google typefaces 
2. Select the typeface you want to apply on your website 
3. Choose the variations (e.g., style, bold, etc.), languages, and writing systems you intend to include on your site — remember that you can make modifications later 
4. Click Insert typeface

The typefaces you upload will be accessible in Style panel > Typography > Font upon your next Designer reload. If you are already in the Designer, the uploaded typefaces will become accessible once you refresh the page.

The Font dropdown organizes typefaces based on their origin (e.g., Google typefaces, Custom typefaces, Web typefaces) and arranges typefaces alphabetically within each origin. Any typefaces you have integrated into your website via the Google typefaces integration will be listed under Google typefaces, alongside default Google typefaces in the Designer (e.g., Lato, Varela, etc.).

Valuable information: Default Google typefaces in the Designer (e.g., Lato,  Varela, etc.) will not display in the Google typefaces list in Site configurations > Typeface tab > Google typefaces. 

How to remove Google typefaces from your website

To eliminate a Google typeface from your website, you must first detect all occurrences of that Google typeface, erase all instances of the Google typeface from your website, and ultimately delete the Google typeface from Site configurations > Typeface tab > Google typefaces.

Key point: Deleting a Google typeface from Site configurations > Typeface tab > Google typefaces alone will not remove the typeface from your website. The Google typeface will continue to appear in your website’s published CSS and continue loading the Google Typefaces API script until you eradicate all instances of the Google typeface from your website. Any textual elements referencing the deleted typeface will render as Times New Roman on the published website. 

To pinpoint all occurrences of a Google typeface on your website, open the Style selectors panel and input the name of the typeface you wish to locate. This will provide a list of all the classes and HTML tags on your website using that Google typeface. You can click the “list” symbol next to each class to see elements and components utilizing that class.

Once you’ve identified the classes and/or HTML tags using the Google typeface, you will need to either delete the elements employing that typeface and tidy up their unused classes in the Style selectors panel, or modify the typeface used by those classes and/or HTML tags in Style panel >Typography > Font.

After removing all instances of the Google typeface from your website, you can delete the Google typeface from Site configurations:

1. Access Site configurations > Typeface tab > Google typefaces 
2. Click Erase next to the Google typeface you wish to delete from your website
3. Re-publish your website to enact the changes 

How to verify if your website loads the Google Typefaces API 

After removing all Google typefaces, you might want to confirm that your website no longer loads the Google Typefaces API. This is particularly crucial if you aim to guarantee GDPR conformance.

To check if your website loads the Google Typefaces API in Google Chrome:

1. Visit your published website 
2. Right-click anywhere on the page and select “Inspect” 
3. Access the Network tab
4. Refresh the page
5. Inspect the Network tab to locate the webfont.js file 

If you can spot the webfont.js file, your website has loaded the Google Typefaces API script, and you will need to repeat the aforementioned steps to eliminate all Google typefaces from your website. If you do not encounter the webfonts.js file in the Network tab, your website did not request or load the Google Typefaces API.