Add Google Fonts

Add Google Fonts to your project settings and use them in your Webflow project.

 
This video features an old UI. Updated version coming soon!

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.

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.

On the right side of the Google Fonts section of the Fonts settings page there is a paragraph of copy directing users to see the live previews of Google's collection. Step one is to click on the Google Fonts link which is highlighted.
Step two is to filter your font search with categories. The Google Fonts page is displayed with several font examples displaying "The modern way to build for the web."

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
The dropdown menu is expanded on the "Choose font from list:" section.
  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.
A font called Aleo has been selected from the Google Fonts list. The weight variants checked for use are 300, Regular and 700. Latin is the only option check marked for the Language/script to include. A green Add Font button is below these settings.
  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.

A font called Aleo is selected in the Typography settings on the style panel. The font name is highlighted.
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.

Under the Added Google Fonts section a gray delete button on the far right side is highlighted. Under the font name Aleo, there are details of the weight variants and languages added.
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.
Try Webflow — it's free
No items found.
This video features an old UI. Updated version coming soon!