Don’t limit your design options to preset fonts! Learn how to add fonts to Figma to create unique designs.
Choosing the right font for our design can be a game changer. Good typography not only makes your message readable, but it can define the personality of your brand.
As Adi Purdilla says: “If your typography looks bad, that’s going to translate to the whole thing.” If you’re getting started, I recommend you to follow our beginner’s guide to web design.
All that being said, you don’t have to limit your options to the preset fonts available in Figma. Go above and beyond with your creativity by adding unique fonts to your design.
In this tutorial I’ll show you in three simple steps how to add fonts to Figma.
Get a Figma Quick Start Guide
In this Figma video tutorial, you’ll learn everything you need to get started with Figma. In just 47 minutes, Adi Purdila will guide you through this quick and easy-to-follow tutorial:
You can also check out all the Figma-related video tutorials on Envato Tuts+ YouTube channel.
How to Add Fonts to Figma in 3 Steps
Wondering how to a add a font to Figma? It’s actually easier than you think. Follow these three steps and get creative with your design:
1. Choose Your Font and Install It
First things first. Before learning how to add fonts to Figma, you should locate the font you’d like to work with.
You can download it for free from sites like Google Fonts. Or you could go for something unique in the font library on Envato Elements.
In this case, I’ll be working with Monigue – Condensed Sans Font.
Working with a unique font can add sparks of personality to your web design. No matter if you’re designing from scratch or working with a Figma template. Typography is one of the main design elements to consider.
Not sure what font to go for? Get some inspiration from this trend:
Once you chose your font, go ahead and install it in your computer.
Wondering how to add Adobe Fonts to Figma? Follow the same steps to find out.
2. Download The Figma Font Installer
Now, to learn how to add fonts into Figma, we need to download a font installer.
Go to Figma Downloads and select the operating system you work with.
This is if you’re working on the Figma web app. The desktop app does not require the font installer.
Once the Figma Agent is installed, you’ll be able to use your local fonts in the web app.
3. Refresh and Start Using Your Font!
It’s time to see the magic happen. This is how to add a font to Figma.
For this tutorial I’m working with the Hero Header Design Figma template from Envato Elements.
Now that I have my font downloaded and the Figma Agent installed, I’ll go to my Figma template in my browser. I’ll reload the file to start using my font.
Then, I’ll select the text I’d like to change to my new font.
I’ll go to Text on the right side column menu and click on the font name.
From here, I can search for my newly installed font in Text search bar and voilà! Now you know how to add fonts to Figma.
That’s how the design looks with the Monigue font I chose from Elements.
Kick Off Your Design Project With a Figma Template
Now that you know how to add fonts into Figma, you might want to experiment with different web designs.
The good news is you don’t need to create them from scratch. Go to Envato Elements and find the best Figma template for your design project.
You can also upgrade your design with fonts, images and graphics. Find them all on Envato Elements.
More Figma Resources and Tutorials
Learning how to add fonts to Figma is just the beginning. Get a step ahead of the web design game.
Learn new tricks and trends from these articles and tutorials: