Comment utiliser les polices

Le module next/font optimise automatiquement vos polices et supprime les requêtes réseau externes pour améliorer la confidentialité et les performances.

Il inclut l'hébergement automatique intégré pour tout fichier de police. Cela signifie que vous pouvez charger des polices web de manière optimale sans décalage de mise en page.

Pour commencer à utiliser next/font, importez-le depuis next/font/local ou next/font/google, appelez-le comme une fonction avec les options appropriées, et définissez le className de l'élément auquel vous souhaitez appliquer la police. Par exemple :

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

const geist = Geist({
  subsets: ['latin'],
})

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

Les polices sont limitées au composant dans lequel elles sont utilisées. Pour appliquer une police à toute votre application, ajoutez-la au Layout racine.

Polices Google

Vous pouvez héberger automatiquement n'importe quelle police Google. Les polices sont incluses en tant qu'actifs statiques et servies depuis le même domaine que votre déploiement, ce qui signifie qu'aucune requête n'est envoyée à Google par le navigateur lorsque l'utilisateur visite votre site.

Pour commencer à utiliser une police Google, importez la police de votre choix depuis next/font/google :

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

const geist = Geist({
  subsets: ['latin'],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={geist.className}>
      <body>{children}</body>
    </html>
  )
}

Nous recommandons d'utiliser des polices variables pour les meilleures performances et flexibilité. Mais si vous ne pouvez pas utiliser une police variable, vous devrez spécifier un poids :

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

const roboto = Roboto({
  weight: '400',
  subsets: ['latin'],
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={roboto.className}>
      <body>{children}</body>
    </html>
  )
}

Polices locales

Pour utiliser une police locale, importez votre police depuis next/font/local et spécifiez le src de votre fichier de police locale. Les polices peuvent être stockées dans le dossier public. Par exemple :

import localFont from 'next/font/local'

const myFont = localFont({
  src: './my-font.woff2',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={myFont.className}>
      <body>{children}</body>
    </html>
  )
}

Si vous souhaitez utiliser plusieurs fichiers pour une même famille de polices, src peut être un tableau :

const roboto = localFont({
  src: [
    {
      path: './Roboto-Regular.woff2',
      weight: '400',
      style: 'normal',
    },
    {
      path: './Roboto-Italic.woff2',
      weight: '400',
      style: 'italic',
    },
    {
      path: './Roboto-Bold.woff2',
      weight: '700',
      style: 'normal',
    },
    {
      path: './Roboto-BoldItalic.woff2',
      weight: '700',
      style: 'italic',
    },
  ],
})

Police

Référence API pour le module Font

Polices Google

Polices locales

Police

On this page