How to add fonts to Figma

The short answer

Two steps:

1. Install the font on your computer the normal way (double-click the file, click Install).
2. Let Figma see it. The desktop app picks up local fonts automatically. The browser version needs Figma's font installer helper, which you download once from Figma's site.

Then restart Figma. Your font is in the font list.

Why the browser needs a helper

A web page cannot read the fonts installed on your machine, for good privacy reasons. Figma's font helper is a small local program that bridges the gap, telling the browser which fonts are available.

Install it once and forget it. Or use the desktop app, which does not need it, and which most people who use Figma daily end up preferring anyway.

Fixing a font Figma cannot see

In rough order of likelihood:

1. Restart Figma. Fonts installed while Figma is open often are not picked up.
2. Check the helper is running. On Windows look in the system tray, on macOS the menu bar.
3. Install for all users (Windows). Right-click the font file and choose Install for all users. A user-only install is the most common cause on Windows.
4. Check the font format. OTF and TTF are safe. Some older or unusual formats are not supported.
5. Check the licence. Some commercial fonts restrict installation, though that usually shows up as an install failure rather than a Figma problem.

Figma's help center has the current installer download and troubleshooting steps.

What your teammates see

This is the part that causes real problems on a shared file.

Fonts are installed per machine. If you use a font your colleague does not have, they get a missing font warning and Figma substitutes another one. Substitution changes widths, which changes line breaks, which changes the layout. Your careful spacing arrives at their end looking wrong.

Three ways teams handle it:

• Use Google Fonts. They are built into Figma for everyone, no installation, no warnings. This is why so many product teams design with them.
• Everyone installs the brand font. Works, and requires discipline plus the right licences.
• Upload to a shared organization library. Available on higher paid tiers, and the tidiest answer for larger teams.

Font licensing, briefly

Worth a paragraph because it catches freelancers out.

A font licence for desktop use does not automatically cover webfont use on a client's site, and app embedding is often a separate licence again. If you are choosing a typeface for a client project, check what the licence covers before you fall in love with it.

Google Fonts are open licensed and safe for almost any use, which is another reason for their popularity.

Choosing type, since you are here

Adding a font is the easy part. Choosing well is the skill:

• Two typefaces is plenty. One for headings, one for everything else. Often one family with several weights is better still.
• Check the weights you need exist. A typeface with only regular and bold limits your hierarchy.
• Test at real sizes. A font that looks beautiful at 72 point can be unreadable at 14.
• Check the characters you need. Currency symbols, accents, and the languages your product supports.
• Legibility beats personality for body text, every time.

Most designs that feel wrong are a spacing or type problem, not a color problem. Type is where the craft mostly lives.

Where to learn the rest

The UX/UI design course covers type, layout, components and prototyping in Figma, and there is a first-project guide if you are just getting started. Figma's pricing page covers which tiers include shared font libraries.

One subscription opens the whole Graphic Design & Illustration school.

Install locally, run the helper, restart Figma. Then think for two minutes about whether the font is the right one.