How to use vercel geist font in Next.js? — How to use Vercel Geist Fonts in Next.js?

Next.js + Geist Font.

How to use Vercel Geist Fonts in Next.js?

Replace the Google fonts with Vercel Geist Fonts in Next.js.

Rajdeep Singh

Published in

FrontEnd web

3 min readOct 30, 2023

Vercel recently introduced a new font called Gesit fonts. It is a unique design to be used in terminals, code editors, diagrams, and other text-based interfaces where code is rendered.

You can easily use geist fonts with the next.js app and page route. To use geist fonts, first, you need to install geist font locally with a node package manager (NPM, yarn, and pnpm).

npm install geist
# or
yarn add geist
# or
pnpm add geist

The command output looks like this.

> pnpm add geist
Packages: +2
++
Progress: resolved 795, reused 748, downloaded 2, added 2, done

dependencies:
+ geist 1.0.0

Done in 5.7s

To use Geist font in Next.js, there are two popular ways to use font in Next.js.

Routers
Tailwind CSS

Routers

There are two types of routers in Next.js: Both routers are stable and production-ready.

App Router
Pages Router

All the source code for the router is available on GitHub, and You can also check out the live demo site.

App Router

For the app router, you can use geist fonts with the following code.

import { GeistSans } from "geist/font";
import './globals.css' // tailwind CSS

export default function RootLayout({ children}) {
  return (
    <html lang="en" className={GeistSans.className}>
      <body>{children}</body>
    </html>
  )
}

Pages Router

For the pages router, you can use geist fonts with the following code.

import { GeistSans } from "geist/font";
import './globals.css' // tailwind CSS

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={GeistSans.className}>
      <Component {...pageProps} />
    </main>
  )
}

Tailwind CSS

To use geist fonts in tailwind CSS, you need to follow two steps. Both steps come with a copy-paste code.

All the source code for the tailwind CSS is available on GitHub, and You can also check out the live demo site.

Steps 1

The first step is to divide into two pages and app routers, according to the router, the code is changed.

If you App router, then paste the following code into the layout,tsx file.

// app/layout.tsx 

import type { Metadata } from 'next'
import { GeistMono, GeistSans } from "geist/font";


export const metadata: Metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }: { children: React.ReactNode; }) {
  
  return (
    <html className={`${GeistSans.variable} ${GeistMono.variable}`} lang="en">
      <body>{children}</body>
    </html>
  ) 
}

If you page router, then paste the following code into the _app.tsxfile.

// pages/_app.jsx

import { GeistSans, GeistMono } from "geist/font";

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${GeistSans.variable} ${GeistMono.variable}`} >
      <Component {...pageProps} />
    </main>
  )
}

Steps 2

The last and second steps are the same for both the app and page router. Paste the following code into tailwind.config.js file.

theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
      },
    },
  },

Your tailwind.config.js file looks like this after pasting the code.

import type { Config } from 'tailwindcss'

const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-geist-sans)'],
        mono: ['var(--font-geist-mono)'],
      },
    },
  },

  plugins: [],
}
export default config

In both Routers and Tailwind CSS ways, restart your development server and if you face any error first remove the .next folder and then re-start your development server.

FAQ

Syntax error: cannot use import statement outside a module?

If you face a similar error with nextjs and Geist font. To solve this issue, first update all the packages, including the nextjs.

After updating the package, then remove the .next folder and rerun the nextjs development serve. Your error is resolved.

Conclusion

Geist font is a good alternative to nerd fonts. Previously if you use zsh, hyper, neovim, neovim based framework.

They recommended the nerd fonts, and people were confused about which nerd font to choose.

But now the problem is solved, open source library use Geist font happily. No need for other issues because Geist font is specially designed for code.

You can share and follow me on Twitter and LinkedIn. I write tons of articles related to frontend development and Linux.

If you are interested in those topics, follow me on Medium, officialrajdeepsingh.dev, join the Linux and frontend web publication, and sign up for my free newsletter.