Dynamically import font

[spice mountain]

How do i dynamically import a font from next/font/google

[gusty mural]

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

---

To dynamically import a font from next/font/google in a Next.js application, you can follow the instructions provided in the knowledge sources. Here is how you can do it:

1. Import the font: Use the next/font/google module to import the font you want to use. For example, to import the Inter font:

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })

2. Use the font in your component: Apply the imported font to your component by using the className property provided by the font object. Here is an example of how to use the Inter font in a single page:

import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <div className={inter.className}>
      <p>Hello World</p>
    </div>
  )
}

This example demonstrates how to dynamically import and use the Inter font on a single page. You can follow a similar approach for other fonts and apply them to different components or pages as needed.

For more detailed information, you can refer to the Next.js documentation on Google Fonts (https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#google-fonts).

If you need to use the font across all pages, you can add it to the _app.js file as shown in the knowledge sources:

import { Inter } from 'next/font/google'

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({ subsets: ['latin'] })

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

This will ensure that the font is applied globally across your application.

For more information, you can refer to the Next.js documentation on Font Optimization (https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#google-fonts).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@spice mountain kapa.ai is still learning and improving, please let us know how it did by reacting below

[spice mountain]

@gusty mural this is not dynamic import

[gusty mural]

Let me check the knowledge base for you. One moment! :books:

---

Hmm, I don't know enough to give you a confident answer yet. For more information on dynamically importing fonts in Next.js, you might want to check the Next.js documentation on Font Optimization (https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#google-fonts).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@spice mountain kapa.ai is still learning and improving, please let us know how it did by reacting below

[spice mountain]

@gusty mural how do i conditionally use the next/font/google

[gusty mural]

Let me check the knowledge base for you. One moment! :books:

---

To conditionally use the next/font/google module in your Next.js application, you can create a component that loads fonts differently based on the environment (e.g., development or production). Here is an example based on the knowledge sources provided:

1. Create a Fonts component: This component will conditionally load fonts using @import during development and next/font in production.

"use client"

import { Inter } from "next/font/google"
import { useServerInsertedHTML } from "next/navigation"

const inter = Inter({
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
  display: "swap",
})

export function Fonts() {
  useServerInsertedHTML(() => {
    // Load fonts with @import during development due to a `next/font` bug.
    // For more info, see: <https://github.com/vercel/next.js/issues/52159>
    if (process.env.NODE_ENV === "development")
      return (
        <style
          dangerouslySetInnerHTML={{
            __html: `
              @import url('<https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'>);
            `,
          }}
        />
      )

    return (
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              --font-inter: ${inter.style.fontFamily};
            }
          `,
        }}
      />
    )
  })

  return <></>
}

2. Use the Fonts component in your root layout: Import and use the Fonts component in your root layout file to ensure it is applied globally.

import type { Metadata } from "next"
import "./globals.css"
import { Fonts } from "./fonts"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Fonts />
      </head>
      <body>{children}</body>
    </html>
  )
}

This approach ensures that during development, fonts are loaded using @import to avoid any issues with next/font, and in production, the fonts are loaded using next/font for optimal performance.

For more information, you can refer to the GitHub issue discussing this workaround (https://github.com/vercel/next.js/issues/52159).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: