|
| 1 | +--- |
| 2 | +source-updated-at: 2025-06-01T01:32:20.000Z |
| 3 | +translation-updated-at: 2025-06-06T16:46:29.469Z |
| 4 | +title: Comment utiliser les polices |
| 5 | +nav_title: Polices |
| 6 | +description: Apprenez à utiliser les polices dans Next.js |
| 7 | +related: |
| 8 | + title: Référence API |
| 9 | + description: Consultez la référence API pour l'ensemble des fonctionnalités de Next.js Font |
| 10 | + links: |
| 11 | + - app/api-reference/components/font |
| 12 | +--- |
| 13 | + |
| 14 | +Le module [`next/font`](/docs/app/api-reference/components/font) optimise automatiquement vos polices et supprime les requêtes réseau externes pour améliorer la confidentialité et les performances. |
| 15 | + |
| 16 | +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. |
| 17 | + |
| 18 | +Pour commencer à utiliser `next/font`, importez-le depuis [`next/font/local`](#polices-locales) ou [`next/font/google`](#polices-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 : |
| 19 | + |
| 20 | +```tsx filename="app/layout.tsx" highlight={1,3-5,9} switcher |
| 21 | +import { Geist } from 'next/font/google' |
| 22 | + |
| 23 | +const geist = Geist({ |
| 24 | + subsets: ['latin'], |
| 25 | +}) |
| 26 | + |
| 27 | +export default function Layout({ children }: { children: React.ReactNode }) { |
| 28 | + return ( |
| 29 | + <html lang="en" className={geist.className}> |
| 30 | + <body>{children}</body> |
| 31 | + </html> |
| 32 | + ) |
| 33 | +} |
| 34 | +``` |
| 35 | + |
| 36 | +```jsx filename="app/layout.js" highlight={1,3-5,9} switcher |
| 37 | +import { Geist } from 'next/font/google' |
| 38 | + |
| 39 | +const geist = Geist({ |
| 40 | + subsets: ['latin'], |
| 41 | +}) |
| 42 | + |
| 43 | +export default function Layout({ children }) { |
| 44 | + return ( |
| 45 | + <html className={geist.className}> |
| 46 | + <body>{children}</body> |
| 47 | + </html> |
| 48 | + ) |
| 49 | +} |
| 50 | +``` |
| 51 | + |
| 52 | +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](/docs/app/api-reference/file-conventions/layout#root-layout). |
| 53 | + |
| 54 | +## Polices Google |
| 55 | + |
| 56 | +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. |
| 57 | + |
| 58 | +Pour commencer à utiliser une police Google, importez la police de votre choix depuis `next/font/google` : |
| 59 | + |
| 60 | +```tsx filename="app/layout.tsx" switcher |
| 61 | +import { Geist } from 'next/font/google' |
| 62 | + |
| 63 | +const geist = Geist({ |
| 64 | + subsets: ['latin'], |
| 65 | +}) |
| 66 | + |
| 67 | +export default function RootLayout({ |
| 68 | + children, |
| 69 | +}: { |
| 70 | + children: React.ReactNode |
| 71 | +}) { |
| 72 | + return ( |
| 73 | + <html lang="en" className={geist.className}> |
| 74 | + <body>{children}</body> |
| 75 | + </html> |
| 76 | + ) |
| 77 | +} |
| 78 | +``` |
| 79 | + |
| 80 | +```jsx filename="app/layout.js" switcher |
| 81 | +import { Geist } from 'next/font/google' |
| 82 | + |
| 83 | +const geist = Geist({ |
| 84 | + subsets: ['latin'], |
| 85 | +}) |
| 86 | + |
| 87 | +export default function RootLayout({ children }) { |
| 88 | + return ( |
| 89 | + <html lang="en" className={geist.className}> |
| 90 | + <body>{children}</body> |
| 91 | + </html> |
| 92 | + ) |
| 93 | +} |
| 94 | +``` |
| 95 | + |
| 96 | +Nous recommandons d'utiliser des [polices variables](https://fonts.google.com/variablefonts) pour les meilleures performances et flexibilité. Mais si vous ne pouvez pas utiliser une police variable, vous devrez spécifier un poids : |
| 97 | + |
| 98 | +```tsx filename="app/layout.tsx" highlight={4} switcher |
| 99 | +import { Roboto } from 'next/font/google' |
| 100 | + |
| 101 | +const roboto = Roboto({ |
| 102 | + weight: '400', |
| 103 | + subsets: ['latin'], |
| 104 | +}) |
| 105 | + |
| 106 | +export default function RootLayout({ |
| 107 | + children, |
| 108 | +}: { |
| 109 | + children: React.ReactNode |
| 110 | +}) { |
| 111 | + return ( |
| 112 | + <html lang="en" className={roboto.className}> |
| 113 | + <body>{children}</body> |
| 114 | + </html> |
| 115 | + ) |
| 116 | +} |
| 117 | +``` |
| 118 | + |
| 119 | +```jsx filename="app/layout.js" highlight={4} switcher |
| 120 | +import { Roboto } from 'next/font/google' |
| 121 | + |
| 122 | +const roboto = Roboto({ |
| 123 | + weight: '400', |
| 124 | + subsets: ['latin'], |
| 125 | +}) |
| 126 | + |
| 127 | +export default function RootLayout({ children }) { |
| 128 | + return ( |
| 129 | + <html lang="en" className={roboto.className}> |
| 130 | + <body>{children}</body> |
| 131 | + </html> |
| 132 | + ) |
| 133 | +} |
| 134 | +``` |
| 135 | + |
| 136 | +## Polices locales |
| 137 | + |
| 138 | +Pour utiliser une police locale, importez votre police depuis `next/font/local` et spécifiez le [`src`](/docs/app/api-reference/components/font#src) de votre fichier de police locale. Les polices peuvent être stockées dans le dossier [`public`](/docs/app/api-reference/file-conventions/public-folder). Par exemple : |
| 139 | + |
| 140 | +```tsx filename="app/layout.tsx" switcher |
| 141 | +import localFont from 'next/font/local' |
| 142 | + |
| 143 | +const myFont = localFont({ |
| 144 | + src: './my-font.woff2', |
| 145 | +}) |
| 146 | + |
| 147 | +export default function RootLayout({ |
| 148 | + children, |
| 149 | +}: { |
| 150 | + children: React.ReactNode |
| 151 | +}) { |
| 152 | + return ( |
| 153 | + <html lang="en" className={myFont.className}> |
| 154 | + <body>{children}</body> |
| 155 | + </html> |
| 156 | + ) |
| 157 | +} |
| 158 | +``` |
| 159 | + |
| 160 | +```jsx filename="app/layout.js" switcher |
| 161 | +import localFont from 'next/font/local' |
| 162 | + |
| 163 | +const myFont = localFont({ |
| 164 | + src: './my-font.woff2', |
| 165 | +}) |
| 166 | + |
| 167 | +export default function RootLayout({ children }) { |
| 168 | + return ( |
| 169 | + <html lang="en" className={myFont.className}> |
| 170 | + <body>{children}</body> |
| 171 | + </html> |
| 172 | + ) |
| 173 | +} |
| 174 | +``` |
| 175 | + |
| 176 | +Si vous souhaitez utiliser plusieurs fichiers pour une même famille de polices, `src` peut être un tableau : |
| 177 | + |
| 178 | +```js |
| 179 | +const roboto = localFont({ |
| 180 | + src: [ |
| 181 | + { |
| 182 | + path: './Roboto-Regular.woff2', |
| 183 | + weight: '400', |
| 184 | + style: 'normal', |
| 185 | + }, |
| 186 | + { |
| 187 | + path: './Roboto-Italic.woff2', |
| 188 | + weight: '400', |
| 189 | + style: 'italic', |
| 190 | + }, |
| 191 | + { |
| 192 | + path: './Roboto-Bold.woff2', |
| 193 | + weight: '700', |
| 194 | + style: 'normal', |
| 195 | + }, |
| 196 | + { |
| 197 | + path: './Roboto-BoldItalic.woff2', |
| 198 | + weight: '700', |
| 199 | + style: 'italic', |
| 200 | + }, |
| 201 | + ], |
| 202 | +}) |
| 203 | +``` |
0 commit comments