How to Add a Font to Figma: A Complete Guide

Figma is one of the most widely used design tools today, and typography sits at the heart of almost every project. Whether you're designing a landing page, a mobile app, or a brand identity system, the fonts available to you directly shape what's possible. Here's exactly how font loading works in Figma — and what determines which approach will work best for your setup.

How Figma Handles Fonts

Figma is a browser-based tool, which means it doesn't automatically have access to fonts installed on your operating system the way desktop apps like Photoshop or Illustrator do. Instead, it pulls fonts from two main sources:

• Google Fonts — a large library of open-source typefaces built directly into Figma, accessible without any setup
• Local fonts — fonts installed on your computer, made available through the Figma desktop app or a helper tool

This distinction matters a lot. If you're working entirely in the browser and expecting a custom font you just purchased to appear, it won't — unless you've taken a few extra steps.

Method 1: Use Google Fonts (No Setup Required)

If the font you need exists in Google Fonts, you're in luck. Figma natively integrates the entire Google Fonts library. Open any text layer, click the font name field, and start typing. Google Fonts appear automatically alongside your local fonts — no installation needed.

This is the fastest route and works in both the browser and desktop versions of Figma. The limitation is obvious: you're limited to what Google Fonts offers, which, while extensive, won't include premium or brand-specific typefaces.

Method 2: Install Local Fonts via the Figma Desktop App 🖥️

For fonts you've purchased or downloaded and installed on your computer, the Figma Desktop App is the most straightforward solution.

Here's how it works:

1. Install the font on your operating system — on Windows, right-click the font file and select Install; on macOS, double-click and click Install Font
2. Open or restart the Figma Desktop App — Figma reads locally installed fonts at launch
3. Access the font — search for it in the font picker within any text layer

The desktop app has direct access to your system font library. If the font was installed correctly and Figma has been restarted since installation, it should appear in the list.

Common reason it doesn't show up: The font was installed after Figma was already open. A full restart of the app resolves this in most cases.

Method 3: Use the Figma Font Helper (For Browser Users)

If you're using Figma in a web browser rather than the desktop app, local fonts aren't automatically accessible. Figma provides a small utility called the Figma Font Helper (sometimes called the Font Installers) to bridge this gap.

Steps:

1. Download the Figma Font Helper from Figma's official website
2. Install and run it — it runs quietly in the background
3. Refresh your Figma browser tab
4. Local fonts installed on your machine will now appear in the font picker

The Font Helper acts as a local server that lets the browser-based editor read your system fonts. It requires the application to be running whenever you want to use local fonts in the browser.

Method 4: Upload Custom Fonts to Figma (Teams and Organizations)

For professional teams where brand consistency is critical, Figma offers shared font management at the organization level. This is available on certain paid plans and allows admins to upload font files directly to a Figma organization, making them accessible to all team members — even those who don't have the font installed locally.

This solves a significant collaboration problem: without shared fonts, teammates opening a file with a custom typeface will see a font substitution warning and the layout may break.

Variables That Affect Which Method You Need 🔤

Not every approach suits every situation. A few factors determine which path makes sense:

• Whether you work solo or in a team — solo designers can usually manage with the desktop app; teams sharing files need a consistent font environment
• Your Figma plan — organization-level font uploading is a feature tied to higher-tier plans
• How you access Figma — browser-first workflows require the Font Helper; desktop app users skip that step
• Where the font came from — Google Fonts are always ready; licensed fonts require installation; variable fonts may behave differently depending on Figma's current support for font axes

When Font Substitution Happens

If you open a Figma file and see a warning like "Missing fonts", it means a font used in that file isn't available in your current environment. Figma will highlight affected text layers. You can either install the missing font using the methods above, or substitute it with something available — though substitution will change the layout.

This is especially common when files are shared between designers using different operating systems or font libraries, and it's one of the strongest practical reasons teams invest in org-level font management.

The Detail That Trips Most People Up

The single most common source of confusion is expecting a browser-based design tool to behave like a desktop app. Once you understand that Figma's font access is environment-dependent — and that the solution depends on whether you're in a browser, on desktop, working solo, or collaborating across a team — the right approach becomes much clearer.

What that right approach actually is depends on your specific workflow, how your team is structured, and which Figma plan you're working within.