Optimisation des polices

next/font optimisera automatiquement vos polices (y compris les polices personnalisées) et supprimera les requêtes réseau externes pour améliorer la confidentialité et les performances.

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

next/font inclut un hébergement automatique intégré pour tous les fichiers de police. Cela signifie que vous pouvez charger les polices web de manière optimale sans décalage de mise en page, grâce à la propriété CSS sous-jacente size-adjust.

Ce nouveau système de polices vous permet également d'utiliser commodément toutes les polices Google en tenant compte des performances et de la confidentialité. 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.

Polices Google

Hébergez automatiquement n'importe quelle police Google. Les polices sont incluses dans le déploiement et servies depuis le même domaine que votre déploiement. Aucune requête n'est envoyée à Google par le navigateur.

Commencez par importer la police que vous souhaitez utiliser depuis next/font/google en tant que fonction. Nous recommandons d'utiliser des polices variables pour les meilleures performances et flexibilité.

Pour utiliser la police dans toutes vos pages, ajoutez-la au fichier _app.js sous /pages comme indiqué ci-dessous :

pages/_app.js

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

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

Si vous ne pouvez pas utiliser une police variable, vous devrez spécifier un poids :

pages/_app.js

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

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

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

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 tiret bas (_) pour les noms de police avec plusieurs mots. Par exemple, Roboto Mono doit être importé comme Roboto_Mono.

Appliquer la police dans `<head>`

Vous pouvez également utiliser la police sans wrapper et className en l'injectant dans le <head> comme suit :

pages/_app.js

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <style jsx global>{`
        html {
          font-family: ${inter.style.fontFamily};
        }
      `}</style>
      <Component {...pageProps} />
    </>
  )
}

Utilisation sur une seule page

Pour utiliser la police sur une seule page, ajoutez-la à la page spécifique comme indiqué ci-dessous :

pages/index.js

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>
  )
}

Spécifier un sous-ensemble

Les polices Google sont automatiquement sous-ensemblisées. 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. Si vous ne spécifiez aucun sous-ensemble alors que preload est true, un avertissement sera affiché.

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

pages/_app.js

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

Consultez la Référence API des polices pour plus d'informations.

Utiliser 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, Roboto_Mono } from 'next/font/google'

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

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

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 :

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 modération, 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 local. Nous recommandons d'utiliser des polices variables pour les meilleures performances et flexibilité.

pages/_app.js

import localFont from 'next/font/local'

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

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

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 API des polices pour plus d'informations.

Avec Tailwind CSS

next/font peut être utilisé avec Tailwind CSS via une variable CSS.

Dans l'exemple ci-dessous, nous utilisons la police Inter de next/font/google (vous pouvez utiliser n'importe quelle police Google ou locale). Chargez votre police avec l'option variable pour définir le nom de votre variable CSS et assignez-la à inter. Ensuite, utilisez inter.variable pour ajouter la variable CSS à votre document HTML.

pages/_app.js

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    <main className={`${inter.variable} font-sans`}>
      <Component {...pageProps} />
    </main>
  )
}

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

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.

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 :

si c'est une page unique, elle est préchargée sur la route unique de cette page
si c'est dans l'App personnalisée, elle est préchargée sur toutes les routes du site sous /pages

Réutiliser les polices

Chaque fois que vous appelez la fonction localFont ou une police Google, cette police est hébergée en tant qu'une instance dans votre application. Par conséquent, si vous chargez la même fonction de police dans plusieurs fichiers, plusieurs instances de la même police sont hébergées. Dans cette situation, il est recommandé de faire ce qui suit :

Appeler la fonction de chargement de police dans un fichier partagé
L'exporter en tant que constante
Importer la constante dans chaque fichier où vous souhaitez utiliser cette police

On this page