Web Design » Figma » How Do I Use Google Fonts in Figma?

How Do I Use Google Fonts in Figma?

Last updated on September 28, 2022 @ 10:36 pm

Google Fonts is a great resource for web designers and developers. There are hundreds of fonts to choose from, and you can use them for free in your projects. But how do you use Google Fonts in Figma?

The first thing you need to do is go to the Google Fonts website and browse through the fonts. When you find one that you like, click on the “Add to Collection” button.

PRO TIP: Google Fonts may not work as expected in Figma. We recommend using local fonts instead.

Once you’ve added a few fonts to your collection, click on the “Use” button at the top of the page. This will take you to the “Get the code” page, where you can choose which styles of the font you want to use, and get the code to paste into your Figma project.

In Figma, open the project you want to use the font in, and go to the “File” menu. Choose “Add External CSS”, and paste in the code from the “Get the code” page. Now all of your text will be using the Google Fonts that you chose!

Google Fonts is a great way to add some personality to your web projects. With hundreds of fonts to choose from, there’s sure to be one that’s perfect for your project. And best of all, they’re all free to use!

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.