There are roughly 1,700 fonts on Google Fonts. Before a visitor reads a word of your copy, the one you picked has already told them whether your product looks considered or thrown together - and most teams choose it by scrolling until something feels okay, then moving on.
That's a bad way to make a decision that every screen inherits. So we did the scrolling for you. These are the 20 free Google Fonts we actually ship with - handpicked from years of building software, grouped by the job they do, ready to drop in without the paralysis. Every one is free, open source, and free for commercial use.
The short version — the free Google Fonts we reach for most:
- Body & UI: Inter, Figtree, DM Sans, Manrope, Outfit, Plus Jakarta Sans
- Headlines & branding: Playfair Display, Bricolage Grotesque, Space Grotesk, Syne
- Editorial serif: Newsreader
All 20, grouped by the job they do, are below - with live specimens and how to add them in Next.js.
Why the font is worth getting right
Typography is the highest-leverage, lowest-cost decision in a product's look. It's free, it's one line of code, and it sets the tone of every page at once - trust, personality, how premium the thing feels. Get it right and a plain layout looks intentional. Get it wrong and no amount of polish elsewhere rescues it; the interface just reads as default.
The business version: the typeface is part of your first impression, and first impressions decide whether someone keeps reading or bounces. It costs nothing and touches everything. That's a rare combination.
How to choose one (the 30-second version)
You don't need to be a type designer. You need three questions:
- Workhorse or statement? Body text and UI want a font that disappears - neutral, legible, invisible. Headlines and branding want a font with a point of view. These are different jobs; don't ask one font to do both.
- Does it have the range? For anything real you need multiple weights (regular, medium, bold at least). Variable fonts give you the whole range from a single file - prefer them.
- Does it pair? Most sites use two fonts: one for headings, one for body. The pairing matters more than either font alone. A safe recipe: a characterful headline over a neutral body sans.
Pick the role first, then the font. We've split our 20 exactly this way:
- The 12 workhorses for UI and body text - the fonts that get out of the way.
- The 8 fonts for headlines and branding - the fonts that set the mood.
If you only try three
Skip the whole exercise and start here:
- Inter - for UI and body. The screen-native default; it will never look wrong.
- Playfair Display - for an elegant, high-contrast headline over Inter.
- Space Grotesk - when you want a little techy personality instead of pure neutrality.
That's a complete, professional type system in three free files.
One caveat on Inter: it's the safe pick because it's everywhere - which is also the catch. Used alone at default settings, it's become the tell-tale font of AI-generated, templated sites. Keep it for body, but give it a headline with personality, or read how to keep your typography from looking like AI slop before you ship Inter-on-Inter.
How to actually use them (Next.js)
Google Fonts don't have to mean a slow <link> to Google's servers. With next/font, Next.js downloads and self-hosts the font at build time - no external request, no privacy hit, and crucially no layout shift as the font loads:
// app/layout.tsx
import { Inter, Playfair_Display } from "next/font/google";
const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter" });
const playfair = Playfair_Display({ subsets: ["latin"], variable: "--font-playfair" });
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className={`${inter.variable} ${playfair.variable}`}>
<body>{children}</body>
</html>
);
}
Expose them as CSS variables (above), then point your body at one and your headings at the other. Load only the weights and subsets you use - fewer bytes, faster paint.
On licensing (the part a decision-maker asks about)
Every font here is open source under the SIL Open Font License or Apache License. In plain terms: free to use commercially, free to self-host, free to bundle in a shipped product, with no per-seat bill and nothing to renew. It's genuinely one of the few "free" in software that comes with no asterisk - just confirm the individual family's license page and you're clear.
The part that actually matters
None of these fonts can do the hard part for you: the typeface is maybe 20% of the result. The other 80% is judgment - choosing the right one for the job, pairing it well, and then the restraint to stop at two. A world-class font used carelessly still looks amateur; a modest one used with discipline looks designed.
That gap - between a page that looks default and one that looks decided - is where the design actually happens, and it's a big part of what we obsess over building software at Bruvora. Start with the shortlists below, and you're already most of the way there.
Frequently asked questions
- Are Google Fonts free for commercial use?
- Yes. Virtually every Google Font is open source under the SIL Open Font License or Apache License, which allow commercial use, self-hosting, and bundling inside apps at no cost. It's worth confirming the specific family's license on its page, but the answer is almost always yes.
- How do I add a Google Font in Next.js?
- Use next/font/google: import the family, call it with your subsets and options, and apply the generated className. Next.js self-hosts the font at build time, so there's no request to Google's servers and no layout shift when the page loads.
- What is the best all-round Google Font?
- For UI and body text, Inter is the safe default - it was designed for screens, has a huge weight range, and pairs with almost anything. For an elegant headline, pair it with Playfair Display or DM Serif Display.
- How many fonts should a website use?
- Usually two - one for headings, one for body - or even a single versatile family across both. More than three typefaces on a page tends to read as noise rather than design.
Keep reading
The 12 free Google Fonts we reach for on UI and body text - Inter, Figtree, DM Sans and more - with where each one fits and the weights to load.
Eight free Google Fonts for headlines and branding - Playfair Display, Syne, Bricolage Grotesque and more - plus the body fonts to pair each one with.
Why so many sites now look AI-generated - and the typography fixes that make yours look decided instead of default. Starting with the Inter problem.