Summarize this article with:
Figma’s default font library is solid. But sometimes you need that specific typeface your brand requires.
Learning how to add fonts to Figma takes about five minutes and opens up thousands of typography options for your design files.
The process differs depending on whether you use the Figma Desktop App or browser version. Both methods require installing fonts on your computer first.
This guide walks you through downloading font files, installing them on Mac or Windows, setting up the Figma Font Helper, and applying custom typefaces to your text layers.
You’ll also find troubleshooting fixes for missing font errors and tips for sharing fonts across your organization.
How to Add Fonts to Figma
Adding fonts to Figma is the process of installing custom typefaces on your computer and connecting them to Figma through the desktop app or font helper tool.
You need this when working with brand-specific typography, custom typefaces, or fonts outside Figma’s default Google Fonts library.
This guide covers 4 steps requiring approximately 5 minutes and basic familiarity with file management on Mac or Windows.
Prerequisites
Before you install custom fonts in Figma, gather these requirements:
- Figma account (Free, Professional, Organization, or Enterprise plan)
- Figma Desktop App or Figma Font Helper installed
- Font files in .TTF (TrueType) or .OTF (OpenType) format
- macOS 10.14+ or Windows 10/11
- Administrator access on your computer
Time estimate: 3 to 5 minutes.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Step 1: How Do You Download and Locate Your Font Files?
Download your desired font file from a trusted source like Google Fonts, Adobe Fonts, or a font marketplace.
Verify the file format before proceeding. Figma only supports .TTF and .OTF font files.
Action
- Font source location: Google Fonts, Adobe Fonts, MyFonts, DaFont, or purchased font providers
- File format check: Right-click the downloaded file and confirm it ends in .ttf or .otf
- Download folder: Locate the file in your Downloads folder or the directory you specified
Purpose
Figma cannot read .WOFF, .WOFF2, or other web font formats for desktop design work.
Using the wrong format triggers a missing font error when you try to access the typeface.
Step 2: How Do You Install Fonts on Your Computer?
Your custom fonts must be installed at the system level before Figma can access them.
The installation process differs between Mac and Windows operating systems.
Installing Fonts on Mac
Action
- Open Font Book: Finder > Applications > Font Book
- Add the font: Drag and drop your .TTF or .OTF file into Font Book, or use File > Add Fonts
- Verify installation: The font appears in the “My Fonts” collection
You can also double-click the font file directly and click “Install Font” in the preview window.
Installing Fonts on Windows
Action
- Open Settings: Settings > Personalization > Fonts
- Install the font: Drag and drop your font file into the Fonts window, or right-click the file and select “Install” or “Install for all users”
- Verify installation: Font appears in the Windows Fonts folder (C:WindowsFonts)
For team environments, use “Install for all users” to avoid permission conflicts.
Purpose
Figma reads fonts from your operating system’s font manager.
Without system-level installation, the Figma font picker cannot detect your custom typeface.
Step 3: How Do You Connect Local Fonts to Figma?
The connection method depends on whether you use the Figma Desktop App or browser version.
Desktop app users get automatic access. Browser users need the Figma Font Helper.
For Figma Desktop App Users
Action
- Automatic access: The desktop app includes a built-in font helper called FigmaAgent
- Restart required: Close and reopen Figma after installing new fonts
- No additional setup: Your installed fonts appear automatically in the font selector
The desktop app is the simplest way to use local fonts in Figma Design files.
For Figma Browser Users
Action
- Download location: Go to figma.com/downloads and download the Font Installer for Mac or Windows
- Run the installer: Follow the on-screen prompts to complete installation
- Verify connection: In Figma, go to Menu > Preferences > Permissions and helpers > check that Local network access shows “Connected”
The Font Installer (FigmaAgent) runs on localhost and bridges your system fonts to Figma’s browser interface.
Reload any open Figma files after installation to access your fonts.
Purpose
Browser-based Figma cannot directly access your computer’s font folder for security reasons.
The font helper creates a secure local connection that lets Figma read your installed typefaces without exposing them to the public internet.
Step 4: How Do You Apply Custom Fonts in Your Figma File?
Open any Figma Design file and select an existing text layer or press T to create one.
Your installed fonts appear in the font picker under a dedicated filter.
Action
- Select text: Click an existing text layer or create a new one with the Text tool (T)
- Open font selector: Right sidebar > Text section > Click the font name dropdown
- Filter installed fonts: Click “All fonts” dropdown > select “Installed by you”
- Apply the font: Click your desired typeface from the list
Hover over any font name to preview it on your selected text before applying.
Purpose
The “Installed by you” filter separates your custom fonts from Figma’s default Google Fonts library and shared organization fonts.
Saves time scrolling through hundreds of typefaces.
Verification
Confirm your fonts work correctly before sharing files with collaborators.
How to Verify Success
- Font appears in the “Installed by you” filter in the font picker
- Text layer displays the correct typeface on canvas
- No missing font icon (yellow warning triangle) appears in the left sidebar
- Font weight and style variations load properly
If verification fails, restart Figma and check your font installation.
Troubleshooting
Common issues when adding fonts to Figma and their fixes.
Font Not Appearing After Installation
Issue: Installed font doesn’t show in Figma’s font list.
Solution: Restart the Figma desktop app or refresh your browser tab. Browser users should verify Font Helper status in Menu > Preferences > Permissions and helpers.
Missing Font Alert for Installed Fonts
Issue: Yellow warning icon appears even though the font is installed.
Solution: Font version mismatch between collaborators. On Mac, install to /Library/Fonts instead of ~/Library/Fonts. On Windows, right-click the font file and select “Install for all users.”
Font Helper Shows “Not Connected”
Issue: Browser cannot access local fonts.
Solution: Check browser permissions for local network access. Disable ad blockers for figma.com. Reinstall Figma Font Helper from figma.com/downloads.
Adobe Fonts Not Appearing
Issue: Synced Adobe Fonts don’t show in Figma.
Solution: Verify fonts are active in Adobe Creative Cloud app. Restart both Adobe CC and Figma. Adobe deactivates fonts not used recently; reactivate them in Adobe Fonts. Learn more about how to add Adobe Fonts to Figma.
Font Works in Desktop App but Not Browser
Issue: Fonts load in Figma Desktop but not the web version.
Solution: The Font Installer isn’t running. Download it from figma.com/downloads, install, and reload your browser tab.
Alternative Method: Upload Fonts to Organization
Organization and Enterprise plan users can upload fonts directly to Figma for team-wide access.
Who Can Use This
Organization admins and team admins only. Requires a paid Organization or Enterprise plan.
Action
- Navigate: File browser > Admin > Resources > Fonts
- Upload: Click “Font” > Select .TTF or .OTF files > Confirm licensing rights
- Complete: Click Upload; font becomes available to all organization members
Method Comparison
| Factor | Local Installation | Organization Upload |
| Plan requirement | Any plan (including Free) | Organization or Enterprise |
| Collaborator access | Each person installs separately | Automatic for all members |
| Setup time | 3-5 minutes per person | One-time admin upload |
| Best for | Individual designers, small teams | Large teams, consistent branding |
Choose local installation for personal projects. Use organization upload when multiple team members need the same fonts.
Related Processes
Expand your Figma typography skills with these related guides:
- How to edit text in Figma
- How to curve text in Figma
- How to underline text in Figma
- How to italicize in Figma
- How to superscript in Figma
- How to type on a path in Figma
- How to create a design system in Figma
FAQ on How To Add Fonts To Figma
What font formats does Figma support?
Figma supports .TTF (TrueType) and .OTF (OpenType) font files only.
Web formats like .WOFF and .WOFF2 don’t work for design files. Convert them to TTF or OTF before installation.
Do I need the Figma Desktop App to use custom fonts?
No. Browser users can install the Figma Font Helper from figma.com/downloads to access local fonts.
The desktop app includes this functionality automatically.
Why isn’t my installed font showing in Figma?
Restart Figma after installing new fonts. The app doesn’t detect changes while running.
Browser users should also verify the Font Helper connection in Preferences > Permissions and helpers.
Can my collaborators see fonts I installed locally?
They can preview your text layers but cannot edit them without installing the same font.
Figma displays a missing font alert prompting them to install or replace the typeface.
How do I use Google Fonts in Figma?
Google Fonts come pre-installed in Figma. No setup required.
Open the font picker, select “Google fonts” from the filter dropdown, and browse the full library.
Does Figma work with Adobe Fonts?
Yes. Sync fonts through Adobe Creative Cloud, then restart Figma.
Adobe deactivates unused fonts periodically. Reactivate them in the Adobe Fonts app if they disappear.
Can I upload fonts for my entire team?
Organization and Enterprise plan admins can upload fonts to Figma directly.
Go to Admin > Resources > Fonts. Uploaded typefaces become available to all team members automatically.
Why do I get a missing font error for fonts I have installed?
Version mismatch between collaborators causes this. Different font versions register as different fonts.
On Windows, right-click and select “Install for all users” to fix permission issues.
Can I use custom fonts on ChromeOS or Linux?
No. Figma doesn’t support local fonts on ChromeOS or Linux devices.
Users on these systems can only access Google Fonts and default Apple fonts (SF Pro, SF Compact).
How do I remove or replace a missing font?
Click the missing font icon in the left sidebar. Figma opens a modal showing all affected text layers.
Select a replacement font from the dropdown and click “Replace fonts.”
Conclusion
You now know how to add fonts to Figma using both the desktop app and browser methods.
The process comes down to three things: installing .TTF or .OTF files on your system, connecting Figma to your local fonts, and selecting typefaces from the font picker.
Custom typography transforms generic designs into branded experiences. Your text layers finally match the exact typeface specifications your project demands.
Organization users can skip individual installations entirely by uploading fonts for team-wide access through the admin panel.
Missing font errors usually stem from version conflicts or Font Helper connection issues. Both fix quickly with a restart.
Start with one custom font. Install it, apply it, verify it works. Then expand your Figma font library from there.
Your typography workflow just got a lot more flexible.
