How to Upload Fonts in Figma: A Complete Technical Guide

Uploading custom fonts in Figma requires understanding how the Figma Font Installer functions across desktop and web applications, ensuring you meet file format requirements, and managing team library permissions effectively.

Typography is the backbone of any digital product design system. While Figma provides a robust library of cloud-hosted system fonts and Google Fonts by default, professional UI/UX design workflows frequently demand proprietary brand typefaces, specialized open-source fonts, or customized letterforms. Because Figma operates primarily as a cloud-based application running in web browsers and native desktop wrappers, integrating local typography requires specific configuration steps. Whether you are working on macOS or Windows, successfully rendering custom fonts involves installing the font files locally, running the Figma Font Installer helper service, and managing permission settings for shared team projects.

Understanding Figma Typography Architecture

To successfully upload and use fonts in Figma, it is essential to understand how the software interacts with your computer's file system. Unlike desktop design suites that scan your operating system's font directory natively and automatically, Figma handles local typography through a dedicated helper application called the Figma Font Installer (or Font Helper).

When you open Figma in a web browser (such as Google Chrome, Mozilla Firefox, or Microsoft Edge) or use the native desktop application for macOS and Windows, Figma cannot natively read files stored in your local operating system's protected directories for security and sandboxing reasons. The Font Installer acts as a secure bridge. It runs locally on your machine, scans your system font directories, and streams the font data to the Figma interface via a local network port.

This architecture means that for a font to appear in your Figma text property panel, it must meet two fundamental conditions:

1. The font files must be physically installed on the local operating system of the machine you are currently using.
2. The Figma Font Installer service must be running actively in the background to detect and transmit those system fonts to your Figma canvas.

Prerequisites and Supported File Formats

Before attempting to install and use custom typography in Figma, verify that your font files meet technical specifications and that your account permissions support local font usage.

Supported Font Formats

Figma supports standard desktop font file formats. When downloading or purchasing custom typefaces, ensure you have access to one of the following formats:

• OTF (OpenType Font): Highly recommended for design work. OTF supports advanced typographic features, including ligatures, small caps, and alternative glyphs, which render correctly in Figma.
• TTF (TrueType Font): Fully supported. TTF is a common format, though it generally lacks the advanced layout features found in OpenType files.
• WOF and WOFF2 (Web Open Font Format): While primarily used for web development, Figma can read certain WOFF files depending on the operating system, though OTF and TTF remain the gold standard for design applications.

Note: PostScript Type 1 fonts, bitmap fonts, and SVG fonts are generally unsupported or unreliable within Figma's rendering engine.

Account Permissions and Workspace Constraints

Local font functionality behaves differently depending on your Figma subscription tier:

• Figma Starter (Free) and Professional Teams: Local fonts installed on your machine are available to you across all files, but collaborators who open your files without those fonts installed locally will see fallback system fonts.
• Figma Organization and Enterprise Plans: Organization admins can enforce enterprise-wide font libraries. While individual users can still use local fonts, organizations can upload .otf or .ttf files directly to the shared Organization Assets panel, allowing every team member to access brand typefaces automatically without manual local installation.

Step-by-Step Installation Process

Installing custom fonts for Figma involves preparing your files, installing them on your operating system, configuring the helper application, and verifying the installation inside the canvas.

Step 1: Download and Prepare Your Font Files

Locate your font files on your local drive. Ensure they are extracted if they were downloaded inside a compressed ZIP archive. Check that you have the regular, bold, italic, and other required weight variants ready. Avoid installing corrupted files; double-click the font file beforehand to preview it in your operating system's font viewer.

Step 2: Install Fonts on Your Operating System

Figma pulls fonts directly from your operating system's default directory. You must install the files locally:

• For macOS:
  
  
  1. Double-click the .otf or .ttf file to open Font Book.
  2. Click the Install Font button in the preview window.
  3. Alternatively, drag and drop the font files directly into the User or Computer tab within the Font Book application.
• For Windows (10 and 11):
  
  
  1. Right-click the .otf or .ttf file.
  2. Select Install (or Install for all users if you have administrative privileges).
  3. Alternatively, navigate to Settings > Personalization > Fonts and drag your font files into the designated drop area.

Step 3: Ensure the Figma Font Installer is Running

