10+ Best Figma Fonts in 2022 for UI/UX designs

Are you looking for the best Figma fonts to sparkle your next UI or UX design? The good thing about Figma is that you can quickly choose between different font combinations. The software includes several fonts but also gives you the option to add custom fonts manually.

10+ Best Figma Fonts in 2022 for UI/UX designs

The truth is that fonts are one of the elements that can improve and differentiate your designs. The importance of typography for the design simply cannot be underestimated.

The typeface you choose should be readable, convey the right message and express the personality of the brand you are presenting with your design.

And this is not easy to achieve.

That's why we have created a list of the best Figma fonts you can use in 2022 and beyond. Without further ado, let us get started.

Best 13 Fonts for Figma Designers

Our selection is based on three aspects: UI /UX font trends, legibility, and repairability. Although several fonts on the market meet our criteria, the following 13 have proven to be the best choice for Figma designs.

1. Lato

Lato Font

Lato is one of the fonts suggested in the official Figma Pairings Guide. Ł ukasz Dziedzic designed the Lato family. It is one of the most comprehensive sans serif fonts on the market.

Lato includes more than ten font styles, upper and lowercase Latin letters, numerals and extended punctuation. The font is also available in 178 languages. Its sleek, modern design makes Lato perfect for any app developed with Figma.

According to Figma, this Google font can be easily combined with other fonts such as Karla, Abril Fatface, and Merriweather.

2. Montagu Slab

Montagu Slab Font

Our next selection is one of Figma users' most popular slab serif fonts. Montagu Slab is an open-base display font developed by Florian Karsten. With seven different styles, all essential characters, numbers and punctuation marks, this is the perfect all-rounder for app development.

Montagu Slab font also includes multiple currency symbols and supports more than 200 languages based on the Latin alphabet.

The font is inspired by classic 19th-century typography, making it suitable for modern and retro Figma designs.

3. Resist Sans

Resist Sans Font

If you are looking for a Figma font that is actually an improved Helvetica, Resist Sans is the best way to go. This typeface can be used for a variety of projects. Even though most Figma designers use Resist Sans for headings, it works very well for paragraphs.

As for the font's components, Resist Sans has nothing to be ashamed of. The font contains over 900 glyphs for each of the 14 included styles.

At the same time, Resist Sans offers numerous alternates, support for Cyrillic script, capitalization and extended punctuation.

4. Great Sailor

Great Sailor Font

Unlike the Google Fonts mentioned above, Great Sailor is a premium custom font. If you feel that you know most of the open-base fonts available on the market, this is a great solution.

This is one of the best Figma fonts for applications for many reasons. First of all, the curved font design makes it perfect for modern Figma designs.

At the same time, Great Sailor can be easily combined with almost any serif font on the market. The bundle includes uppercase and lowercase letters, numerals and punctuation.

Install Figma Mockup Plugin

5. Roboto Font Pairings

Roboto Font Pairing for Figma Chances are that you already know what Roboto Font is all about. This is one of the most popular sans serif fonts ever created. A great advantage of Roboto is that it can be paired with multiple modern typefaces.

Just to name a few, Roboto works well when combined with Nunito, Raleway, Lato, and Archivio. The truth is that countless apps and websites will utilize Roboto in 2022.

But, as long as you pair this font with one of the above, the result won’t only be good-looking but also unique.

6. Warming

Warming Font

Warming has been a top-notch choice for Figma designers since its development. The font counts millions of downloads on the Envato Elements marketplace. With more than 350 glyphs, this modern sans-serif easily made it to our top selection.

The typeface is available in 3 formats (TTF, OTF and WOFF), allowing you to upload it on Figma in just a few minutes. Apart from that, Warming comes as a family of 12 different uprights and italic fonts.

This is the perfect all-rounder if you are looking for a unique and modern font for your next web design.

7. Magnify

Magnify Font

As one of the most popular geometric sans serif fonts ever created, Magnify is perfect for clean app designs. With its unique structure, Magnify promises to satisfy your most demanding clients.

Magnify comes with 16 weights and styles, normal spacing and offers alternates for specific lowercase characters (a,g,y,o). At the same time, the uppercase letters O, G, C, and Q, integrate a unique graphic element.

According to its designer, xdCreative, the font is inspired by the classic font family Futura 1927. Even though Magnify can be used for paragraphs, headlines are where it really shines.

8. Lexend

Lexend Google Font

There is no market list of the best Figma fonts that do not include Lexend. There are many reasons why this typeface is one of the most successful app designs.

First of all, it is a legible font matching the 2022 UX and UI trends. In fact, Lexend was designed with a single goal in mind: to improve our reading performance. 5 different designers worked hard to develop Lexend, and the result is amazing.

The combinability of Lexend is also top-notch. During our testing, this font was perfectly combined with various display fonts for modern designs. Since Lexend is an open-base font available in Google Fonts, you can use it for free.

9. Cern & Cern Display

Cern Font

If you’re looking for a flexible Figma font that’s able to frame more than one app design, Cern & Cern is a smart solution. With 40+ weights, this sans serif is more of a complete font family.

Cern is available in 2 character sets (central and eastern European) and includes numerals and basic punctuation. As with Lexend, Cern & Cern was designed to be a readable font for paragraphs and headings.

The italics of this bundle are optimized for smooth reading, and the family can be combined with multiple Figma fonts.

10. Woodman

Woodman Font

