Add a font to Figma Design – Figma Learn - Help Center

If you're using UI3, Figma's new design, some parts of this article might not match what you see in the product today. We appreciate your patience while we make updates. Learn more about Figma’s redesign →

Who can use this feature

Available on any plan

Anyone can add a font to Figma Design

By default, Figma includes Google fonts in Figma Design files. To use a different font, you can install it on your computer and access it in your Figma Design files.

Caution: If you use your own font in a Figma Design file, anyone you share the file with can preview the font. To edit text layers using that font, they will need to install it on their computer. They may see errors related to managing missing fonts.

Follow the steps below to use your own font in Figma Design:

use-a-font-in-design-flow (1).png

Prepare and download the font files
Install the font on your computer
Install the Figma font helper (browser only)
Use your font in a design file

1. Prepare and download the font files

Fonts are typically collections of OpenType (.OTF) or TrueType (.TTF) files. Each font can have several styles, and each style has its own file.

For example, using Inter Regular, Inter Bold, and Inter Extra Light requires three font files.

Tip: If you're using a font that other people use too, make sure you have the same styles. If someone uses a font style in a file but you don't have that style on your computer, you'll get a missing font error.

Note: Figma only supports .TTF and .OTF font files.

2. Install the font on your computer

To use a font, it must be installed in your computer’s font manager.

On Mac, the font manager is called Font Book. Apple provides guidelines for installing and validating fonts in Font Book on Mac. As a general rule, if you can see your font in Font Book, it’s installed on your computer.
On Windows, you can install fonts by adding font files to the Fonts folder. Add a font →

Note: Figma doesn't support local fonts for devices running ChromeOS or Linux. Chromebook and Linux users can only use Google fonts, which are the default fonts in Figma.

3. Install the Figma font helper

Note: If you're using the desktop app, you can skip this step. The desktop app includes the Figma font helper.

If you use Figma in your web browser, you need to install the Figma installer, otherwise known as the font helper, before you can add your own font to Figma Design files.

After installation, reload any open files in your browser to start using your font.

Note: The Figma font installer, FigmaAgent, runs an HTTP and HTTPS server on localhost. It only allows connections from figma.com and isn't exposed to the public internet.

You may see events related to the FigmaAgent in your console log or when monitoring activity on your computer. The loopback address for localhost resolves to 127.0.0.1.

You can always uninstall the font helper if you need to.

4. Use your font in a design file

Font picker accessed from the Typography section of the right sidebar.png

To find and use your font:

From a Figma Design file, select or create a text layer.
Open the font selector in the right sidebar.
Open the filter dropdown and choose Installed by you.

Tip: Learn more about browsing and applying fonts in your files

Note: Got stuck? Check out our guide to troubleshooting font issues →