If you are using Figma via a web browser, or if custom fonts are failing to load, verify that the helper utility is active.

1. Download the Figma Desktop App or the standalone Figma Agent / Font Installer package from the official Figma Downloads page.
2. Install the application and log into your account.
3. For web browser users, ensure the background helper service is permitted to run in your system tray (Windows) or menu bar (macOS).

Step 4: Restart Figma

If Figma was already open while you installed the font files, it may not instantly detect the new additions.

• If using the desktop app, completely quit the application (Cmd+Q on Mac, Alt+F4 or closing via task manager on Windows) and relaunch it.
• If using a web browser, perform a hard refresh (Ctrl+F5 on Windows or Cmd+Shift+R on Mac) or restart your browser session entirely.

Font Format Comparison for UI Design

Choosing the correct font file format ensures optimal rendering performance and access to advanced typographic features within your design files.

Troubleshooting Custom Fonts in Figma

Even when following the correct installation steps, designers occasionally encounter issues where specific typefaces fail to appear or render incorrectly. Review the following troubleshooting matrix to resolve common roadblocks.

Fonts Missing from the Font Picker

If your newly installed font does not appear in the text property dropdown:

• Check Font Weight Naming: Sometimes family names are nested incorrectly in the metadata. Search for the family name rather than the specific weight variant.
• Verify Local Installation: Open a native desktop application like Microsoft Word, Apple Pages, or Adobe Photoshop. If the font does not appear there either, the issue lies within your operating system installation, not Figma.
• Browser vs. Desktop App: If you are using Figma in a web browser, ensure your browser has permission to communicate with localhost ports where the Figma Font Helper runs. Switching to the native desktop application often resolves persistent browser communication blocks.

Missing Glyphs and Fallback Rendering

If text displays with awkward boxes, question marks, or unexpected fallback fonts:

• Glyph Support: The font may not support specific characters, special symbols, or non-Latin alphabets. Inspect the font's character map in your OS font viewer.
• PostScript Name Conflicts: If you have multiple versions of the same font installed (e.g., both a Type 1 and an OpenType version, or local and cloud versions), naming conflicts can confuse Figma's font parser. Uninstall duplicate versions.

Team Collaboration and Missing Font Warnings

When sharing Figma files across a team:

• License Compliance: Ensure your team holds proper desktop and web distribution licenses for commercial fonts. Embedding local fonts in a file does not grant collaborators the legal right to use them on their own machines without a license.
• Organization Shared Fonts: If your team uses an Organization plan, upload the canonical .otf or .ttf files directly through the admin settings so team members do not have to manually install local files.

Frequently Asked Questions

Can I upload custom fonts to the free version of Figma?

Yes. You can install any local font on your computer, and Figma's desktop or web app will recognize it for your personal use within the free tier. However, if other users open your file without that font installed on their machines, Figma will substitute it with a fallback font.

Why won't my uploaded font show up in the Figma web browser version?

The Figma web app relies on a local background helper utility to read your operating system's font folder. If this utility is missing or blocked by your browser or antivirus software, web browsers cannot access local files. Installing the desktop app or ensuring the font helper daemon is running fixes this communication barrier.

How do I share custom fonts with my entire design team?

If you use a Figma Organization or Enterprise plan, workspace administrators can upload font files directly to the organization's shared asset library. For Professional tier teams, every collaborator must individually download and install the font files onto their local operating system to edit text accurately without fallback substitution.

Does Figma support Variable Fonts?

Yes. Figma supports OpenType variable fonts (.ttf or .otf variations). When you select a variable font, additional sliders for weight, width, optical size, and custom axes appear directly in the text property panel, allowing granular typographic control.

Are there file size limits for custom fonts in Figma?

While individual font files rarely exceed a few megabytes, exceptionally large font files containing thousands of glyphs (such as extensive CJK typefaces) may experience performance lag during initial file loading. Optimize and subset font files where possible to maintain high canvas performance.

Next Actions and Best Practices

To maintain a clean and efficient design workflow, establish a centralized font management protocol for your design team. Maintain a shared documentation repository or design system wiki detailing authorized brand typefaces, license expiration dates, and direct download links for approved .otf files. Periodically audit local font installations across designer workstations to prevent version discrepancies and ensure consistent typographic rendering across all client deliverables and product releases.