How to Add Fonts to Figma

Does your web or app design need some wow factor? Maybe your go-to font has starred in way too many of your projects? Time to add some new fonts to your repertoire! 

In this post we’ll run though the basics of how to add fonts to Figma, where to find fonts, how to pick a good font, and how to match different fonts.

By the way, what is Figma?

Figma is an awesome tool for rapidly prototyping apps, websites and other digital products. It allows you to create, share and test designs so you can work out exactly how things are going to look, get feedback from stakeholders and quickly and easily make changes – before sending it through to a developer to code (or starting to code it yourself if you’re clever like that). 

This guide is based on my Figma UI and UX Essentials course. When you become a BYOL member, you gain access to this course as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

What fonts can I use in Figma?

Before you can add fonts to Figma, there are a couple of things to know. The main thing to be aware of is that whatever font you choose, you need to have a web version of that font. A web font is a type of font file that will be embedded into your app or website by the developer. When you purchase fonts you often have to choose the font type at the time of purchase.

Here’s an example from MyFonts.com 

You’ll notice that you need to decide the purpose of your font so that you pay for the right license type and download the correct file type.

A simple solution

This all sounds a bit technical, we just want a font that looks cool, right?! Fortunately, an easy way of finding fonts that meet the above criteria (and are also free!) is to use Google fonts.  

Google fonts are free for commercial and personal use and there is a large library of fonts to browse – from the stylish and sophisticated to the loud and crazy. 

How to choose fonts in Google Fonts

As there are thousands of fonts available on Google Fonts you may want to limit your browsing options by using the ‘Filters’ button. This will let you select things like language, decorative stroke, classification, and properties.

What’s a serif, what does monospace mean? These are typographic terms used to define and group typefaces into categories. Just click on them to see what comes up. If you're interested in expanding your knowledge of type and fonts, check out this article on type classifications.

If you are still daunted by how to choose a typeface, google fonts itself has some great tips on choosing type.

Once you have found a font that is aligned with the message and sentiment you are aiming to convey, click into the font to explore in more detail. Here you can type your own text to see it previewed in the font and also see all of the styles in that family. Click ‘Get Font’ to download, and then you are ready to add your font to Figma.

Once you have selected and downloaded the font you would like to use, you are ready to add the font into Figma.

How to add fonts to Figma

1. Download the font from google fonts (or another type website).

2. Generally, when you download a font file it will be a zipped (compressed) folder. Unzip by double-clicking on the folder (MAC) or right-clicking on the folder and choosing ‘Extract’ (PC).

3. Install onto your machine 

   • on the Mac just double-click on each font file and your Mac will install it – Macs use an app called Font Book to view and manage fonts.

   • on the PC you will need to add your font files to the Fonts folder (more details here ).

Your fonts are now added to Figma - it’s as easy as that!

1. To use these new fonts, select or create a text layer in a Figma design file.

2. Open the font selector in the right sidebar.

3. Open the filter dropdown and choose ‘Installed by you’ to find the fonts that you have added to Figma.

How do I pick fonts that look good together?

You’ve added a font to Figma, what next? If you’re thinking ‘it was hard enough choosing a font for the heading, how am I going to pick the rest of the fonts’… ‘font pairing’ is the phrase for you! 

Font pairing is the term for selecting two complimentary fonts that look good together. Try googling ‘font pairing’ plus the name of the font you have chosen. You’ll find font pairing suggestions as well as visual examples.

There’s also a handy resource on Figma.com with a list of suggested google font pairings that you can open directly in Figma.

As you can see adding fonts to Figma is relatively simply, but there are a few things to take into consideration. 

• Make sure you are choosing a font that has a webfont version available. 

• Using a website like Google Fonts makes it simple to add the correct fonts to Figma.

• Do some reading on a bit of type theory to pick the right fonts for your project.

Don’t get stuck in a rut using the same old fonts, give your app and website designs a smart new look by adding new fonts to Figma!

If this has given you a taste of Figma and you’d like to explore more, don't miss my Figma UI UX Design Essentials course. When you become a BYOL member, you will gain access to my Figma courses as well as my 30+ additional courses on Photoshop, Illustrator, Lightroom, Premiere Pro, Webflow, and more. As a BYOL member you will also enjoy personalized support, earn certificates, and tackle exciting community challenges. Head here to sign-up!

See you in class! – Dan