How do I use custom font in Nextjs?

[alpine crater]

So I got 2 folders, SF_Pro_Display and SF_Pro_Text. Each folder has files like SF-Pro-Display-Bold.otf, SF-Pro-Display-Medium.otf, SF-Pro-Display-Regular.otf, SF-Pro-Display-Semibold.otf,... How would I use this in my nextjs app?

[jade patrol]

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

---

In Next.js, you can use custom fonts by leveraging the next/font module. This module will automatically optimize your fonts and remove external network requests for improved privacy and performance.

Here's a step-by-step guide on how to use custom fonts in your Next.js application:

1. First, you need to import next/font/local and specify the src of your local font file.

import localFont from 'next/font/local'
 
// Font files can be colocated inside of `pages`
const myFont = localFont({ src: './my-font.woff2' })
 
export default function MyApp({ Component, pageProps }) {
  return (
    <main className={myFont.className}>
      <Component {...pageProps} />
    </main>
  )
}

In your case, you would replace './my-font.woff2' with the path to your font file, for example './SF_Pro_Display/SF-Pro-Display-Bold.otf'.

2. If you want to use multiple files for a single font family, src can be an array:

const SF_Pro_Display = localFont({
  src: [
    {
      path: './SF_Pro_Display/SF-Pro-Display-Bold.otf',
      weight: '700',
      style: 'normal',
    },
    {
      path: './SF_Pro_Display/SF-Pro-Display-Medium.otf',
      weight: '500',
      style: 'normal',
    },
    // Add more paths as needed
  ],
})

3. You can then use these font definitions in your code as follows:

export default function Page() {
  return (
    <div>
      <p className={SF_Pro_Display.className}>Hello world using SF Pro Display font</p>
    </div>
  )
}

For more information, you can refer to the Font API Reference (https://nextjs.org/docs/app/api-reference/components/font) and Font Optimization (https://nextjs.org/docs/app/building-your-application/optimizing/fonts) in the Next.js documentation.

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

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

[alpine crater]

@jade patrol How do I wait for font to load before displaying any contents. I would want to show like a loading image before font finish loaded.

[jade patrol]

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

---

To display a loading image or any other placeholder content while waiting for a font to load, you can use the dynamic import feature of Next.js along with a custom loading component. Here's a step-by-step guide:

1. First, create a custom loading component. This component will be displayed while your font is loading. For example, you can create a simple component that displays a loading image:

function Loading() {
  return <img src="/path-to-your-loading-image.png" alt="Loading..." />;
}

2. Next, use the dynamic function from Next.js to dynamically import the component that uses your custom font. The dynamic function accepts a second argument where you can specify a loading component:

import dynamic from 'next/dynamic'

const ComponentWithCustomFont = dynamic(
  () => import('../components/ComponentWithCustomFont'),
  {
    loading: () => <Loading />,
  }
)

export default function Page() {
  return (
    <div>
      {/* The loading component will be rendered while ComponentWithCustomFont is loading */}
      <ComponentWithCustomFont />
    </div>
  )
}

In this example, ComponentWithCustomFont is the component that uses your custom font. Replace '../components/ComponentWithCustomFont' with the actual path to your component.

This way, the Loading component will be displayed until ComponentWithCustomFont has finished loading, which includes loading the custom font.

For more information, you can refer to the Dynamic Import documentation (https://nextjs.org/docs/advanced-features/dynamic-import) in the Next.js documentation.

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

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

[alpine crater]

@jade patrol full code pls?

[jade patrol]

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

---

I'm sorry for any confusion, but without the specific details of your project structure and the component that uses your custom font, I can't provide a full code example. However, I can give you a general idea of how the code might look.

Here's a simplified example:

1. Create a Loading component:

// components/Loading.js
export default function Loading() {
  return <img src="/path-to-your-loading-image.png" alt="Loading..." />;
}

2. Import your custom font in a component:

// components/ComponentWithCustomFont.js
import localFont from 'next/font/local'

const SF_Pro_Display = localFont({
  src: [
    {
      path: './SF_Pro_Display/SF-Pro-Display-Bold.otf',
      weight: '700',
      style: 'normal',
    },
    // Add more paths as needed
  ],
})

export default function ComponentWithCustomFont() {
  return (
    <div className={SF_Pro_Display.className}>
      Hello world using SF Pro Display font
    </div>
  )
}

3. Use dynamic import to load the component with a custom font:

// pages/index.js
import dynamic from 'next/dynamic'
import Loading from '../components/Loading'

const ComponentWithCustomFont = dynamic(
  () => import('../components/ComponentWithCustomFont'),
  {
    loading: () => <Loading />,
  }
)

export default function Page() {
  return (
    <div>
      <ComponentWithCustomFont />
    </div>
  )
}

Please replace the paths and component names with the ones that match your project structure. For more information, refer to the Dynamic Import documentation (https://nextjs.org/docs/advanced-features/dynamic-import) in the Next.js documentation.

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