#Using fonts

1 messages · Page 1 of 1 (latest)

west dust
#

In my layout.tsx file, I have:

import { Geist } from "next/font/google";

const geistSans = Geist({
    subsets: ["latin"]
});

<body className={`${geistSans.className} antialiased`}>

How can I add Geist_Mono to be used in other files?

bright glacierBOT
#

Hi @west dust. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

To add Geist_Mono alongside Geist in your Next.js application, you have a few approaches. Here's how you can implement it:

Option 1: Add to your layout file

You can import and configure both fonts in your layout file:

import { Geist, Geist_Mono } from "next/font/google";

const geistSans = Geist({
    subsets: ["latin"]
});

const geistMono = Geist_Mono({
    subsets: ["latin"]
});

// Then in your JSX:
<body className={`${geistSans.className} ${geistMono.className} antialiased`}>

Option 2: Using CSS variables (recommended)

For better flexibility, you can use CSS variables:

import { Geist, Geist_Mono } from "next/font/google";

const geistSans = Geist({
    subsets: ["latin"],
    variable: "--font-geist-sans",
});

const geistMono = Geist_Mono({
    subsets: ["latin"],
    variable: "--font-geist-mono",
});

// Then in your JSX:
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>

Then you can use these fonts in your CSS:

html {
  font-family: var(--font-geist-sans);
}

code {
  font-family: var(--font-geist-mono);
}

Option 3: Create a font definitions file (best practice)

For better organization, create a dedicated font definitions file:

// styles/fonts.ts
import { Geist, Geist_Mono } from "next/font/google";

export const geistSans = Geist({
  subsets: ["latin"],
  variable: "--font-geist-sans",
});

export const geistMono = Geist_Mono({
  subsets: ["latin"],
  variable: "--font-geist-mono",
});

Then import and use in your layout:

// layout.tsx
import { geistSans, geistMono } from "../styles/fonts";

// In your JSX:
<html lang="en" className={`${geistSans.variable} ${geistMono.variable}`}>

And in other components:

// some-component.tsx
import { geistMono } from "../styles/fonts";
#

<div className={geistMono.className}>Monospaced text</div>


This approach is recommended as it ensures fonts are only loaded once in your application, improving performance.

[Font Optimization](<https://nextjs.org/docs/app/building-your-application/optimizing/fonts#using-multiple-fonts>) | [Using a font definitions file](<https://nextjs.org/docs/app/api-reference/components/font#using-a-font-definitions-file>) | [With Tailwind CSS](<https://nextjs.org/docs/app/building-your-application/optimizing/fonts#with-tailwind-css>)
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------