Bringing your brand’s unique typeface into Figma is the first step toward achieving pixel-perfect, consistent design across digital projects. Unlike static images, fonts require a specific installation process on your device before they can be accessed within the design tool. This guide walks through the essential methods for how to import font to Figma, ensuring your text layers reflect the exact weight and style you need.
Understanding System Fonts vs. Local Fonts
Figma operates by referencing fonts installed on your computer at the operating system level. If a typeface is not present in your system’s font library, Figma will default to a standard web-safe alternative, which often leads to mismatched spacing and visual inconsistency. Therefore, the core of learning how to import font to Figma is actually about installing the font package on your computer, rather than a direct manipulation within the Figma interface itself.
Preparing the Font File
Before installation, you must possess the correct file format for your operating system. Font files typically come in OTF (OpenType) or TTF (TrueType) formats, though WOFF and WOFF2 are common for web use and cannot be installed locally for design software. If your source is a ZIP archive, extract the file first. Ensure you have the legal right to use the typeface; installing commercial fonts without a license violates copyright and can lead to legal issues for distributed designs.
Installing on Windows
For Windows users, the process is straightforward and centralized. Once you have the OTF or TTF file, simply right-click on it and select "Install" from the context menu. Alternatively, you can open the Fonts settings panel, drag the font file into the window, and click "Install." This action adds the typeface to your global library, making it available in all creative applications, including Figma.
Installing on macOS
MacOS offers a more interactive font preview system. Double-click the downloaded font file, which opens the "Font Book" application. Inside the preview window, you will see an "Install Font" button in the lower right corner. Clicking this button installs the typeface system-wide. It is generally recommended to avoid installing a massive number of unused fonts, as this can slow down the performance of applications like Figma due to the extensive library scan at launch.
Using the Font in Figma
With the file successfully installed, the final step in how to import font to Figma is deceptively simple: just open Figma. Create or open a file and select the Text tool. In the right-hand properties panel, click on the font dropdown menu. Your newly installed typeface should appear in the list. If it does not appear immediately, restart Figma to force a refresh of the system font cache.
Managing Your Font Library
As you import multiple typefaces, your Figma file settings become crucial for collaboration. When sharing a file with teammates or handing off to developers, you must ensure the correct font styles are preserved. Figma allows you to mark specific text styles as "Used" or "Available for import." If you are using a custom or non-standard font, you must enable the "Include custom fonts in the Figma document" option before sharing. This embeds the necessary font data, ensuring that the design appears exactly as you typed it for anyone viewing the file.
Troubleshooting Common Issues
Occasionally, the operating system may report a font as "broken" or fail to install it entirely. This usually indicates a corrupted download or a format incompatibility. Re-downloading the file from a trusted source usually resolves this. Furthermore, if the font appears in your system settings but not in Figma, clearing the cache is the most effective solution. Navigate to Figma’s settings, find "Clear cache," and restart the application. This refreshes the list and typically resolves visibility issues for newly imported typefaces.
