How to Add Fonts to Figma: A Complete Tutorial

Figma ships with Inter and a handful of defaults. Anything past that has to come from outside the app. A custom font in Figma is any typeface applied to a text layer that the app reads from the operating system, a connected font service, or an uploaded file, since Figma does not store a large library of its own.

In the browser, local files get read through Figma’s installer, FigmaAgent. On desktop the operating system handles it directly. Figma’s support documentation describes FigmaAgent as a local server that accepts connections only from figma.com and stays closed to the internet, a detail most tutorials skip (Figma Help Center, 2026).

What Are Custom Fonts in Figma

Anything beyond that small default set counts as custom.

Figma runs mostly in a browser tab or a lightweight desktop wrapper rather than as a native local editor, so it leans on outside sources for the actual font data instead of hosting a library itself.

Most of the confusion comes from a few words getting swapped around.

• A font family is the typeface as a whole. Inter, Roboto, Helvetica Neue.
• Font style means one weight or variant inside that family, so Regular, Bold, Light Italic.
• The font source is where the file comes from, whether that is the operating system, Google Fonts, or Adobe Fonts.
• A font file is the physical asset, the .otf or .ttf that actually gets installed or synced.

Each source that matters gets its own section further down.

Anyone still finding their way around the workspace benefits from getting comfortable with Figma’s core fundamentals before spending real time on custom type.

Which Font Sources Work With Figma

Fonts reach Figma from the operating system, from the Google Fonts library baked into the picker, from an Adobe Fonts subscription synced through Creative Cloud, and from font files loaded in by a community plugin.

Google Fonts needs no installation and behaves identically in the browser, on desktop, and on Chromebooks, which otherwise cannot use additional fonts in Figma at all.

Local fonts and Adobe fonts both depend on the file physically sitting on the machine. A team file syncs the text style reference. It never syncs the font.

Google Fonts’ own directory listed 1,942 font families as of August 2026. That breadth is most of why it ends up as the default answer whenever a team needs type that works everywhere without a support ticket.

Chromebook and Linux users are stuck with Google fonts and Apple’s system fonts (SF Pro and SF Compact) inside Figma, since the platform does not support installing additional local fonts on those operating systems.

What File Formats Does Figma Support for Fonts

For local installs and organization wide libraries, Figma reads .OTF and .TTF. Nothing else.

A .TTC font collection, a raw .WOFF file, a .WOFF2 file, none of them turn up in the Figma Design font picker even when the operating system opens them happily. Figma checks against the system’s own font manager rather than parsing the font file itself.

• OTF and TTF are the only formats Figma Design reads for local installs and organization uploaded fonts (Figma Help Center)
• Inside Figma Sites and Figma Make you need WOFF or WOFF2 instead, since those products publish a live, browser rendered page rather than a design file
• WOFF2 compresses to a noticeably smaller file than a desktop TTF or OTF, which is why Figma’s own guidance recommends it for anything shipped to a live site

That web font split catches people at the wrong moment. Figma Sites and Figma Make still ask for the desktop OTF or TTF version first, then prompt for the matching WOFF or WOFF2 file only at publish time.

Same divide across the web generally, since CSS font-face declarations expect a compressed web format rather than a raw desktop font file.

A typeface bought as a variable font arrives as one OTF or TTF covering an entire weight range, instead of a separate file for every weight.

How to Install a Local Font for Figma

https://www.youtube.com/watch?v=2MBSH4Za5C0&pp=ygUZSG93IHRvIEFkZCBGb250cyB0byBGaWdtYQ%3D%3D

The file goes into the computer’s font manager first. Figma reads local typefaces through the operating system, so there is no in-app install step to hunt for.

The desktop app sees anything already on the machine automatically. The browser version cannot detect local fonts at all until FigmaAgent, the official Figma font installer, is running in the background.

A fresh install rarely shows up right away. Figma’s support documentation says to reload any open file in the browser, or fully restart the desktop app, before a newly installed font appears in the font picker.

Installing a Font on Mac

Mac handles this through Font Book, the system’s built in font manager.

1. Download the font file and unzip it if it arrived as a .zip folder
2. Double click the .otf or .ttf file to open it in Font Book
3. Click Install Font in the preview window
4. Restart Figma, or reload the browser tab if using FigmaAgent

Installing a Font on Windows

