logoNext.js
DocumentationBlogApprendre
Introduction/Référence API/Composants/Police

Module de police

next/font optimise automatiquement vos polices (y compris les polices personnalisées) 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 les polices web de manière optimale sans décalage de mise en page.

Vous pouvez également utiliser commodément toutes les Google Fonts. Les fichiers CSS et de police sont téléchargés au moment de la construction et hébergés avec le reste de vos ressources statiques. Aucune requête n'est envoyée à Google par le navigateur.

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

// Si vous chargez une police variable, vous n'avez pas besoin de spécifier le poids
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

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

🎥 Regarder : En savoir plus sur l'utilisation de next/font → YouTube (6 minutes).

Référence

Cléfont/googlefont/localTypeRequis
srcCross IconCheck IconString ou Array d'ObjectsOui
weightCheck IconCheck IconString ou ArrayRequis/Optionnel
styleCheck IconCheck IconString ou Array-
subsetsCheck IconCross IconArray de Strings-
axesCheck IconCross IconArray de Strings-
displayCheck IconCheck IconString-
preloadCheck IconCheck IconBoolean-
fallbackCheck IconCheck IconArray de Strings-
adjustFontFallbackCheck IconCheck IconBoolean ou String-
variableCheck IconCheck IconString-
declarationsCross IconCheck IconArray d'Objects-

src

Le chemin du fichier de police sous forme de chaîne ou d'un tableau d'objets (de type Array<{path: string, weight?: string, style?: string}>) relatif au répertoire où la fonction de chargement de police est appelée.

Utilisé dans next/font/local

  • Requis

Exemples :

  • src:'./fonts/my-font.woff2' où my-font.woff2 est placé dans un répertoire nommé fonts à l'intérieur du répertoire app
  • src:[{path: './inter/Inter-Thin.ttf', weight: '100',},{path: './inter/Inter-Regular.ttf',weight: '400',},{path: './inter/Inter-Bold-Italic.ttf', weight: '700',style: 'italic',},]
  • si la fonction de chargement de police est appelée dans app/page.tsx avec src:'../styles/fonts/my-font.ttf', alors my-font.ttf est placé dans styles/fonts à la racine du projet

weight

Le poids de la police avec les possibilités suivantes :

  • Une chaîne avec les valeurs possibles des poids disponibles pour la police spécifique ou une plage de valeurs s'il s'agit d'une police variable
  • Un tableau de valeurs de poids si la police n'est pas une google font variable. S'applique uniquement à next/font/google.

Utilisé dans next/font/google et next/font/local

  • Requis si la police utilisée n'est pas variable

Exemples :

  • weight: '400' : Une chaîne pour une seule valeur de poids - pour la police Inter, les valeurs possibles sont '100', '200', '300', '400', '500', '600', '700', '800', '900' ou 'variable' où 'variable' est la valeur par défaut)
  • weight: '100 900' : Une chaîne pour la plage entre 100 et 900 pour une police variable
  • weight: ['100','400','900'] : Un tableau de 3 valeurs possibles pour une police non variable

style

Le style de la police avec les possibilités suivantes :

  • Une chaîne valeur avec la valeur par défaut 'normal'
  • Un tableau de valeurs de style si la police n'est pas une google font variable. S'applique uniquement à next/font/google.

Utilisé dans next/font/google et next/font/local

  • Optionnel

Exemples :

  • style: 'italic' : Une chaîne - peut être normal ou italic pour next/font/google
  • style: 'oblique' : Une chaîne - peut prendre n'importe quelle valeur pour next/font/local mais est censée provenir des styles de police standard
  • style: ['italic','normal'] : Un tableau de 2 valeurs pour next/font/google - les valeurs sont normal et italic

subsets

Les subsets de la police définis par un tableau de chaînes avec les noms de chaque sous-ensemble que vous souhaitez précharger. Les polices spécifiées via subsets auront une balise de préchargement injectée dans l'en-tête lorsque l'option preload est vraie, ce qui est la valeur par défaut.

Utilisé dans next/font/google

  • Optionnel

