If you are working on Figma, you may have encountered the error “Missing Fonts” at some point. This can be a frustrating issue, as it prevents you from modifying your text.
In today's article, we will explore how to resolve the missing fonts issue in Figma.
1. Identifying the “Missing Fonts” error in Figma
Before diving into the various solutions for fixing this missing fonts issue in Figma, let's discuss what causes it.
Figma is a collaborative no-code design tool. The tool allows you to create wireframes (Building a Wireframe in Figma) and design mockups for websites or mobile applications. This means you can collaborate with your team (UX Designers, UI Designers, etc.) on the same Figma file, and even share the file with clients in view-only mode. Collaborating in real-time on a single file is a significant advantage, but it can also come with some drawbacks.
One of the most common, well-known, and annoying issues in Figma relates to fonts. When working as a team or duplicating a Figma template, you may encounter fonts that you do not possess on your device. This is indicated by a small yellow box that says “A ?” when you click on a piece of text. This problem is frustrating as it renders the text with that font uneditable.
In our example, we can see that we do not have the font Helvetica Neue. Therefore, we are unable to modify our text.
2. Solutions for fixing the missing fonts error in Figma
Solution #1: Change the font(s) of the text
The first solution to fix the missing fonts issue is to change the font for all the text that has this error. While this may not be the most optimal solution, it is simple and quick.
To do this, you can select your text. In the Design tab, where the “Missing Fonts” error is displayed, in the “Text” section, simply enter the name of another font.
If you want to choose a font similar to the one you do not have, you can visit the website WhatFontIs and use the Similar Font tool. All you need to do is enter the name of the missing font, and the website will provide you with a list of similar fonts.
In our example, we do not possess the Helvetica Neue font. We will go to the WhatFontIs website and search for “Helvetica Neue.”
We see that the font “Gothic A1 Black” is similar to “Helvetica Neue.” We go back to our Figma file and change our font to this new one.
The “Missing Fonts” error from Figma has disappeared, and I can now modify my text.
Solution #2: Download the missing font(s) (Missing Fonts)
The second solution, which is a bit more technical, involves downloading the missing fonts. In our example, we will download the font “Helvetica Neue.”
There are several websites where you can download fonts for free (Dafont.com, Myfonts.com, ...). For our case, we will visit freefontsfamily.com.
We search for the font (Helvetica Neue) and download it.
In your downloads, you will find a zip file named after your font that you will need to extract. Once extracted, you will have a file you can open. In this file, you will find the different variations of your font. You can select all of them (Ctrl/Cmd + A), right-click, and click on “install.”
To ensure that the fonts are correctly installed, you need to restart your computer. Then, go back to your Figma file and modify your text as you wish.
Now you know how to resolve the missing fonts issue in Figma.
If you wish to convert your Figma file into a Webflow project, you can contact our no-code agency. You can also read our article on how to optimize your Style Guide in Figma for Webflow.
5 tools to find the ideal font family
