Figma has become one of the most popular design tools for teams and individuals working on UI/UX design, websites, mobile apps and more. Its browser-based interface makes it easy to collaborate and share designs. One of the great things about Figma is the ability to fully customize your projects, including using custom fonts to brand designs or just make them more visually appealing.
Table of Contents
Why Use Custom Fonts in Figma
Here are some of the main reasons to add custom fonts in Figma:
- Branding – Custom fonts are an important part of branding and maintaining a consistent look and feel across projects. If you have a brand font, you’ll want to add it to Figma.
- Visual appeal – Figma has a good selection of basic fonts, but custom fonts give you many more stylistic options to make designs pop.
- Consistency – Maintaining font consistency between your Figma designs and actual products ensures things like logos, headings and body text will look the same.
- Client presentations – Showing clients complete branded design mockups with your actual fonts helps them visualize the end product.
How to Add Fonts to Figma
Adding fonts to Figma only takes a few steps. Here is the overall process:
- Install fonts – First, install any fonts you want to add on your computer.
- Upload fonts – In Figma, go to Team Profile > Fonts and upload font files.
- Enable fonts – Turn on font syncing to access fonts in files and projects.
- Use fonts – Insert text boxes and apply your custom fonts.
Below we’ll cover these steps in more detail, including formatting requirements and tips for managing fonts.
Installing Fonts on Your Computer
If you don’t already have the fonts on your computer that you want to use in Figma, you first need to install them. The main ways to get fonts are:
- Buy individually – Font retailers like MyFonts.com let you buy fonts individually or as families. This gives you desktop licenses to install them.
- Subscribe to services – Services like Adobe Fonts give you access to thousands of fonts for a monthly fee, handling installs and updates.
- Get free fonts – Sites like Font Squirrel and Google Fonts offer high-quality fonts at no cost. These usually allow commercial use.
When installing fonts, make sure to follow best practices. Install them for all users to avoid permissions issues. Close out of other programs first to ensure they install correctly.
Uploading Fonts to Figma
Once fonts are installed on your computer, adding them to Figma is simple. Just follow these steps:
- In Figma, click on your profile icon in the top-right corner to access the Team Profile.
- Select the Fonts tab.
- Click the Upload Fonts button.
- Navigate to the fonts on your computer. Figma accepts .ttf, .otf and .woff formats.
- Select all the font files you want to add and click Open. This uploads them into Figma.
All users on your Figma team will now have access to these fonts to use in designs.
Turning on Font Syncing in Figma
By default, Figma has font syncing disabled. This prevents custom fonts from showing up. To fix this:
- In your Team Profile, go back to the Fonts tab.
- Next to “Font syncing”, click the toggle to switch it On.
Now when you open existing Figma files or start new projects, you’ll see your uploaded fonts in the font selection menus.
New team members can also access synced fonts as long as they are part of the team profile. This helps maintain consistency as new designers join your organization.
Using Custom Fonts in Figma Designs
Once you’ve installed and uploaded fonts to Figma, using them in designs is very easy.
When creating any text box, you’ll see your custom fonts as options in the font selection drop-down menus:
Figma font selection
You can also quickly search for fonts using the search bar at the top. This is handy when you have a lot of fonts uploaded.
Some tips for working with fonts in Figma:
- Check font variants – Be sure to check if font families you added include variants like bold, italic, light or semi-bold. These allow more flexibility in text styling.
- Use font mixing carefully – While you can mix and match fonts, using too many can make designs feel “noisy”. Try to use no more than 3 fonts, with one primary font.
- Check for conflicts – If you notice odd behavior with text boxes, make sure fonts aren’t conflicting with plugins or extensions. Disable plugins first.
- Simplify sharing – When sharing Figma files with clients who may not have your fonts, use Figma’s “Enable viewer fonts” option to prevent issues.
Managing Your Figma Font Library
As you add more fonts over time, managing them becomes important so you can easily track what’s installed and available.
Here are some tips for maintaining your Figma fonts:
- Organize by project – Keep project font libraries small with only what’s needed for that project. Add a specific note if using specialty fonts.
- Categorize fonts – Use tags like “Sans Serif”, “Script” or “Display” to categorize fonts by style and make searching easier.
- Remove unused fonts – If you notice fonts that aren’t being used anymore, remove them from your library to reduce clutter.
- Document font usage – Keep a reference document noting where and why specific fonts are being used in major projects. This makes it easier to maintain consistency.
- Back up fonts – Occasionally export your Figma font library so you have a separate backup if ever needed.
Putting some structure around your fonts will pay off in the long run as your library grows.
Conclusion
Adding custom fonts is a great way to take your Figma designs to the next level while giving them a unique brand style.
Following the process to properly install and sync fonts ensures they’ll be ready to use in your projects. Over time, be sure to manage your font collection by organizing fonts, removing unused ones and documenting font usage.
With the ability to fully customize fonts, along with so many other design elements, Figma provides an incredibly flexible platform for all your UI and UX design work.