1. Download and, if needed, extract the font file from its .zip folder
2. Right click the .otf or .ttf file and choose Install
3. Confirm the font now appears in the Windows Fonts settings pane
4. Restart Figma, or reload the browser tab if using FigmaAgent

Windows drops fonts into its own Fonts folder rather than a dedicated app like Font Book, which is really the only practical difference between the two systems.

Chromebook and Linux machines are the exception on either platform. Figma does not support installing additional local fonts there, so users are limited to Google fonts and Apple’s SF Pro and SF Compact.

How to Add a Google Font in Figma

No download, no installation. The whole library sits inside the font picker already.

1. Select or create a text layer
2. Open the Font menu in the right sidebar
3. Type the font name into the search field to filter the full Google Fonts list live
4. Click the family name, then choose a weight from the style dropdown

The steps run the same on desktop, in the browser, and on Chromebooks, since Google Fonts is one of the few sources Figma treats as available by default everywhere.

No license check is required. Every font in the library is released under an open license, so there is nothing to activate, purchase, or sync before using it in a shared team file.

How to Use Adobe Fonts in Figma

Adobe Fonts reaches Figma through Creative Cloud sync, and Adobe’s own product update puts the current library at more than 30,000 font families, all included with an active subscription.

Activation happens on Adobe’s site, not inside Figma. Creative Cloud then pushes the font down to the operating system, where it behaves like any other local font.

1. Go to fonts.adobe.com and sign in with the same Adobe ID used for Creative Cloud
2. Find the typeface and click Activate
3. Wait a few minutes for Creative Cloud to sync the font to the computer
4. Reload the Figma browser tab, or restart the desktop app
5. Confirm the font appears in the picker under Installed by you

Everyone else working in the file has to activate the exact same font and version on their own machine, or they get a missing font warning instead of your type.

Figma’s troubleshooting documentation also notes that some Adobe apps need opening occasionally to keep an activated font working, which is a miserable thing to discover mid project.

The full process gets its own dedicated walkthrough in the guide to adding Adobe fonts to Figma.

Can You Upload a Custom Font File Directly to Figma

Not in Figma Design, no. There is no native upload button for a single file. Every font still routes through the operating system, an organization admin’s font library, or Adobe Fonts.

Community plugins get close. Font Importer and similar tools listed in the Figma Community let a font file be applied inside a single project without installing it system-wide, though functionality and supported formats vary by plugin, and some render custom characters as vector shapes rather than fully editable text.

Which route makes sense depends mostly on how long the file has to survive.

Going through a plugin

• No admin access or Creative Cloud subscription needed
• Works inside a single file without touching the computer’s font manager
• Font access breaks the moment a teammate opens the file without the same plugin

Going through the operating system

• The font behaves like any other typeface across every Figma surface, and it survives file handoffs and exports without extra steps
• Every new machine that opens the file needs it installed again

For anything past a quick prototype, I would install at the operating system level and stop thinking about it.

Why Fonts Show as Missing in Figma and How to Fix It

The warning means the typeface is not available on the current device. It does not mean the font is broken.

Figma flags it with a small icon in the left sidebar, and the same icon shows up next to the font name in the right sidebar when a flagged text layer is selected.

Clicking that icon opens the Missing fonts modal, which lists every affected typeface and every layer that uses it.

1. Open the Missing fonts modal from the left sidebar icon
2. Check the device’s font manager to confirm whether the font is actually installed
3. If it is missing, install it and reload the file, the same install path covered earlier in this guide
4. If it is already installed, compare font versions with the collaborator who added the text, since a version mismatch triggers the same warning
5. As a fallback, swap the layer to an available font directly from the modal

Version mismatches do more damage than the warning suggests. Figma’s own documentation notes that a text layer can shift its baseline, change weight, or reformat entirely when two collaborators use different versions of what looks like the same font.

Naming conflicts get resolved across exactly three sources, in a fixed order: a shared font uploaded to the organization, then a font installed on the device, then Figma’s own default web fonts.

How Team Font Sharing Works in Figma Libraries

Team libraries share the text style. The font file stays where it is. A synced style still needs the actual typeface installed on each collaborator’s machine to render correctly.

Uploading the font itself, rather than just the style that references it, is a separate capability available only on the Organization and Enterprise plans.

Shared libraries sit at the center of most design systems built in Figma, and Figma has pointed to large customers such as Microsoft using its Design System Analytics to build and maintain their systems with usage data.

Squarespace’s design platform team uses Figma’s library analytics to track adoption of a new shared library as it replaces an older version across teams.

