font inspectorWhat font does Next.js use?
Next.js is made by Vercel, so its site shares Vercel’s typography. It is also a working example of `next/font`, the framework’s own font loader.
Short answer: The Next.js website uses Geist, Vercel’s open source typeface, for text and Geist Mono for code, both self-hosted as variable fonts.
Geist
Self-hosted97.8%- CSS name
GeistSans- Weights
- 400, 500, 600
- Sizes
- 72px · 32px · 20px · 18px · 16px · 14px · 13px
- Served from
- nextjs.org
Geist Mono
Self-hosted1.3%- CSS name
Geist Mono- Weights
- 400
- Sizes
- 13px · 11px
- Served from
- nextjs.org
Sizes, weights and spacing by role
These are computed values from the live page, which is what the Font Inspector panel shows when you click each element.
| Role | Font | Size | Weight | Line height | Letter spacing |
|---|---|---|---|---|---|
| Headline | Geist | 72px | 600 | 1 | -0.05em |
| Body text | Geist | 14px | 400 | 1.5 | -0.01em |
The main font stack in the CSS:
font-family: GeistSans, "GeistSans Fallback";- The headline is 72px at weight 600 with -0.05em tracking and a line height of 1.
GeistSans Fallbackis the metric-adjusted fallback face thatnext/fontgenerates to prevent layout shift.- The search field still uses a system font stack that begins with Inter.
Check any site yourself in one click.
Sites change their type without notice. Font Inspector shows the rendered font, size, weight and spacing of any text on nextjs.org or anywhere else, and lists every font on the page. Free, no account.
About the fonts, and whether you can use them
Geist
A geometric, Swiss-inspired sans serif created by Vercel with Basement Studio for interfaces and developer tools.
Can you use it? Yes. Geist is free under the SIL Open Font License, on Google Fonts and as the geist npm package.
Geist Mono
The monospaced companion to Geist.
Can you use it? Also open source, from the same places.
On Google Fonts: Geist Mono.
Finding a font does not license it. More in how to get a font you found, legally.
Get a similar look with a free font
This starter uses Geist, which is open source, with the sizes and spacing measured above. It is an approximation, not a copy of Next.js’s brand typeface.
/* Approximates the Next.js look with a free font */
body {
font-family: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
h1 {
font-size: 4.5rem; /* 72px */
font-weight: 600;
line-height: 1;
letter-spacing: -0.05em;
}
p {
font-size: 0.875rem; /* 14px */
font-weight: 400;
line-height: 1.5;
letter-spacing: -0.01em;
}How we checked
We opened nextjs.org in Chrome on September 21, 2026 and read the computed styles of its visible text: the declared font stack, the font actually rendered, and how much of the page’s text each family sets. That is the same data the Font Inspector extension shows under Fonts on this page. We re-check these pages periodically, and the date above shows the last inspection.
Next.js and its typefaces are trademarks of their respective owners. Font Inspector is not affiliated with Next.js.
Questions & answers
What font does Next.js use on its website?
The Next.js website uses Geist, Vercel’s open source typeface, for text and Geist Mono for code, both self-hosted as variable fonts.
Can I use the Next.js font?
Yes. Geist is free under the SIL Open Font License, on Google Fonts and as the geist npm package.
What is a free font similar to Geist?
Inter is free on Google Fonts and gives a similar feel. No free font is an exact match, so compare it with your own text first.
How can I check what font Next.js uses myself?
Open nextjs.org, then click any text with the Font Inspector extension, or right-click, choose Inspect and look at Rendered Fonts in the Computed tab. Sites change their typography, so checking the live page is the only way to be sure.