Quick Guide On How to Add Fonts To Figma

Quick Guide On How to Add Fonts To Figma

Vlad Solomakha

Vlad Solomakha

Mar 22, 2024

Mar 22, 2024

Step-by-step guide on how to use local fonts, Google, and Adobe fonts inside your Figma design.

Step-by-step guide on how to use local fonts, Google, and Adobe fonts inside your Figma design.

Install Apps

Before you start anything, there are 2 ways to use custom fonts in Figma. 

  1. Get the Figma Desktop app. Here are download links for macOS and Windows.

  2. Get the Figma Font Installer app. It allows you to access system fonts while using Figma in the browser. Here are download links for macOS and Windows.

Install Fonts

Using Custom Fonts

Before your fonts can appear in Figma, they must be installed on your computer. Download OpenType (.OTF) or TrueType (.TTF) files of fonts you like, double-click them and follow the instructions. 

Using Google Fonts

The great news is that Figma supports Google fonts by default! You can filter to view only them. Select the font and click on "All fonts". There you can see the "Google font" selection.

Using Adobe Fonts

Adobe requires you to re-download the fonts if they weren't used for a certain amount of time. Make sure the fonts are activated in the Creative Cloud App. 

  1. In the CC app go to the Fonts tab

  2. Open Active fonts and activate the ones you want to see in Figma

Using Fonts in Figma

If you have installed fonts white Figma was open, close the app and restart it. Now you can use them!

  1. Select the text tool (T) or click on an existing text element.

  2. In the text properties panel, click on the font name to bring up the font selection menu. 

  3. Scroll through the list or type the name of the font you installed. Once you find it, click on it to apply.

Collaborating with Custom Fonts

If you're working with a team, ensure that everyone who might need to edit your designs has the custom fonts installed on their computers. Otherwise, they won't be able to use the fonts you've applied. 

Figma will alert users if they are missing a font and provide the option to replace it with a different font or ask them to install the missing font.

Install Apps

Before you start anything, there are 2 ways to use custom fonts in Figma. 

  1. Get the Figma Desktop app. Here are download links for macOS and Windows.

  2. Get the Figma Font Installer app. It allows you to access system fonts while using Figma in the browser. Here are download links for macOS and Windows.

Install Fonts

Using Custom Fonts

Before your fonts can appear in Figma, they must be installed on your computer. Download OpenType (.OTF) or TrueType (.TTF) files of fonts you like, double-click them and follow the instructions. 

Using Google Fonts

The great news is that Figma supports Google fonts by default! You can filter to view only them. Select the font and click on "All fonts". There you can see the "Google font" selection.

Using Adobe Fonts

Adobe requires you to re-download the fonts if they weren't used for a certain amount of time. Make sure the fonts are activated in the Creative Cloud App. 

  1. In the CC app go to the Fonts tab

  2. Open Active fonts and activate the ones you want to see in Figma

Using Fonts in Figma

If you have installed fonts white Figma was open, close the app and restart it. Now you can use them!

  1. Select the text tool (T) or click on an existing text element.

  2. In the text properties panel, click on the font name to bring up the font selection menu. 

  3. Scroll through the list or type the name of the font you installed. Once you find it, click on it to apply.

Collaborating with Custom Fonts

If you're working with a team, ensure that everyone who might need to edit your designs has the custom fonts installed on their computers. Otherwise, they won't be able to use the fonts you've applied. 

Figma will alert users if they are missing a font and provide the option to replace it with a different font or ask them to install the missing font.