One way to make your design stand out in Figma is by using unique fonts. Fonts play a crucial role in shaping the overall look and feel of your design, and they can effectively convey the personality, tone, and message of your project.
In this step-by-step tutorial, I will show you how to add fonts to Figma, including how to access local fonts on your computer and inside the Figma desktop application, browse and apply fonts, and manage missing fonts.
How to Add Fonts to Figma (Browser)
When working on your design project in Figma through a web browser, you’ll need to follow extra steps to use all your fonts within Figma.
You have two options to choose from:
Option 1: Install Figma desktop application
Step 1: Go to the Figma download page.
Step 2: Choose the version of Figma that is compatible with your operating system (Windows or Mac).
Step 3: Once the download is complete, open the installer file and follow the instructions to install Figma on your computer.
Once you have installed the app, any local fonts present on your computer will be accessible in both the Figma desktop application and Figma accessed through a web browser.
If you use Figma only via a web browser, you must install only the Figma Agent (Font Installer) to use the fonts that are installed on your computer.
Option 2: Install Figma Agent
Step 1: Go to the Figma download page.
Step 2: Choose the version of the Font Installer that’s compatible with your operating system (Windows or Mac).
Step 3: Open the installer file and follow the instructions.
Once you’ve installed the Font Installer, all the fonts on your computer will become accessible within Figma.
How to Add Fonts to Figma Desktop Application
When you’re working on your design project using the Figma desktop application on either Mac or Windows, simply install the font on your computer.
Figma will automatically ensure that all the installed fonts on your computer are accessible within the Figma app.
How to Install Fonts to a Computer
Step 1: Once you download a font, double-click the file.
In this case, the font is called “Super Boys”.
Step 2: In the pop up window click “Install”.
The font has been successfully installed on your computer and will now be accessible within the Figma desktop application.
If I open the Figma app or use Figma in a browser, and I search for the font ‘Super Boys,’ you’ll notice that the installed font shows up in the search results.
Remember – after you install the font, just refresh Figma in your browser.
Frequently Asked Questions
Why can’t I see the fonts I added to Figma?
Make sure you reload the page or the Figma app after you have installed a font to your computer.
How do I manage missing fonts in Figma?
If you encounter missing fonts, you need to install the Figma font service to use your local fonts in Figma’s browser app.
Can I use Google’s web fonts in Figma?
Yes, Figma gives you access to a catalog of Google Web Fonts, which you can use without having to install anything.