The truth is that Woodman is more of a niche typeface. As a retro slab serif font, Woodman is perfect for vintage designs and relevant web apps. Still, that doesn’t mean you can’t use it on modern designs, either.

The Woodman thin style is perfect for contemporary headlines. Woodman comes in four different styles, uppercase and lowercase characters, alternates, ligatures, numerals, and punctuation.

If you add the extended multilingual support and the fact that Woodman is perfect for brand empowerment, this font is a must-own for serious Figma designs.

11. Raleway Font Pairing

Raleway Figma Font pairing

Raleway is the last font pairing of the list recommended by Figma. This is an elegant font that pairs well with a variety of modern typefaces such as Roboto and Open Sans.

Matt McInerney initially designed the font in 2010. Since then, more weights have been added by other designers. As of 2022, Raleway is a comprehensive 18 weight font family perfect for any modern design.

It includes multiple ligatures, all uppercase and lowercase characters, numerals, and punctuation. Raleway is suitable for 165 Latin and Cyrillic languages.

12. Nunito

Nunito Font Pairing

If you’ve been a Figma designer for years, you’ve come across Nunito. The truth is that this is a pretty simple sans serif. But this isn’t necessarily a bad thing. On the contrary, this construction balance makes Nunito one of the best fonts for elegant designs.

Most Figma designers combine Nunito with Lora and Roboto. These are by far the most successful font pairings for this typeface.

Nunito was recently extended to include 6 weights. This makes it a smart choice for both headlines and paragraphs. If you are looking for a readable thin sans serif, Nurito is a good choice.

13. Ubuntu font Pairings

Ubuntu Font Pairing

Last but not least, we have the Ubuntu font family. Ubuntu has been a top choice for Figma UI /UX designs since its birth in 2010. It is mainly used for modern brand designs. Ubuntu's Monospace and Condensed font styles have become increasingly popular over the past few years.

Since Ubuntu is available under an open license, Figma designers are free to edit and experiment with the structure of the font. This makes Ubuntu one of the most flexible Figma fonts around.

The best thing about Ubuntu is that it contains almost every common alphabet. Nothing is left out from the Greek alphabet to all Latin and Cyrillic characters. Ubuntu fully supports more than 300 languages.

SF Pro and Inter Font Alternatives

The SF Pro font it's a perfect typeface that is used in a variety of settings. However, there are many other sans serif typefaces that can be used as an alternative to SF Pro or Inter to spice-up your Figma designs.

SF Pro and Inter font alternatives

Check Denislav's Twitter thread to get inspired

How to Add Fonts to Figma?

Adding fonts to a web design software has never been easier. Figma allows you to import custom fonts in three different ways.

First of all, the desktop software automatically detects any font that’s already installed on your computer. So, if you use the Figma desktop app for Windows or Mac, your local fonts are automatically registered into the Figma software.

But what if you use the Figma web app? If that’s the case, you have nothing to worry about. You can quickly visit the official Figma website and download the app’s font installer. The installer is available for both Mac and Windows OS devices. This will allow you to quickly install any font you’ve downloaded to your computer.

The second way to add a font to your Figma account is via the “Resources” tab in the application. All you have to do is:

  1. Open the Figma desktop app

  2. Go your Admin Settings → Resources

  3. Click on Upload fonts. Choose the font you’ve downloaded on your PC and click on Open.

Finally, if you want to add a font on Figma for your team, the upload process is slightly different. After accessing the Figma app, go to Settings → Manage shared fonts. There, all you have to do is click the + button at the top of your screen and add your font by browsing your local files.

Wrap Up

It becomes clear that Figma offers several ways to add custom fonts to the desktop or web app. After you install one of the best of the above fonts, you can edit your UI /UX designs accordingly. Indeed, when it comes to your app typography, you have endless possibilities.

The same goes for the different combinations of fonts that you can use according to your needs. After all, you are in charge of the visual aspects of your projects. In any case, we hope that our list of the best Figma fonts will provide you with the inspiration you need to experiment with the typography of your upcoming designs.

Figma Fonts: FAQ

What font in Figma looks like handwriting?

Handwriting Font Figma You can use multiple fonts in Figma to make your design look handwritten. Fonts like Permanent Maker and Gloria Hallelujah are usually the best way to add a handwritten sparkle into your Figma designs.

How to add fonts to Figma?

To add custom font to Figma, you can either download the Figma fonts installer (for the web app) or manually upload the typeface (for the desktop app). To do that, you should open the Figma app and go to Settings → Admin Settings → Resources → Upload fonts.

How do I add Google fonts to Figma?

Adding a Google font to Figma is very easy. All you need to do is download the font on your PC. Then, you can either click on Install or manually import it into the Figma desktop app.

Which font is best in Figma?

Choosing the best font for Figma isn’t easy. It has everything to do with your personal needs and preferences. But, some of our favorite open-base Figma fonts are Lato, Montagu Slab and Lexend.

What you should do now

Try our Figma mockups plugin for free and join over 135K designers like you using it to impress clients and speed up their workflow.

And if you’re already with us, here are more Figma tips to give you the edge:

What's Mockuuups Studio?

Super-easy mockup generator with more than 2300 high-quality scenes. Available on macOS, Windows and Linux.

Sign-up to our newsletter

Get the latest articles on all things data delivered straight to your inbox.

START HERE

Create your mockup in a second.

It takes only a one click to create a stunning mockup for your website, presentations or social media.

Place Screenshot