If you want cleaner mockups, stronger brand consistency, and fewer font errors, you need to know how to add font to Figma the right way. Many people install a font on their computer and assume the job is done, only to find that the font is missing in Figma, unavailable in the browser, or replaced during site preview.
This guide walks you through the full process with practical steps, smart troubleshooting, and the publishing details that matter most, so you can use custom fonts with confidence and avoid the mistakes that waste time.
Start With the Right Font Before You Install Anything
The first step is not installation. The first step is choosing a font you can legally use, easily manage, and publish without issues later. If you skip that decision-making stage, you can end up with a typeface that looks great in a mockup but fails when you move into a live workflow.
A strong choice usually checks four boxes: readable design, clear licensing, dependable file formats, and a web friendly version. If you want fast visual experimentation before you commit, trying fonts generator can help you compare styles, tone, and readability so your final font choice fits the interface instead of fighting it. That approach saves time because you narrow the field before you start installing files and updating text styles across your project.
You should also think about purpose. A font for a logo or hero section may not work for smaller interface labels, button text, or mobile layouts. Good Figma typography starts when you choose a typeface that supports your design system, not when you click the font menu.
How to Add Font to Figma on a Desktop Computer
If you use the Figma desktop app, adding a font is usually straightforward. You download the font file, unzip it if needed, install it on your computer, then reopen Figma so the app can detect it. Once that is done, select a text layer, open the font picker, and search for the newly installed typeface.
Most desktop setups work best with TTF or OTF files because those are standard formats for local font installation. If you work with social content and want to study how major platforms shape identity through typography, the article on what font does tiktok use shows how a recognizable font system supports readability, branding, and screen-based design decisions. That matters in Figma because the font you install should not only look attractive, but also hold up well in UI layouts, captions, and small-scale components.
After installation, test the font immediately. Type a heading, a body paragraph, and a button label so you can see whether spacing, weight, and legibility still work when the font is used in real interface elements.
How to Use Fonts in the Browser Version of Figma
The browser version adds one more layer. Even if the font is installed on your machine, Figma in the browser may still need its font helper or local font access setup to recognize those files correctly, which is why some users see fonts in one environment and not the other. This is one of the most common reasons custom type feels inconsistent.
You should also remember that display problems are not always caused by Figma itself. The article on why did my facebook font size change explains how zoom settings, browser behavior, device scaling, and rendering changes can alter text display, and those same issues can affect how a design tool appears in your browser. Before assuming a font is broken, reset zoom, reload the tab, and confirm that the browser can access local fonts correctly.
If the font still does not appear, close the file and reopen it after checking your system installation. In many cases, the issue is not the font file itself but the path between your computer, your browser, and the way Figma reads local resources.
Understand the Difference Between Figma Files and Figma Sites
This is where many guides stop too early. Using a font inside a Figma file is not the same as publishing that font on a Figma Site. You can design with a custom typeface in your editor and still have the published site fall back to another font if you do not upload the correct web format.
For normal design work, local OTF or TTF files are often enough. For published Figma Sites, you need the matching WOFF or WOFF2 file because those formats are designed for the web and are lighter for browser delivery. Figma’s current documentation makes that distinction clear, and it is one of the most important technical details to understand if you want your preview and published output to match.
This difference also explains why a font may look perfect on canvas but appear wrong in preview. The design file can reference a locally available font, while the site preview relies on a web-safe version uploaded via the proper publishing settings.
Install the Font, Then Test It in a Real Design Context
A successful setup does not end when the font appears in the list. You still need to test it in practical design situations because a typeface that looks impressive in one sample line can fall apart in a real layout. This is where careful evaluation protects your work from expensive revisions later.
Start with a mini test system. Create a page that includes a hero headline, body copy, small labels, navigation text, and a button state. Then review the font at different sizes and weights to see whether it remains readable, balanced, and consistent across components.
Pay attention to spacing, line height, and how numbers render if your design includes pricing, dates, or dashboards. Some fonts look elegant in large titles but become cramped in tighter interface spaces. Testing early helps you decide whether to keep the font, switch to another weight, or choose a different family before the design becomes too large to adjust easily.
Fix Missing Fonts, Wrong Fonts, and Preview Problems
When a font fails in Figma, the cause is usually one of a few repeat issues. The font might not be properly installed, the browser may not be reading local fonts, the file may be missing the correct web version, or a collaborator may have used a font that is not available on your system. Solving the problem is easier when you work through those causes in order.
Use this quick troubleshooting process before you panic:
- Confirm the font installs correctly on your operating system
- Restart Figma after installation
- Reset browser zoom and reload the file
- Check whether you are using OTF or TTF for editing
- Upload WOFF or WOFF2 for Figma Sites publishing
- Replace unsupported text styles before republishing
Forum discussions on Figma Sites have also shown that preview behavior can differ from design-canvas behavior during product changes. That is why you should test both the editor and the preview environment, rather than assuming one confirms the other.
Work Better With Teams and Shared Brand Systems
Font problems become harder to manage when more people are involved. One designer may have a font installed locally, while another person opening the same file does not, leading to font substitution, broken hierarchy, or inconsistent previews. In collaborative work, font management is not just a design task. It is an operations task.
The best fix is standardization. Keep a shared list of approved typefaces, file formats, weights, and intended use cases so every teammate works from the same source. If your team publishes through Figma Sites, add the web font files to your workflow documentation as well, because design use and site publishing use different file requirements.
You should also define which font is used for headings, body text, captions, and action elements. That level of clarity speeds up production, reduces revision cycles, and makes your interface feel more polished because the type system behaves consistently from mockup to review to launch.
Best Practices That Make Custom Fonts Easier to Manage
The cleanest Figma projects are usually the ones with fewer surprises. That does not mean using boring type. It means choosing fonts strategically, naming text styles clearly, and building a workflow that supports speed and consistency. A custom font should strengthen your design, not make it harder to maintain.
These habits make a noticeable difference:
Choose only the weights you need
Loading every available weight creates clutter. If your interface only needs Regular, Medium, and Bold, keep the system lean and work with those deliberately.
Build text styles early
Instead of styling each layer by hand, create reusable text styles from the start. That gives you faster updates, better consistency, and fewer formatting mistakes when you revise screens later.
Test on smaller screens
A font that works on a wide desktop frame may fail on a compact mobile layout. Always review text on tighter breakpoints before you lock in the final typography direction.
Conclusion
Learning how to add font to Figma is really about understanding the full workflow, not just the installation step. You need the right font choice, the right file type, the right setup for desktop or browser use, and the right publishing format if you plan to launch through Figma Sites. Once you understand those layers, the process becomes much more predictable.
The biggest mistake is assuming every font behaves the same way across design files, previews, and published pages. When you install carefully, test in real layouts, upload proper web fonts, and standardize your typography system, you avoid the most common problems before they slow you down. That gives you cleaner designs, smoother collaboration, and far more control over the visual identity you are building in Figma.