Go Back
Top 7 Figma fonts for websites
Figma

Top 7 Figma fonts for websites

In this article we'll show you some of the most popular Figma fonts available at the moment.

Pierluigi Giglio
September 25, 2023

What are the best fonts to use on my Figma project?

Which fonts will make my Figma website look more aesthetic?

What fonts can I use to build the best website?

‍

Do not worry if you ask yourself these questions; you are not alone. Choosing a font can often be a difficult step in designing. After all, a font choice can make or break your design. It is the face of your website, one of the first things someone notices when they look at your work of art. Some fonts are too little, and some are too much – but what fonts are just right?

It can be confusing to decide on a font when you have no idea where to start. In this article, we will show you the top 7 fonts you can use on Figma for a flawless website design. The fonts everyone loves, and will make you website pleasing to the eye.


Helvetica

Helvetica is clean, simple, modern. It is known for its readability and is often used in timeless and neutral design. The characters are refined and easy to read, and big blocks of text don’t hurt the reader’s eyes. Helvetica Neue doesn't carry strong stylistic associations, allowing it to adapt to a wide range of design styles and brand identities – basically the perfect candidate for any website of any niche.

Another good thing about Helvetica is its visual appeal on both large desktop screens and small mobile devices. This is because Helvetica’s simple and open letterforms make it one of the best choices for responsive web design.

Helvetica is not a part of Google’s web fonts, therefore has to be installed.

‍

Roboto

Roboto is a font designed by Google and can be found in Google’s web library (so it’s within Figma). What makes Roboto perfect for web design is that this font was designed with readability in mind, making it an excellent choice for body text and other content on websites.

Roboto also supports a wide range of character sets and languages, making it a practical choice for websites with a global audience. Text set in Roboto font displays correctly in different languages and scripts. 

‍

Open Sans

Open Sans is another font of the Google family, which you can already find within the Figma library. People agree that it gives a sense of professionalism and neutrality. If you want a font that doesn’t come across as too strong, Open Sans is your best choice. This sans-serif font has a subtle roundness in some of its letterforms, such as the lowercase "a" and "g." This adds a touch of warmth and friendliness to its appearance without compromising its modernity.

‍

Lato

Did you know that Lato means summer in Polish? Yes, the name reflects the warm and friendly characteristics of this Google web font. Lato is intended to evoke feelings of clarity, freshness, and warmth, pretty much like a bright and sunny summer day. That’s what makes it so perfect for website design in Figma.

It comes in a variety of weights and styles – Lato Hairline might even make you double-check if the text is still there. Lato is designed to meet accessibility standards, making sure that text remains clear for all users, including those with visual impairments.

‍

Montserrat

Montserrat is elegant, that is the keyword that describes this Google font. If you are aiming for a timeless and sleek design for the website that you want to capture the hearts of many, Montserrat is your guy. The designer of this font, Julieta Ulanovsky, was inspired to create it by the urban typography and the historical signs in Montserrat, which often featured distinctive letterforms. If your design has a sort of contemporary feeling to it (just like Montserrat on the map), then make sure to throw Montserrat the font a look.

‍

Merriweather

For a serif font option, Merriweather is an excellent choice. It has a classic design, one that is commonly used in journalism and editorial design. The serifs, or small decorative strokes at the ends of characters, add a touch of elegance and tradition to the font. Merriweather is available as a web font through Google Fonts, so it’s already a part of Figma.

‍

Nunito

Nunito is another of Google’s Fonts, unique for its friendly and round look. If your project needs a warm and welcoming tone added to it, you might just want to give Nunito a try. Nunito is also an open-source font, which means it can be freely used, modified, and distributed by designers and developers. And despite its friendly look, Nunito maintains a modern and clean aesthetic.

‍

How do I add fonts to Figma?

‍

Sometimes Figma doesn’t have all the necessary fonts for designing – such as Helvetica. In this case, Figma allows you to use the fonts you have already installed on your device/computer.

To be able to use these fonts, you’ll need to download one of Figma’s Font installers from their webpage. 

‍

Depending on your device, you can choose either macOS installer or Windows installer. 

This installation makes it possible for the Figma web app to access the fonts you have downloaded on your PC. They will appear in your library.

‍

How to download Figma fonts for website design?

‍

If you have found a font that Figma’s Google font library currently doesn’t have, then you can simply install it. There are many sites on the Internet where you can download free fonts, such as Fontshare, DaFont, 1001FreeFonts, FontSquirrel, etc. It’s important to know that some fonts cost, so you cannot always find them for free on the internet.

All of the font websites have “Download” options for each of their fonts. All you have to do is click the button, and usually, the whole Font Family will be installed on your device. Then you can use them freely in Figma.

‍

We hope that this article answered your questions and helped you find the best fonts for your Figma designs and projects.

If you want to learn more about Figma, please visit our other resources.

‍

ABOUT THE AUTHOR
Pierluigi Giglio

Sr. UI/UX Designer and Consultant with over 10+ years of experience working with Fortune 500, large enterprises and funded startups. Having worked on hundreds upon hundreds of design projects, collaborated with 40+ clients from all around the world and taught design to thousands of students I am very grateful that I have the opportunity to give back to the design community and help other become better designers.

Enjoyed this read?

Stay up to date with the latest design news and cutting-edge softwares, sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.