Installing a custom font in Figma is a straightforward process, yet it is a foundational skill for any designer looking to move beyond the default system fonts. While Figma offers a robust library of Google fonts natively, the ability to integrate your own unique typefaces is essential for maintaining brand consistency and unlocking true creative freedom. This guide walks you through every method available, ensuring you can get your specific font files working in the editor without unnecessary friction.
Understanding How Figma Handles Fonts
Before diving into the installation steps, it is important to understand the technical limitations of how Figma operates in the browser. Figma does not allow you to install fonts directly onto your computer's operating system; instead, it relies on a web-based system. When you add a custom font, you are actually uploading the font file to Figma's cloud servers, making it available for you and your team to use within that specific file or team library. This cloud-based approach ensures consistency across different devices but requires a specific workflow compared to installing fonts on Windows or macOS.
Method 1: Uploading Fonts via the Team Library (Recommended)
The most efficient and collaborative way to add fonts is through the Team Library. This method is ideal for design systems and teams who need to ensure everyone uses the exact same typefaces. By uploading the font to your team, it becomes a permanent asset accessible to all members of that team, streamlining the process for future projects.
Step-by-Step Upload Process
Open Figma and navigate to the Team Library page by clicking the Library icon in the left-hand toolbar.
Select the team you want to add the font to from the dropdown menu at the top of the panel.
Click the "+" button in the top right corner of the Team Library and choose "Upload font" from the menu.
In the file browser that appears, locate the font file on your computer. You will generally need the .ttf (TrueType) or .otf (OpenType) file extension.
Once uploaded, you can name the font style (e.g., "Inter Bold" or "Brand Sans Light") and save it. The font is now available in the team dropdown menu within any Figma file.
Method 2: Uploading Fonts Directly to a File
If you are working on a personal project or a one-off file without a team structure, you can upload the font directly to that specific file. This keeps the process localized and does not clutter your team library, although the font will not be available in other files unless you repeat the upload.
Local File Upload Steps
While inside any Figma file, click the downward arrow next to the font name in the right-hand properties panel.
Select "Upload local font" from the dropdown menu that appears.
Browse your computer for the correct font file and select it.
Figma will automatically detect the font name and style. Click "Upload" to finalize the process.
The new font option will immediately appear in your font dropdown list, ready to be applied to your text layers.
Ensuring Font Availability for Collaboration
A common point of confusion arises when sharing files with team members or stakeholders. If you upload a custom font to your personal account or a specific file, collaborators will see a placeholder or fallback font if they do not have access to that specific upload. To prevent this visual breakage, ensure that the font is added to your Team Library if you want multiple people to use it. Additionally, when exporting assets, it is good practice to outline text or confirm that the recipient of the file has the font installed to maintain design integrity.
