Add Google Fonts

You can add more fonts to your project directly from thefontdropdown in the Style panel. Just chooseadd fonts, and we'll take you to yourProject settings → Fonts settings. There, you can select and addGoogle fontsto your projects.

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

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, visitGoogle 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 underProject 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 underProject settings → fonts.

Removing a Google font

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

Need to know
元素的项目have the font attached when it’s deleted will still display it as being selected, but it will render as Times New Romans.