Lesson info

With Webflow, you can select and use any Google Fonts right from your site settings. And that's just one of three ways you can use additional fonts in your Webflow projects. In this video, we'll show you how to add, remove, and use Google Fonts in your Webflow projects.

Assets

Want to follow along with this lesson? Fortunately, we created a zip file which contains all the assets used in the project, and we've included that link 

right here
.

Transcript

When it comes to font selection, sometimes Times New Roman just won’t cut it. And perhaps you’re having second thoughts as to whether Comic Sans is the right stylistic choice for your H2s.

Have no fear: Google Fonts is ready to go. And it’s one of our three ways to bring additional fonts right into our Webflow projects.

From your Project Settings, you can head over to Fonts. And if you want to browse before you make a decision, click the link over to your right to visit the Google Fonts page directly.

From there, you can browse and sort through different categories, then test out how fonts are going to appear. And this gives you the option to work with, tweak, and get a better idea of what a font might look like at a certain size before you bring it into your project.

Once you’ve made your decision, head back over to your Project Settings, and choose the font you want to add from the list. Variants and language or script options will appear below (if there are any), so you can choose the right selections for your project. You can always come back to this later to add or remove these selections, and you can always add additional Google Fonts as well.

Press Add Font, and you’re ready to go. If you head on over to the Designer, you’ll have instant access to the font family so you can begin styling immediately.

To remove a Google Font, press Delete next to the font you want to remove.

And that’s it! Google Fonts right inside of Webflow.