Module Font

Cette référence API vous aidera à comprendre comment utiliser next/font/google et next/font/local. Pour les fonctionnalités et l'utilisation, veuillez consulter la page Optimisation des polices.

Arguments de la fonction de police

Pour l'utilisation, consultez Google Fonts et Polices locales.

src

Le chemin du fichier de police sous forme de chaîne ou de 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/ma-police.woff2' où ma-police.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/ma-police.ttf', alors ma-police.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 police Google 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 de valeur avec la valeur par défaut de 'normal'
• Un tableau de valeurs de style si la police n'est pas une police Google 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 sous-ensembles de police définis par un tableau de valeurs de chaîne 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 de lien 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 recherchant les axes autres que wght

display

Le display de la police avec les valeurs de chaîne possibles de 'auto', 'block', 'swap', 'fallback' ou 'optional' avec la valeur par défaut de '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 valeur de chaîne ou 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: '--ma-police' : La variable CSS --ma-police 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%' }]

Application des styles

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

• className
• style
• Variables CSS

className

Retourne un 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 spécifier des options supplémentaires là-bas, 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 de chargeur de police comme suit :

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

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

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 le className du conteneur parent du texte que vous souhaitez styliser sur la valeur variable du chargeur de police et le 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>

<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 :

.text {
  font-family: var(--font-inter);
  font-weight: 200;
  font-style: italic;
}

Dans l'exemple ci-dessus, le texte Bonjour le monde est stylisé en utilisant 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 Google font, cette police sera hébergée comme une instance 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 d'application.

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 }

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 en poids 700
      </p>
      <p className={greatVibes.className}>Mon titre en police Great Vibes</p>
    </div>
  )
}

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 en poids 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 :

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

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

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

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

Changements de version