Exemples :

  • subsets: ['latin'] : Un tableau avec le sous-ensemble latin

Vous pouvez trouver une liste de tous les sous-ensembles sur la page Google Fonts pour votre police.

axes

Certaines polices variables ont des axes supplémentaires qui peuvent être inclus. Par défaut, seul le poids de la police est inclus pour réduire la taille du fichier. Les valeurs possibles de axes dépendent de la police spécifique.

Utilisé dans next/font/google

  • Optionnel

Exemples :

  • axes: ['slnt'] : Un tableau avec la valeur slnt pour la police variable Inter qui a slnt comme axes supplémentaire comme indiqué ici. Vous pouvez trouver les valeurs possibles de axes pour votre police en utilisant le filtre sur la page des polices variables de Google et en cherchant les axes autres que wght

display

Le display de la police avec les valeurs de chaîne possibles 'auto', 'block', 'swap', 'fallback' ou 'optional' avec la valeur par défaut 'swap'.

Utilisé dans next/font/google et next/font/local

  • Optionnel

Exemples :

  • display: 'optional' : Une chaîne assignée à la valeur optional

preload

Une valeur booléenne qui spécifie si la police doit être préchargée ou non. La valeur par défaut est true.

Utilisé dans next/font/google et next/font/local

  • Optionnel

Exemples :

  • preload: false

fallback

La police de secours à utiliser si la police ne peut pas être chargée. Un tableau de chaînes de polices de secours sans valeur par défaut.

  • Optionnel

Utilisé dans next/font/google et next/font/local

Exemples :

  • fallback: ['system-ui', 'arial'] : Un tableau définissant les polices de secours à system-ui ou arial

adjustFontFallback

  • Pour next/font/google : Une valeur booléenne qui définit si une police de secours automatique doit être utilisée pour réduire le Cumulative Layout Shift. La valeur par défaut est true.
  • Pour next/font/local : Une chaîne ou une valeur booléenne false qui définit si une police de secours automatique doit être utilisée pour réduire le Cumulative Layout Shift. Les valeurs possibles sont 'Arial', 'Times New Roman' ou false. La valeur par défaut est 'Arial'.

Utilisé dans next/font/google et next/font/local

  • Optionnel

Exemples :

  • adjustFontFallback: false : pour next/font/google
  • adjustFontFallback: 'Times New Roman' : pour next/font/local

variable

Une valeur de chaîne pour définir le nom de la variable CSS à utiliser si le style est appliqué avec la méthode des variables CSS.

Utilisé dans next/font/google et next/font/local

  • Optionnel

Exemples :

  • variable: '--my-font' : La variable CSS --my-font est déclarée

declarations

Un tableau de paires clé-valeur de descripteurs de face de police qui définissent davantage la @font-face générée.

Utilisé dans next/font/local

  • Optionnel

Exemples :

  • declarations: [{ prop: 'ascent-override', value: '90%' }]

Exemples

Google Fonts

Pour utiliser une Google Font, importez-la depuis next/font/google en tant que fonction. Nous recommandons d'utiliser des polices variables pour les meilleures performances et flexibilité.

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

// Si vous chargez une police variable, vous n'avez pas besoin de spécifier le poids
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

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

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'],
  display: 'swap',
})

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

Vous pouvez spécifier plusieurs poids et/ou styles en utilisant un tableau :

app/layout.js
const roboto = Roboto({
  weight: ['400', '700'],
  style: ['normal', 'italic'],
  subsets: ['latin'],
  display: 'swap',
})

Bon à savoir : Utilisez un trait de soulignement (_) pour les noms de police avec plusieurs mots. Par exemple, Roboto Mono doit être importé comme Roboto_Mono.

Spécifier un sous-ensemble

Les Google Fonts sont automatiquement subset. Cela réduit la taille du fichier de police et améliore les performances. Vous devrez définir quels sous-ensembles vous souhaitez précharger. Ne pas spécifier de sous-ensemble alors que preload est true entraînera un avertissement.

