According to the 2023 Design Tools Survey, Figma is the most used tool for UI design, basic prototyping, advanced prototyping, and design systems. However, it does have a problem with fonts being missing (more so than other design tools). This problem can manifest as a “missing fonts” warning that pops up upon opening a file, or as fonts not appearing in the font picker.
So in this article, I’ll go over the different reasons why you could be encountering Figma’s missing fonts problem and explain what you can do to fix it.
If you’ve forgotten to install the font (it happens), ignore the Missing fonts warning modal that pops up, quit Figma, install the font, then reopen Figma. Simple!
If you don’t actually want the font (perhaps it’s a downloaded file that you plan to customize anyway), simply choose a replacement font and font weight from the modal before clicking on the Replace fonts button.
If you happen to dismiss the Missing fonts modal, the yellow A? icon on the right side of the horizontal toolbar will reveal it again:
You probably didn’t need me to explain any of that though. If you’re reading this article, the most likely scenario is that you do have the font installed and it’s just not working (argh), so let’s dive into that.
If you’re missing fonts when using Figma Web and locally installed fonts, it’s probably because you don’t have the relevant Figma font installer for your operating system installed.
The problem pops up in this scenario because Figma Web doesn’t have access to your locally installed fonts out of the box (only Google Web Fonts); however, the Figma font installer solves this problem, so go ahead and install it.
I recommend downloading and installing the Figma font installer even if you’re not using Figma Web or locally installed fonts because it’s easy to forget about this little requirement and run into the problem later.
If the text in your design randomly shifts or changes, it’s probably because any number of collaborators have a different version of the font or styles/weights missing. The best way to get everybody on the right track is to upload the correct version of the font to your Figma organization, as this version takes precedence over any other versions that might exist.
To do this, your organization’s admin should click on Admin settings from the left sidebar of the file browser, click on the Resources tab from the horizontal toolbar next to your organization’s name, click on the Fonts tab, and then click on the Font button:
After that, simply find and select the relevant fonts from your computer, and then click on the Open button:
You can learn more about uploading fonts to your organization on Figma Learn, including how to upload them to specific teams. And for future reference, this is the order of the locations that Figma searches for the fonts that you specify:
If you’re using a Google web font but it appears that there are some weights missing, it’s probably because you have a version of the font uploaded to your Figma organization/team or installed on your computer that doesn’t contain those weights. Remember: those versions take precedence over Google Font versions, even if they’re incomplete.
You can fix this problem by deleting the font from your organization/team (via the same interface that you uploaded it with) and/or uninstalling the font from your computer — any collaborators will need to do this, too After that, the Google Font should work perfectly and even update automatically as new versions come out.
If you’re using Adobe Fonts but the fonts are showing up as missing or not appearing in the font picker, open Adobe Creative Cloud, click on the Adobe Fonts icon (the one with the lowercased, italicized “f”) in the top-right corner, and then click on the Install family button next to each font that you’d like to make available in Figma and other non-Adobe apps. If successful, the interface might say “in Adobe & other local apps” next to the font name, rather than “in Adobe apps”:
Other font providers might insist that you do the same thing or something similar.
When importing a Sketch file into Figma, it’s possible to run into the missing fonts problem despite having the font(s) installed. This is because Sketch can sometimes report font names incorrectly — e.g., as “OpenSans” rather than “Open Sans.”
The solution is simply to go through the replace fonts process mentioned above even though you’re not really replacing the font; you’re just prompting Figma to get the right font name.
Just kidding. I think that’s all of them.
You probably didn’t realize that so many things could go wrong with fonts in Figma, but actually all UI design tools suffer the same fate. Figma gets it much worse, though; for example, Figma Web’s Google Web Font problems are unique to Figma because other UI design tools don’t offer a web app version.
And of course you won’t run into any problems with Adobe fonts in Adobe products. The issues with Figma’s multiplayer editing are odd though, because other UI design tools offer coediting/real-time collaboration seemingly without font problems (shrug).
Regardless, Figma is the most popular UI design tool for good reason and we can reduce the likelihood of encountering variations of Figma’s missing fonts problem just by taking a few precautions:
Have I missed anything? If you have anything to add, drop it into the comment section below, and thanks for reading!
LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.
See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.
The first interaction sets the tone for the entire experience — get it right, and you’ve hooked your users from the start. So as a UX designer, you need to know how to put the primacy effect of UX design to good use.
Analogous color schemes offer a powerful way to guide user emotions and behavior. This guide shows you how to make colors do the good work of improving UX.
Knowing about trie data structures can help UX designers create quicker and more intuitive search experiences and improve overall usability.
The need for human centered design will only grow as technology evolves. Embracing these principles now will set you up to not meet but exceed the expectations of your users.
Learn more →
