5 Methods to Use Local Fonts in Figma: Step-by-Step Tutorial

A sophisticated cloud-based design tool, Figma, has completely changed how designers interact and produce beautiful user experiences. Its wide font collection, which gives users a variety of typographic alternatives, is one of its distinguishing qualities. But did you know how to use local fonts in Figma?

You may employ unique or specialized typefaces in your Figma projects by using local fonts, which are the fonts that are already installed on your computer. It also lets designers experiment with different typographic styles while upholding brand integrity.

This post will explore the world of local fonts and show you how to use local fonts in Figma to improve your creative process. We'll cover everything, from installing and managing local fonts on Windows, Mac, and browsers to using them for fluid collaboration. Though, only the desktop and browser versions of Figma allow local fonts. Users of Chromebooks and Linux are, regrettably, currently only able to utilize Google's Web Fonts.

Let's uncover the full power of local typefaces in Figma and take your design endeavors to the next level!

Table of Contents

How to Use Local Fonts in Figma on Windows?

How to Use Local Fonts in Figma on Mac?

How to Use Local Fonts in Figma in the Browsers?

How to Add Local Fonts to a Figma Organization Plan?

How to Add Local Fonts to a Figma Team?

Why Are My Local Fonts Not Working in Figma?

MioCreate – Figma Alternative with an Abundant of Font Options

To incorporate local fonts into Figma on your Windows device, follow these steps:

Step 1: Go for Figma Font Download

Begin by downloading the font you wish to import into Figma.

Step 2: Extract the Font

Locate the downloaded font file in your Downloads folder and extract it from the compressed file.

Step 3: Open the Windows Folder

Navigate to the folder for Windows OS on your computer.

Step 4: Install the Font

Double-click on the font file within the Windows folder. A popup window will appear.

Step 5: Click "Install"

Click the "Install" button in the popup window to install the font on your Windows device.

Once the font is installed, it becomes available on your device and within Figma. To see the changes, restart the Figma application.

Are you searching for how do I import local fonts into Figma? Read on to access your installed fonts on Windows, follow these steps:

1. Open the Control Panel on your Windows device.

2. Navigate to the "Appearance and Personalization" section.

3. Double-click on "Fonts" to access your font library.

4. Inside the Fonts folder, you will find all the fonts installed on your Windows system, including the one you imported for Figma.

Supported Windows OS

Windows: 8.1 or later

To add a new font to Figma on your Mac, follow these simple steps:

Step 1: Download the Font

Begin by downloading the font you want to use on your Mac.

Step 2: Locate the Downloaded File

Find the downloaded font file in your Finder application.

Step 3: Extract the Font (if necessary)

If the font file is compressed, extract it to access the actual font file.

Step 4: Open the macOS Font Folder

Navigate to the folder that contains the font files specifically for macOS.

Step 5: Install the Font via the Figma font installer

Double-click on the file to open it. A popup window will appear.

Step 6: Click "Install Font"

Click the "Install Font" button in the popup window to install the font on your Mac.

After font installation, it will be available in the font picker within your Figma application. If you don't see the font immediately, restart the Figma app, which should appear. Use the Font Book app to manage your installed fonts on a Mac. To disable or remove a font, select it in Font Book, click "Edit," and choose the appropriate option from the menu bar.

Supported Mac OS

Apple: MacOS 11

Local fonts might not be visible in the Figma browser app by default. However, you can easily address this by using the Figma font service, which can be downloaded from their website. Here's how to add a font to Figma browser app:

Step 1: Download the Font Service

Visit the Figma website and download the font service application suitable for your Windows or macOS device.

Step 2: Install the Application

Once the font service application is downloaded, proceed with the installation following the instructions.

Step 3: Refresh Figma in Your Browser

After installing the Figma font service, refresh the Figma browser app page. This step ensures the changes take effect and the font service is properly integrated.

Step 4: Access Local Fonts Figma in the Font Picker

With the font service installed and the Figma browser app refreshed, your local fonts will now be available in the font picker. You can choose and use these fonts seamlessly in your Figma designs.

