7 SaaS fonts worth trying

In this article:

I’m constantly building side-projects. So what does every side project need? You guessed it — a banger font (or seven).

(Your latest SaaS also needs users, but… fonts are fun 😅)

I got sick of hunting around Google Fonts for fonts I liked, so I’ve compiled this list of my favorite SaaS fonts.

These fonts are great for landing pages, particularly headings. I’m sure they’d also work well for body text under the right conditions, but I’m typically far less adventurous there and just stick with Inter (or even ui-sans-serif).

The fonts

Each section below is styled in its font. They each link to their Google Fonts page, and at the end, I’ve included a drop-in block of CSS @imports so you can easily test all these fonts at once.

Mona Sans

Mona Sans is a versatile, sans-serif font with clean lines & modern curves. It works well in headings or UI text.

Mona Sans, a SaaS font worth trying.

View Mona Sans on Google Fonts

Playfair Display

Playfair Display is a high-contrast serif font, perfect for a more elegant look. It includes a very fancy looking italic font family as well.

Playfair Display, a SaaS font worth trying.

View Playfair Display on Google Fonts

Poppins

Poppins is quite a geometric font. I tend to prefer it large, so think headings or subheadings on dashboards or landing pages.

Poppins, a SaaS font worth trying.

View Poppins on Google Fonts

Archivo

Archivo is quite a striking, grotesque (grotesk) style of font. It's designed for strong headings and highlights.

Archivo, a SaaS font worth trying.

View Archivo on Google Fonts

Lora

Lora brings warmth to your writing. Unlike many of the fonts on this list, it excels as body text: perfect for long-form text and thoughtful design.

Lora, a SaaS font worth trying.

View Lora on Google Fonts

DM Sans

DM Sans is a low-contrast, geometric sans-serif font with a friendly feel. It works well for mobile and small text, although personally, I prefer it for headings.

DM Sans, a SaaS font worth trying.

View DM Sans on Google Fonts

Poetsen One

Poetsen One is a heavyweight, playful font with character. Use it sparingly for headings or accents (even this sentence is too much). It's only got a single weight, making it less versatile than other fonts here.

Poetsen One, a SaaS font worth trying.

View Poetsen One on Google Fonts

Plus, more bonus fonts

I couldn’t help myself! These fonts deserve an honorable mention: Inter because, well, it’s Inter. What more do you need me to say?

JetBrains Mono because it’s a great monospaced font, and it rounds out the full spectrum of fonts in this article.

Inter

You know Inter. I know Inter. It's clean and simple (it's what I use for this site) and often easy to forget.

Inter, a SaaS font worth trying.

View Inter on Google Fonts

JetBrains Mono

JetBrains Mono (yes, from that JetBrains) is an excellent monospaced font, perfect for displaying data or code.

JetBrains Mono, a SaaS font worth trying.

View JetBrains Mono on Google Fonts

Handy @import code block

Here’s a code block you can drop into your main CSS file. It imports all the fonts from this article in one go.

This makes it easy to test out each font. Once you’ve decided on a few to keep, make sure to remove the rest (to save bandwidth for your users):

@import url("https://fonts.googleapis.com/css2?family=Mona+Sans:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poetsen+One&display=swap");

/* bonus fonts below */
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

I’ve written separately about how to import custom fonts into Tailwind CSS, which you might find handy.