Back to all snippets
Library/Tailwind CSS/Geist Font in Next.js
typescriptbeginnernextjsfontstypographyvercel

How to implement Geist Font in Next.js in Typescript

Use the Geist font family in Next.js 13+ with the Fonts API

Quick Answer

Import Geist from `next/font/google`, instantiate it with variable names, and apply the CSS variables to your root HTML element in the layout.

Code Snippet

1// app/layout.tsx
2import { Geist, Geist_Mono } from 'next/font/google';
3
4const geist = Geist({
5  subsets: ['latin'],
6  variable: '--font-geist-sans',
7});
8
9const geistMono = Geist_Mono({
10  subsets: ['latin'],
11  variable: '--font-geist-mono',
12});
13
14export const metadata = {
15  title: 'My App',
16  description: 'Using Geist Font',
17};
18
19export default function RootLayout({
20  children,
21}: {
22  children: React.ReactNode;
23}) {
24  return (
25    <html lang="en" className={`${geist.variable} ${geistMono.variable}`}>
26      <body className="font-sans bg-white text-gray-900">
27        {children}
28      </body>
29    </html>
30  );
31}
32
33// globals.css (optional, for Tailwind config)
34@import 'tailwindcss';
35
36@theme {
37  --font-sans: var(--font-geist-sans), system-ui, sans-serif;
38  --font-mono: var(--font-geist-mono), monospace;
39}

What is Geist Font in Next.js?

Geist is Vercel's modern typeface family — clean, geometric, and highly legible on screens. Next.js 13+ makes it trivial to use via the Fonts API, which automatically optimises font loading, prevents layout shift, and self-hosts files so you don't rely on Google's CDN. This is the recommended way to use Geist in any Next.js project.

How It Works

  1. 1Next.js automatically optimises and self-hosts font files downloaded from Google Fonts
  2. 2`const geist = Geist({ variable: '--font-geist-sans' })` creates a font instance with a CSS variable name
  3. 3Add the font instance's `className` to the `<html>` element
  4. 4Use `font-sans` Tailwind class or the CSS variable directly in your styles

Common Use Cases

  • Next.js projects - Use Geist as the default font across your app
  • Vercel-hosted apps - Native support and optimal performance
  • Design-conscious projects - Geist is a beautiful, modern alternative to system fonts
  • SaaS products - Professional typography that feels premium and modern

Key Benefits

  • Self-hosted by Next.js — no third-party font CDN needed
  • Zero layout shift — fonts are preloaded and swapped in without moving content
  • Multiple weights and styles available (Sans and Mono)
  • Full CSS variable integration with Tailwind

Common Mistakes to Avoid

  • Importing Geist from the wrong path — use `next/font/google`, not `next/font/system`
  • Not including the `variable` parameter — without it, Next.js won't create the CSS variable for the font
  • Applying the font to the wrong element — fonts must be on <html> or <body> to apply globally

Quick Tips

  • Click the "Copy" button above to copy the code to your clipboard
  • This code is production-ready and can be used in your projects immediately
  • Check out related snippets below for more typescript examples

Frequently Asked Questions

Can I use multiple font families with Next.js Fonts API?

Yes. Import multiple fonts and combine their class names on <html>: `className={\`\${geist.className} \${geistMono.className}\`}`. Each gets its own CSS variable.

Do I need to add Geist to Tailwind config?

Yes, if you want to use `font-sans` and `font-mono` Tailwind classes. Add the CSS variables to your Tailwind config's `fontFamily` theme.

Related Snippets

html
intermediate
Responsive Navbar
Mobile-first responsive navigation bar with hamburger menu using Tailwind CSS
navbarresponsivemobile+2

About This Typescript Code Snippet

This free typescript code snippet for geist font in next.js is production-ready and copy-paste friendly. Whether you are building a web app, API, or frontend interface, this beginner-level example will help you implement geist font in next.js quickly and correctly.

All snippets in the Snippetly library follow typescript best practices and are tested for real-world use. You can adapt this code to work with React, Vue, Node.js, or any project that uses typescript.

Tags: nextjs, fonts, typography, vercel  | Language: typescript  | Difficulty: beginner  | Category: Tailwind CSS

Build Your Own Snippet Library

Organise your team's code snippets with Snippetly. Share knowledge and boost productivity across your organisation.

Get Started FreeBrowse More Snippets