Browser Requirements

macOS

macOS 11 or the latest

Windows

Windows 8 or a 64-bit environment

To add font to Figma Organization, follow these steps:

Step 1: Open Figma in the Organization Workspace

Log in to Figma and access the workspace associated with your Organization.

Step 2: Navigate to Admin Settings

Find and select the "Admin settings" option in the left sidebar. It will take you to the settings for managing your Organization.

Step 3: Access Shared Fonts

In the Admin settings, locate the "Resource" section and click "Shared fonts." It is where you can manage the custom fonts for your Organization.

Step 4: Upload Fonts

Click the "Upload fonts" button to initiate the font upload process.

Step 5: Select Font Files

Choose your desired font file for uploading from your computer. You can select multiple font files simultaneously by holding down the appropriate key while selecting. Once you've chosen the fonts, click "Open" to confirm your selection.

Step 6: Confirm Rights and Licenses, and Upload

Ensure you have the rights and licenses to use the font(s) you are uploading. Once confirmed, click "Upload" to start the upload process. The fonts will now be available in the font picker for files within your Figma Organization.

Note: Only organization admins can upload fonts to the Organization, and it ensures proper control and management of custom fonts within the Organization. 

Before we get started, let's define the terms Organization and Team in Figma. An organization's higher-level structure includes several Teams and enables centralized resource management. A Team, in contrast, is a more focused unit inside the Organization that collaborates on certain tasks or regions.

To add and access local fonts Figma Team, follow these steps:

Step 1: Open Figma and Select the Team

Launch Figma in the organization workspace and choose the specific Team you want to add the local fonts from the sidebar.

Step 2: Access Team Settings

In the selected Team, go to the Settings tab.

Step 3: Manage Shared Fonts

Click on the "Manage shared fonts" option. It is where you can handle the fonts available within the Team.

Step 4: View the Font List

Figma will display a list of all the fonts currently accessible in that Team. The list includes details like the Font Family, Style, Version, and font sample.

Step 5: Add a Font

Click the "+" button in the top-right corner to add a new font.

Step 6: Select Font Files

Choose the font file(s) you wish to upload from your computer. You can select multiple font files at once. Once selected, click "Open" to confirm your choice.

Step 7: Confirm Rights and Licenses

Check the box to confirm you have the necessary rights and licenses to use the font(s) you are uploading.

Step 8: Upload the Fonts

Click the "Upload" button to start the upload process. The font(s) will now be available in the font picker for any files within that specific Team.

Note: Please note that only Team admins can upload fonts to the Team, and it ensures proper control and management of the shared fonts within the Team environment.

There are a few potential methods to consider if local fonts aren't working properly in Figma. One choice is to use the font picker in the Figma desktop app to access your local fonts. Another option is checking to see if the font is correctly installed on the computer. You can also include unique fonts in Figma or update any fonts missing on your computer. If you're still experiencing problems with a specific typeface, you may contact Figma support or the font's designer for help.

Looking for a robust design tool with a large selection of font choices? MioCreate is the best place to go! 

 

MioCreate offers a wide range of capabilities as an excellent alternative to Figma, with typefaces being a particular strength. Many built-in typefaces are available in MioCreate, giving you access to various styles and options. In addition to its font features, MioCreate offers a host of other powerful design elements, real-time collaboration capabilities, and seamless prototyping sharing. This comprehensive tool ensures you have everything you need to bring your design visions to life efficiently and effectively.

By understanding how to use local fonts in Figma, you can greatly expand your typographic possibilities and create more personalized designs. Whether you choose to leverage Figma's native support for local fonts or explore alternative tools like MioCreate, the key is to have the flexibility to incorporate your preferred fonts seamlessly. With MioCreate, you can access many font options, including Google Web Fonts, built-in choices, and easily integrate local fonts. Take advantage of these powerful features to elevate your Figma designs and make them unique. Embrace the world of local fonts and unlock new creative horizons in your design journey with MioCreate.