How To Add Fonts To Figma in 3 Easy Steps

If you do any kind of collaborative design work, you probably already use Figma. It’s a powerful cloud-based tool, primarily used for web and UX design, but perfect for any design project that requires real-time collaboration. 

When it comes to effective design, one particularly important aspect is your choice of fonts. And while Figma offers hundreds of built-in options, sometimes you need a custom font to adhere to specific brand guidelines or make your project stand out. Luckily, adding custom fonts to Figma takes just a few simple steps. 

Figma Fonts Explained

Figma comes with an extensive library of Google fonts for you to choose from. But if you can’t find a font you like, you can always download a custom font and install it on your computer. Just don’t forget to check the licensing information and make sure you have permission to use it. If you have an Adobe Creative Cloud subscription, you can also install Adobe Fonts and use them in Figma. 

How you access installed fonts depends on whether you use Figma in your browser or as a desktop app: 

Desktop app

When you use the Figma desktop app, it automatically gives you the option to use installed fonts. 

In-browser

If you don’t have the desktop app, you’ll need to download the Figma Font installer before you can use installed fonts in the browser. However, if you have the Figma desktop app installed, but would like to use the in-browser version anyway, there’s nothing else you need to do—you automatically download the Font installer when you download the desktop app. 

It’s important to note that when other users access your design, they’ll see an error message and won’t be able to use the custom font you installed. To proceed, they’ll need to install the font on their own devices. 

How To Add Fonts To Figma in 3 Steps 

Let’s take a look at how to add fonts to Figma in more detail. 

Step 1 (Option 1): Download the Figma Font Installer

If you use Figma exclusively in your browser, you need to download the Font installer. 

Head to the Figma downloads page and download the Font installer that fits your operating system (Windows or Mac). 

On a Windows computer:

1. Find the installation file in your Downloads folder and double-click it 
2. In the window that pops up, click Install, then click Close

On a Mac computer:

1. Find the installation file in your Downloads folder and double-click it 
2. In the window that pops up, double-click Install Figma Agent, then click OK

Step 1 (Option 2): Download the Figma Desktop App 

If you’d like to use Figma from your desktop, you can do so by downloading and installing the desktop app. This will allow you to access installed fonts in either the desktop app or the browser.

Start by downloading the appropriate installation file (Windows or Mac) from the Figma downloads page. 

On a Windows computer:

1. Find the installation file in your Downloads folder and double-click it. This will automatically complete the installation process and open Figma

On a Mac computer:

1. Find the installation file in your Downloads folder and double-click it 
2. In the window that pops up, drag the Figma icon into the Applications folder icon
3. You can now open the desktop app from the Applications folder or the Launchpad. 

The first time you open Figma, you’ll be asked to sign into your account in the browser.

Step 2: Download and Install Your Custom Font

This process varies slightly depending on which operating system you use. 

On a Windows computer:

1. Download the font file
2. Unzip the folder if necessary
3. Right-click on the font file and select Install

On a Mac computer:

1. Download the font file
2. Unzip the folder if necessary
3. Double-click the font file. In the window that pops up, select Install Font

Adobe Fonts:

If you have an Adobe subscription, you can follow the steps below to install a new Adobe font. The process is the same for both Windows and Mac computers. 

1. Make sure Adobe Creative Cloud is installed
2. Choose your new font at fonts.adobe.com and click Add Font or Add Family to download it 
3. In the Adobe Creative Cloud app, navigate to Adobe Fonts
4. Find the font you just downloaded and click Install Family to make it available for non-Adobe apps

Step 3: Re-Open Figma (Optional) 

If Figma was already open when you installed your new custom font, you may need to close and re-open the desktop app or refresh your browser. 

How To Access New Fonts in Figma

Accessing your newly installed custom font looks the same whether you’re in the desktop app or the browser version of Figma. If everything was installed correctly, you should be able to:

1. Select the Text tool and create a new textbox
2. In the Text menu on the right side of the screen, click on the current font to bring up the Fonts menu
3. Search for your newly installed font in the search bar
4. Alternatively, you can click on the All fonts drop-down menu and select Installed by you. Any fonts you downloaded and installed, including Adobe fonts, will appear here. 

If you can’t find your newly installed font, try restarting the desktop app or refreshing your browser. 

Create Outstanding Designs with Unique Fonts in Figma

The ability to install any custom font in Figma opens up a world of creative possibilities. It means you can freely use typography in your designs to make them stand out and convey your message more effectively, all while ensuring readability and a great user experience for your audience. 
And if you’re new to the program, take some time to learn how to use Figma and all of its great features. With a few tips and tricks, you can go from beginner to pro in no time and start taking full advantage of everything it has to offer.

Written By

Sayana Lam

Sayana is a musician, writer and graphic designer based in Toronto, Canada.

Share

• 
• 
• 
•