To add a font to Figma, download it in either TTF or OTF format on your computer. Once the font is downloaded it will automatically appear in the font list within the Figma desktop application. However, if you are using the web version, you must also install a Figma font service to grant the browser access to the fonts on your computer.
My name is Yana, and I have worked with content for the past few years. Last year, I became interested in web design, and that’s how I discovered the Figma design tool. Sometimes my projects require specific fonts that are not available in the font library, so I need to manually install new fonts.
Today I will show you a step-by-step guide on how you can add a new font to the Figma desktop app and web version on both Windows and macOS. Additionally, I will share some troubleshooting tips along the way.
Let’s get started.
Contents
Key Takeaways
- When using the Figma web version, download the Figma Font installer before adding a new font.
- Consider installing the fonts from the Google library. They are free, even for commercial projects, which means you can save money on licensing fees and you won’t violate any copyright policies.
- If you can’t see the whole font family in Figma, make sure every font style is saved in a separate file.
A Step-by-Step Guide to Install Fonts to Figma Desktop App
If you have a specific font you would like to add to the Figma desktop app, you will need to upload it to your computer. After that, the new font will automatically be added to the design tool.
You will find guides for both macOS and Windows users below.
How to Install a New Font on Mac
Step 1. Download a new font file to your computer and open the Font Book app on your MacBook. You can find it in the list of applications or search for it by using the keyboard shortcut Command + Space.
Step 2. Click on the File tab from the top menu bar and select Add Fonts to Current User.
Step 3. Next, select a font file from your computer and click Open to add a font to the font library on your Mac.
Step 4. Finally, open the Figma desktop app and click on the Font dropdown menu to find your new font style.
How to Install a New Font on Windows
To add a new font to a Windows computer, follow these steps:
Step 1. To begin, go to Settings and find the Personalization section.
Step 2. Next, click on the Fonts button and simply drag and drop your font file into the window. After you add it, you will find the newly added font family available in the settings of your computer.
Step 3. To ensure the font appears in the Figma desktop app, be sure to restart the application after adding the font to your computer.
Adding Fonts to Figma Web Version
If you’re using the Figma browser version, the first step is to download an official Figma plugin.
Step 1. Go to the Figma Downloads and download the Font installer for macOS or Windows. After installing this extension, all of the fonts on your computer will automatically be ready to use on the Figma web version.
Step 2. Next, follow the same steps above to add a new font to Figma.
Why Can’t I See My Font in Figma?
It’s important to make sure to restart the Figma desktop app or web version after adding new fonts. If you are unable to see the newly added font in the Font options, there could be several reasons for this:
1. Make Sure Each Font Style Is in a Separate File
Figma doesn’t support bundles of font styles and families in one single file. Make sure that each font style (ex. bold, light, medium) is located in its own file and is uploaded to your computer separately.
2. Check the Location of the Font
Double-check if your font is saved in the correct folder. Try searching for them in the Fonts folder on your computer.
3. Give Access to the Local Fonts
When using the Figma web version, make sure the application has access to the fonts on your computer. Open the Figma main page and click your profile picture in the right top corner.
Next, click on Settings and under the Fonts section, check to see if the local fonts are enabled.
FAQs
Here are the answers to the most frequently asked questions regarding adding fonts to Figma.
Can I Use My Fonts in Figma?
Yes, Figma allows you to import custom fonts. Just make sure the font is saved in the proper format and then upload it to the font library on your Mac or Windows computer. Also, keep in mind that when you share your design with other users that don’t have the same font installed, there may be issues with font compatibility.
How Do I Add Google Fonts to Figma?
Download a font family from the Google Fonts library and open the zip file. Next, select the font file and add it to the font settings on your computer. Don’t forget to install the font installer if you are using the web version of Figma.
What Fonts Does Figma Support?
Figma supports a wide range of fonts including system fonts, Google fonts, and custom fonts as long as they are saved in the TTF or OTF file format and installed correctly on your computer.
Final Thoughts
Adding a new font to Figma is easy, but the process is slightly different depending on whether you are using the desktop or web version of the tool. If you’re having trouble finding a font you just installed, try restarting Figma. Sometimes the app won’t recognize a newly installed font until you restart it.
Have you ever added a new font to Figma? Share your experience in the comments section below.
