How to use Vercel's Geist Font in Next.js?
Discover how to easily add Vercel's sleek and modern Geist font to your Next.js project for clean typography and enhanced UI design.
Kaushal Joshi
Sep 17, 2024 • 5 min read
Vercel is one of the leading companies in the web ecosystem. From creating the most popular React framework for the web to offering a robust cloud platform for hosting apps, Vercel has made significant contributions to the web domain.
In October 2023, Vercel launched something unique for a cloud company. In collaboration with Basement Studio, they released a font named "Geist" — a modern typeface designed for optimal readability on digital screens.
In today's blog, let's learn more about Geiest, and how to use it in your projects.
What exactly is Geist Anyway?
Geist is a modern sans-serif typeface designed by Vercel. Geist was created specifically for user interfaces and web/app development, focusing on readability across various screen sizes and resolutions. It’s a clean and minimalistic font with a geometric design. It’s suitable for both display and body text. The font is optimized for digital displays, ensuring crisp rendering even at small sizes.
Geist embodies Vercel’s design principles of simplicity, minimalism, and speed, drawing inspiration from the renowned Swiss design movement. With precision, clarity, and functionality at its core, Geist enhances the visual experience of developers and designers, empowering them to effectively communicate their ideas.
Geist is open source, allowing developers and designers to use it in their projects without licensing concerns.
https://github.com/vercel/geist-font
It comes in two variants:
- Geist Sans: The sans-serif version, ideal for design and the web.
- Geist Mono: A monospaced version, ideal for code editors and technical documentation.
Both variants offer multiple weights, ranging from ultra-light to black, providing design flexibility.
Geist Sans
Geist Sans is a sans-serif typeface designed for legibility and simplicity. It's modern, geometric, and based on the principles of classic Swiss typography. Geist Sans is suitable for body copy, headlines, logos, posters, and other large display sizes.
Geist Mono
Geist Mono is a monospaced typeface, crafted to complement Geist Sans perfectly. It's designed for use in code editors, diagrams, terminals, and other text-based interfaces where code is rendered.
Use Geist in Next.js 15 (or above)
If you're using Next.js 15 or above, Geist is the default font for the app. You don't need to make any changes to use the font.
You can find the font configuration in /app.layout.tsx. If you wish, you can move it to a seprate file like font.ts.
import localFont from 'next/font/local';
export const geistSans = localFont({
src: './fonts/GeistVF.woff',
variable: '--font-geist-sans',
weight: '100 900',
});
export const geistMono = localFont({
src: './fonts/GeistMonoVF.woff',
variable: '--font-geist-mono',
weight: '100 900',
});
If you're using Tailwind CSS, simply add the font-sans class name for Geist Sans and font-mono for Geist Mono.
However if you're not using Tailwind CSS, you can add the font in your CSS file.
h1, h2, h3, p {
font-family: var(--font-geist-sans);
}
pre, code {
font-family: var(--font-geist-mono);
}
For Next.js 14 or older versions
If you're using a version of Next.js older than 15, add the following line to next.config.js or next.config.mjs:
/** @type {import('next').NextConfig} */
const nextConfig = {
transpilePackages: ['geist'], // Add this line
};
export default nextConfig;
This resolves any type of errors and syntax errors that might occur while importing the font.
Using Geist in Next.js App router
Make the following changes inside app/layout.tsx to use Geist in app router.
import { GeistSans } from 'geist/font/sans';
export default function RootLayout({ children }) {
return (
<html lang='en' className={GeistSans.className}>
<body>{children}</body>
</html>
);
}
If you want to use Geist Mono, import it from geist/font/mono. Like the following:
import { GeiestMono } from 'geist/font/mono';
Using Geist in Next.js Pages router
Make the following changes inside pages/_app.tsx to use Geist in pages router.
import { GeistSans } from 'geist/font/sans';
export default function MyApp({ Component, pageProps }) {
return (
<main className={GeistSans.className}>
<Component {...pageProps} />
</main>
);
}
Using Tailwind CSS
If you're using Tailwind CSS in your project, extend the default font family to use Geist. In tailwind.config.js, add the following:
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['var(--font-geist-sans)'],
mono: ['var(--font-geist-mono)'],
},
},
},
};
The bundler will automatically pick up the CSS variables from Next.js's internal config and assign them to the respective class names. Use the font-sans class name for Geist Sans and font-mono Geist Mono.
Using Geist for Non-Next.js project
If you are not using Next.js, and yet if you want to use Geist, you must download the font locally to use it. You can download the font from the following link:
https://github.com/vercel/geist-font/releases/tag/1.3.0
The zip file contains OTF, WOFF2, and variable font files. All of them are licensed under OFL, so you can freely use them in your projects.
Wrapping up
Geist is a modern, open-source sans-serif typeface tailored for digital readability, available in two variants: Geist Sans and Geist Mono. In this blog, we learned how to use the font in Next.js applications. For Next.js 15 and above, Geist is the default font, while older versions require some configuration changes. We also cover how to integrate Geist fonts using Tailwind CSS and the steps for non-Next.js projects.
I hope you found this blog helpful. If you did, share this with your peers and communities so they can learn from it as well. I’d also love to know if it helped you. I am most active on Peerlist and Twitter. Feel free to ping me.
If you are looking for a Nextjs Jobs or Reactjs Jobs, you will find many good opportunities on Peerlist Jobs. Don't forget to check them out.
Keep building! 👨💻