Worth knowing if you run mixed hardware: individual users on Chromebook and Linux normally cannot add local fonts, but a font shared through an organization’s font library sidesteps that restriction entirely.

What Font Licensing Rules Apply to Fonts in Figma

Figma does not check font licenses at all. Responsibility for having the right to use a typeface sits with whoever installs or uploads it.

• A desktop license covers installing a font on a computer for design work, which is what most local and Adobe Fonts installs fall under
• A web font license covers embedding a font into a live site’s CSS, a separate right foundries sell on its own (Monotype)

Holding the desktop license does not mean you can publish that same font through Figma Sites or Figma Make. Most foundries sell the two rights apart.

Uploading a font to an organization’s shared library carries the same weight as installing it personally. Figma’s terms of service place the licensing burden on the admin doing the upload, not on the platform.

Google Fonts avoids all of this. Most of the library ships under the SIL Open Font License, which covers personal, commercial, and web use without a separate purchase.

How to Adjust Font Weight With Variable Fonts in Figma

One file covers the full range of a typeface, so weight becomes a slider instead of a separate style you pick off a list.

The standard axes are weight, width, optical size, and slant, though a font’s author can add custom axes past those.

1. Select a text layer that uses a variable font
2. Open the type settings panel from the right sidebar
3. Click the Variable tab
4. Drag the slider, or type a value directly into the input box, for each axis

Figma’s own documentation gives a concrete example. Instead of jumping between preset weights of 300, 500, and 700, a variable font lets someone dial in a value like 143 or 629 within a 100 to 800 range.

Static fonts stay fixed to one style per file. A variable font replaces that whole stack with one, and axis values get saved directly into a text style like any other property.

When Adding Fonts to Figma Does Not Work

A few situations break font access even when every step above was followed correctly.

• On remote and virtual machines, FigmaAgent reads fonts through the operating system’s own font manager, so a virtual desktop without direct access to that manager often cannot detect anything local at all
• A corrupted font file can install on the operating system without any error, then fail silently inside Figma’s font picker
• Fonts never published with variable axes show no slider in the type settings panel, however the file was installed
• Viewing a file on a machine that never had the font locally falls back to substitution regardless of edit permissions

Icon fonts deserve their own flag. Figma’s own documentation confirms that when collaborators use different versions of an icon font, the glyphs can turn into plain text characters instead of rendering as icons.

None of this is a bug in the traditional sense. It follows from Figma treating font access as something the operating system controls, not something the design file stores on its own.

FAQ on How To Add Fonts To Figma

How do you export font specifications to CSS in Figma’s Dev Mode?

Select a text layer, then open the Inspect panel in Dev Mode. Figma generates a ready-to-copy CSS snippet automatically, covering font-family, font-size, font-weight, and line-height, with no plugin or manual conversion needed.

Can you search for a font by name inside Figma’s font panel?

Yes. The font dropdown in the right sidebar includes a live search field that filters every available source at once, including local fonts, Google Fonts, and Adobe Fonts. Filters like “Installed by you” narrow results further.

Why does a font look different in Figma than in the original file it came from?

Mismatched font versions are the usual cause. Different releases of the same family can carry different metrics, spacing, or included weights, so text shifts even when both collaborators technically have the same font installed.

Does restarting Figma fix a font that was just installed?

Usually a simple reload does it. In the browser, refreshing the tab lets FigmaAgent re-scan installed fonts, while on desktop a full restart of the app is what actually forces Figma to recognize the new file.

Can icon fonts like Font Awesome be used in Figma the same way as text fonts?

Yes, icon fonts install and select exactly like any other typeface. Figma officially supports four Font Awesome fonts, and each icon gets applied by copying its glyph and pasting it directly into a text layer.

What Should You Fix First in How To Add Fonts To Figma?

Confirm the font actually exists in the operating system’s font manager before touching Figma at all. Nearly every failure downstream traces back to that one unchecked step.

Font sourcing follows an order of preference, and skipping ahead is where most Figma projects lose time.

• Start with Google Fonts for anything without a fixed brand identity
• Move to a local or Adobe Fonts install once a specific brand typeface is required
• Upload to an organization library only once more than one collaborator needs that exact file

That order trades early convenience for later control, and accepting it deliberately beats discovering the limits of Google Fonts halfway through a branded project.

Once a typeface is in place, the next step is learning how to edit text in Figma, since font choice only holds up once the type is styled correctly.