Cela peut être fait en l'ajoutant à l'appel de fonction :

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

Consultez la Référence de l'API Font pour plus d'informations.

Utilisation de plusieurs polices

Vous pouvez importer et utiliser plusieurs polices dans votre application. Il existe deux approches possibles.

La première approche consiste à créer une fonction utilitaire qui exporte une police, l'importe et applique sa className là où c'est nécessaire. Cela garantit que la police est préchargée uniquement lorsqu'elle est rendue :

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

export const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
})

export const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
})
import { inter } from './fonts'

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

Dans l'exemple ci-dessus, Inter sera appliqué globalement, et Roboto Mono peut être importé et appliqué selon les besoins.

Alternativement, vous pouvez créer une variable CSS et l'utiliser avec votre solution CSS préférée :

import { Inter, Roboto_Mono } from 'next/font/google'
import styles from './global.css'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
  display: 'swap',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  variable: '--font-roboto-mono',
  display: 'swap',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${roboto_mono.variable}`}>
      <body>
        <h1>Mon application</h1>
        <div>{children}</div>
      </body>
    </html>
  )
}
app/global.css
html {
  font-family: var(--font-inter);
}

h1 {
  font-family: var(--font-roboto-mono);
}

Dans l'exemple ci-dessus, Inter sera appliqué globalement, et toutes les balises <h1> seront stylisées avec Roboto Mono.

Recommandation : Utilisez plusieurs polices avec parcimonie, car chaque nouvelle police est une ressource supplémentaire que le client doit télécharger.

Polices locales

Importez next/font/local et spécifiez le src de votre fichier de police locale. Nous recommandons d'utiliser des polices variables (variable fonts) pour une meilleure performance et flexibilité.

import localFont from 'next/font/local'

// Les fichiers de police peuvent être colocalisés dans `app`
const myFont = localFont({
  src: './my-font.woff2',
  display: 'swap',
})

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 seule 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',
    },
  ],
})

Consultez la référence de l'API Font pour plus d'informations.

Avec Tailwind CSS

next/font s'intègre parfaitement avec Tailwind CSS en utilisant des variables CSS.

Dans l'exemple ci-dessous, nous utilisons les polices Inter et Roboto_Mono de next/font/google (vous pouvez utiliser n'importe quelle police Google ou locale). Utilisez l'option variable pour définir un nom de variable CSS, comme inter et roboto_mono pour ces polices, respectivement. Ensuite, appliquez inter.variable et roboto_mono.variable pour inclure les variables CSS dans votre document HTML.

Bon à savoir : Vous pouvez ajouter ces variables à la balise <html> ou <body>, selon vos préférences, besoins de style ou exigences du projet.

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

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
})

const roboto_mono = Roboto_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-roboto-mono',
})

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      className={`${inter.variable} ${roboto_mono.variable} antialiased`}
    >
      <body>{children}</body>
    </html>
  )
}

Enfin, ajoutez la variable CSS à votre configuration Tailwind CSS :

Tailwind CSS v4

Depuis Tailwind v4, aucune configuration n'est requise par défaut. Si vous avez besoin de configurer Tailwind, vous pouvez suivre la documentation officielle pour configurer le fichier CSS global.

global.css
@import "tailwindcss";

@theme inline {
  --font-sans: var(--font-inter);
  --font-mono: var(--font-roboto-mono);
}

Tailwind CSS v3

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
    './app/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-inter)'],
        mono: ['var(--font-roboto-mono)'],
      },
    },
  },
  plugins: [],
}

Vous pouvez maintenant utiliser les classes utilitaires font-sans et font-mono pour appliquer la police à vos éléments.

<p class="font-sans ...">The quick brown fox ...</p>
<p class="font-mono ...">The quick brown fox ...</p>

Application des styles

Vous pouvez appliquer les styles de police de trois manières :

className

Retourne une className CSS en lecture seule pour la police chargée à passer à un élément HTML.

<p className={inter.className}>Bonjour, Next.js !</p>

style

Retourne un objet style CSS en lecture seule pour la police chargée à passer à un élément HTML, incluant style.fontFamily pour accéder au nom de la famille de police et aux polices de secours.

<p style={inter.style}>Bonjour le monde</p>

Variables CSS

Si vous souhaitez définir vos styles dans une feuille de style externe et y spécifier des options supplémentaires, utilisez la méthode des variables CSS.

En plus d'importer la police, importez également le fichier CSS où la variable CSS est définie et définissez l'option variable de l'objet chargeur de police comme suit :

import { Inter } from 'next/font/google'
import styles from '../styles/component.module.css'

const inter = Inter({
  variable: '--font-inter',
})

Pour utiliser la police, définissez la className du conteneur parent du texte que vous souhaitez styliser sur la valeur variable du chargeur de police et la className du texte sur la propriété styles du fichier CSS externe.

<main className={inter.variable}>
  <p className={styles.text}>Bonjour le monde</p>
</main>

Définissez la classe de sélecteur text dans le fichier CSS component.module.css comme suit :

styles/component.module.css
.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

Dans l'exemple ci-dessus, le texte Bonjour le monde est stylisé avec la police Inter et la police de secours générée avec font-weight: 200 et font-style: italic.

Utilisation d'un fichier de définitions de polices

Chaque fois que vous appelez la fonction localFont ou une police Google, cette police sera hébergée comme une instance unique dans votre application. Par conséquent, si vous avez besoin d'utiliser la même police à plusieurs endroits, vous devez la charger à un seul endroit et importer l'objet de police associé là où vous en avez besoin. Cela se fait en utilisant un fichier de définitions de polices.

Par exemple, créez un fichier fonts.ts dans un dossier styles à la racine de votre répertoire app.

Ensuite, spécifiez vos définitions de polices comme suit :

import { Inter, Lora, Source_Sans_3 } from 'next/font/google'
import localFont from 'next/font/local'

// définissez vos polices variables
const inter = Inter()
const lora = Lora()
// définissez 2 poids d'une police non variable
const sourceCodePro400 = Source_Sans_3({ weight: '400' })
const sourceCodePro700 = Source_Sans_3({ weight: '700' })
// définissez une police locale personnalisée où GreatVibes-Regular.ttf est stocké dans le dossier styles
const greatVibes = localFont({ src: './GreatVibes-Regular.ttf' })

export { inter, lora, sourceCodePro400, sourceCodePro700, greatVibes }

Vous pouvez maintenant utiliser ces définitions dans votre code comme suit :

import { inter, lora, sourceCodePro700, greatVibes } from '../styles/fonts'

export default function Page() {
  return (
    <div>
      <p className={inter.className}>Bonjour le monde avec la police Inter</p>
      <p style={lora.style}>Bonjour le monde avec la police Lora</p>
      <p className={sourceCodePro700.className}>
        Bonjour le monde avec la police Source_Sans_3 avec un poids de 700
      </p>
      <p className={greatVibes.className}>Mon titre en police Great Vibes</p>
    </div>
  )
}

Pour faciliter l'accès aux définitions de polices dans votre code, vous pouvez définir un alias de chemin dans vos fichiers tsconfig.json ou jsconfig.json comme suit :

tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/fonts": ["./styles/fonts"]
    }
  }
}

Vous pouvez maintenant importer n'importe quelle définition de police comme suit :

import { greatVibes, sourceCodePro400 } from '@/fonts'

Préchargement

Lorsqu'une fonction de police est appelée sur une page de votre site, elle n'est pas disponible globalement et préchargée sur toutes les routes. Au lieu de cela, la police est préchargée uniquement sur les routes associées en fonction du type de fichier où elle est utilisée :

Changements de version

VersionChangements
v13.2.0@next/font renommé en next/font. L'installation n'est plus requise.
v13.0.0@next/font a été ajouté.

Composants

Référence API pour les composants intégrés de Next.js.

Formulaire

Découvrez comment utiliser le composant `<Form>` pour gérer les soumissions de formulaire et les mises à jour des paramètres de recherche avec une navigation côté client.

On this page