Uploading custom fonts to Figma is a fundamental skill for any designer working on brand-specific projects. This process ensures that your exact typeface is available for text layers, maintaining visual consistency across your designs. While Figma offers a robust library of Google Fonts, the ability to add proprietary or local fonts unlocks a new level of creative control.
Preparing Your Font Files
Before you can upload font to Figma, you must ensure the files are in the correct format. Figma supports both OTF (OpenType Font) and TTF (TrueType Font) file extensions. If your font is installed on your computer but you do not have the file, you can usually locate it in your operating system's font manager. For web projects, it is also helpful to verify that the font license permits embedding in digital designs.
Uploading to Your Figma Library
To make a font available across multiple files, you should add it to a team or personal library. First, open a Figma file and navigate to the Assets panel. Click the four-dot menu icon next to "Local" and select "Upload font." This action allows you to import the OTF or TTF file directly into your library. Once uploaded, the font will appear under the "Fonts" section, ready to be applied to any text node within that file.
Managing Variants
If your font family includes multiple weights or styles, such as Light, Regular, Bold, or Italic, Figma allows you to group them into a single variable font family. After uploading, you can right-click on the font in your assets and configure the variants. Properly structuring these variants ensures that the correct weight is applied without breaking the design system, streamlining the workflow for developers who will inspect the final product.
Applying Custom Fonts to Text
Once the font is in your library, applying it is straightforward. Select a text layer and choose the font from the dropdown menu in the right-hand properties panel. You will see both "System" fonts and your newly uploaded custom fonts listed. Selecting the custom font applies it instantly; however, if the file is large, there may be a brief moment while Figma renders the characters on the canvas.
Collaboration and Permissions
When you upload font to Figma, it is essential to understand how permissions affect your team. If you upload a font as a "Local" component, it remains on your personal device unless you explicitly add it to a shared library. To ensure consistency, admins should manage fonts at the team library level. This centralization prevents discrepancies where one designer uses "Arial" while another uses a custom brand font that looks identical but has a different file name.
Troubleshooting Common Issues
Occasionally, designers encounter issues where the font appears correct in the editor but looks different during presentation or development. This is often due to font substitution, where the system defaults to a look-alike typeface. To resolve this, ensure the exact font family is installed on the device viewing the file. Additionally, when exporting text as SVGs for development, verify that the "Outline text" option is selected if the receiving end does not have the font installed.
Best Practices for System Fonts
For optimal performance and compatibility, Figma recommends using system fonts for standard UI elements. These fonts, such as San Francisco, Roboto, or Segoe UI, are pre-installed on devices and do not require uploading font to Figma. Relying on system fonts reduces file load times and ensures that the design appears exactly as intended on any screen. Reserve custom uploads for brand-critical typography that defines the identity of the product.
