Installing a font in Figma is a straightforward process, yet it connects directly to the broader workflow of managing system resources. Designers often assume the application pulls directly from their operating system's library, which is largely true, but understanding the specific mechanics prevents frustration. This guide walks through the precise steps required to get your custom typefaces active and ready for vector editing.
Preparing Font Files for Your Operating System
Before Figma can recognize a typeface, the font file must be installed at the system level. You cannot simply drag a .TTF or .OTF file into the Figma canvas and expect it to load. You must first install the font through your computer's settings.
Installation on macOS
On Mac computers, installing a font is handled by the Font Book application. After downloading the font file, you typically double-click it to open the preview window. Click the "Install Font" button, and the system validates and adds the typeface to your library. Once installed, the font name will appear in the Font dropdown menu within Figma on your next launch.
Installation on Windows
Windows handles font installation through the Settings menu or the legacy Control Panel. After extracting the font files from a ZIP folder, right-click the .TTF or .OTF file and select "Install" or "Install for all users." Alternatively, you can drag the font file into the "Fonts" section of the Settings app. The system will process the installation, making the typeface available globally.
Accessing the Font in Figma
Once the font is installed system-wide, switching to it in Figma is simple. Select the text layer you wish to modify, click on the font dropdown menu in the right-hand properties panel, and scroll through the list. The new font should appear alongside the default options. If it does not appear immediately, restarting Figma usually forces the application to refresh its library cache.
Using Google Fonts as an Alternative
For teams or users who want to avoid manual installation, Figma offers native integration with Google Fonts. This method is excellent for ensuring consistency across different devices and team members without sending large file attachments. The process happens entirely within the Figma interface.
Adding Google Fonts to Your File
To add these web-safe typefaces, navigate to the Assets tab located on the left sidebar. Click the three dots menu in the top right of the Assets panel and select "Add new fonts." A window will pop up displaying a grid of popular Google Fonts. You can browse by category or use the search bar to find specific families. Selecting the checkboxes next to the desired fonts and clicking "Add" integrates them directly into your current file.
Managing Font Stylings and Variations
After installing or selecting a font, you might notice that certain stylistic options are missing. For instance, a font package might include "Regular," "Bold," and "Italic" variants, but Figma only recognizes some of them initially. If your text does not appear in the intended weight or style, you need to manually enable the variants.
Click on the text layer, and in the text section of the right-hand panel, look for a small "i" icon or a list of available styles. Clicking this allows you to force specific font styles or load additional weights. This step ensures that headings maintain visual hierarchy and that body text retains readability.
Collaboration and File Sharing Considerations
Sharing a Figma file that uses locally installed fonts requires careful consideration. If you send a link to a teammate who does not have the same font installed, Figma will automatically swap it out for a generic fallback, usually Roboto. This substitution can drastically alter the design's appearance and spacing.
