You can select and add Google fonts to your projects directly from Project settings → fonts

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.

In this lesson

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
  1. 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.
 
  1. 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.