Add Fonts Figma? How to Install & Use New Fonts
Yes, you can add fonts to Figma, and the process differs depending on whether you are using the desktop app or the web browser. In the desktop app, any font installed on your computer is automatically available; in the browser, you must use the “Upload fonts� button to temporarily share your local fonts with Figma. This guide covers both methods, how to manage font styles, and what to do when a font won’t appear.
How Figma Handles Fonts: Desktop vs. Browser
Figma is a browser-based design tool, but it also offers a standalone desktop application for Windows and macOS. The way fonts are loaded differs between the two:
- Desktop app: Figma reads the fonts installed on your operating system directly. If you install a new font (for example, by double-clicking a .ttf or .otf file and clicking “Install�), it becomes available in Figma immediately, often without restarting the app.
- Browser version: For security reasons, web browsers cannot access your local font files. Instead, Figma shows an “Upload fonts� button in the font picker. Clicking it opens a small window that lets you select font files from your computer. These fonts are only available for the current session—if you refresh the page, you’ll need to upload them again.
If you use the browser version regularly, the desktop app is more convenient because it avoids repeated uploads. However, the upload method is useful when you are on a shared or restricted computer where you cannot install fonts system-wide.
Step-by-Step: Adding Fonts in the Desktop App
Adding a font to the Figma desktop app is essentially just installing it on your operating system. Here is the standard workflow:
- Download the font file (usually a .ttf, .otf, or .woff2 file) from a trusted source like Google Fonts, Adobe Fonts, or the font foundry’s website.
- Unzip the downloaded folder if needed. Most font downloads come in a .zip archive.
- Double-click the font file to open the system font viewer (Font Book on macOS, or the Windows Font Viewer).
- Click “Install� (Windows) or “Install Font� (macOS).
- Open or restart Figma. The font should now appear in the font dropdown list under its family name.
If the font still does not show up, try quitting Figma completely (not just closing the window) and reopening it. On macOS, you can also check that the font is enabled in Font Book under “All Fonts.�
Step-by-Step: Adding Fonts in the Browser Version
When using Figma in a web browser, you cannot rely on system fonts. Instead, you upload them for the current session:
- Select a text layer in your design.
- Open the font family dropdown in the right-hand properties panel.
- Click the “Upload fonts� button that appears at the top of the list.
- In the file picker, select one or more font files (you can select multiple .ttf or .otf files at once).
- Figma will process them, and they will appear in the font list under a “Uploaded fonts� section.
These uploaded fonts work for the rest of your editing session. If you close the tab or refresh, you’ll need to upload them again. For team projects, consider using Figma’s shared font feature (see below) so collaborators don’t have to upload fonts individually.
Using Google Fonts and Figma’s Built-In Library
Figma includes a large collection of Google Fonts that are available to everyone without any installation. These are marked with a “Google� badge in the font picker. To use them, simply search for the font name and select it—no upload or install needed. This is the easiest way to add a common font.
If you need a font that is not in the Google collection, you have two options: install it locally (desktop app) or upload it (browser). For team projects, Figma also allows you to share custom fonts by placing the font files in a shared location (like a cloud drive) and having each teammate install or upload them. There is no way to embed a font file directly into a Figma file so that others can see it without installing it—they will see a fallback font if they don’t have it.
How to Choose the Right Font Format
Fonts come in several file formats, and Figma supports the most common ones. The key formats are:
- TTF (TrueType): The most widely supported format. Works on Windows and macOS.
- OTF (OpenType): A more advanced format that can include additional glyphs and typographic features. Also widely supported.
- WOFF / WOFF2: Compressed web fonts. Figma can import these for upload, but they are primarily designed for websites. For design work, TTF or OTF is usually preferred.
When downloading a font, choose TTF or OTF for reliability. Avoid variable fonts (which have a “VF� in the name) if you are unsure—they may appear with only one weight in Figma, and some versions have compatibility issues. If a font file is corrupted or incomplete, Figma may show an error during upload or installation.
Common Font Problems and Fixes
Even after installing or uploading, you might encounter issues. Here are the most frequent problems and their solutions:
- Font doesn’t appear in the list: Restart Figma completely. If you’re in the browser, re-upload the font. Check that the font file is not corrupted by trying to install it on your system first.
- Font appears but shows a warning triangle: This means the font is missing or not available to Figma. In the desktop app, reinstall the font. In the browser, upload the font file again.
- Font renders differently than expected: Some fonts have multiple weights (e.g., Light, Regular, Bold). Make sure you have installed all weight files, not just the regular one. Also check that you’re selecting the correct weight in the font style dropdown.
- Text looks blurry or pixelated: This is usually a rendering issue, not a font problem. Zoom in to 100% or export at a higher resolution. It can also happen if the font is a bitmap font (rare).
- Collaborators see the wrong font: They don’t have the font installed or uploaded. Share the font files with them, or switch to a Google Font that everyone can access.
Figma Fonts vs. System Fonts: What’s the Difference?
Figma’s built-in font library (Google Fonts) is convenient, but it has a limitation: you can only use the styles that Google provides. System fonts (like Arial, Helvetica, or fonts you install) often have more weights and typographic features. However, system fonts are only visible to you unless everyone on the team has them installed. This trade-off matters for collaboration:
- Google Fonts: Everyone can see them, but the selection is limited to what Google offers.
- Local fonts: Full control and variety, but every collaborator must install or upload them.
For client presentations or handoff, it’s safer to use Google Fonts to avoid missing-font errors. For personal projects or when you need a specific brand font, local fonts are the way to go.
Frequently Asked Questions
Can I add fonts to Figma on a Chromebook?
Yes, but only through the browser version. You cannot install fonts system-wide on most Chromebooks, so you’ll need to use the “Upload fonts� button each time you open Figma.
Why does my uploaded font disappear after I refresh?
Uploaded fonts are temporary by design. They exist only for the current browser session. To keep them available, use the desktop app or install the font on your operating system.
Can I add a font to a Figma team library so everyone has it?
There is no direct way to embed a font file in a team library. However, you can store the font files in a shared cloud folder and ask each teammate to install or upload them. Alternatively, use a Google Font that is already available to everyone.
Does Figma support variable fonts?
Figma has partial support. Some variable fonts appear as a single weight, and you may not be able to adjust the weight slider. For consistent results, use static font files (TTF or OTF) with separate weight files.
What is the easiest way to add a font for a quick test?
If the font is a Google Font, just search for it in the font picker and select it—no installation needed. If it’s a custom font, upload it in the browser or install it on your desktop, then restart Figma.
Can I use fonts from Adobe Fonts in Figma?
Yes, but only if you have the Adobe Fonts app installed (which syncs fonts to your system). Once synced, those fonts appear in the Figma desktop app like any other system font. They will not work in the browser version unless you upload the files manually.
Related
Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.