🔤Font Optimization

Optimisation des Fonts

next/font pour des polices performantes

Démo des Fonts Google

Inter Font

The quick brown fox jumps over the lazy dog

Roboto Font

The quick brown fox jumps over the lazy dog

Poppins Font

The quick brown fox jumps over the lazy dog

Montserrat Font

The quick brown fox jumps over the lazy dog

Comment l'utiliser

1. Importer la font Google

// app/layout.js
import { Inter } from 'next/font/google'

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

2. Appliquer dans le layout

export default function RootLayout({ children }) {
  return (
    <html className={inter.className}>
      <body>{children}</body>
    </html>
  )
}

3. Utiliser plusieurs fonts

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

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

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

// Dans le HTML
<html className={`${inter.variable} ${roboto.variable}`}>
  <body>
    <h1 className="font-sans">Titre en Inter</h1>
    <p className="font-roboto">Texte en Roboto</p>
  </body>
</html>

4. Font locale (custom)

import localFont from 'next/font/local'

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

Comparaison

❌ Sans next/font

<link 
  href="https://fonts.googleapis.com..."
  rel="stylesheet"
/>

• Requête externe à Google
• FOUT (Flash of Unstyled Text)
• Layout shift possible
• Pas de préchargement

✅ Avec next/font

import { Inter } from 'next/font/google'
const inter = Inter({ ... })

• Self-hosting automatique
• Zéro layout shift
• Préchargement optimisé
• CSS optimisé

Avantages

✓

Self-hosting automatique

Les fonts sont téléchargées au build et servies depuis votre domaine

✓

Zéro layout shift

Élimination complète du FOUT et FOIT

✓

Performance optimale

Préchargement, subset automatique, CSS optimisé

✓

Privacy

Pas de requête à des serveurs tiers (Google Fonts)

💡 Bonnes Pratiques

•Utiliser display: 'swap' pour éviter le blocage
•Charger uniquement les weights nécessaires
•Spécifier les subsets (latin, latin-ext, etc.)
•Utiliser des variables CSS pour faciliter la réutilisation
•Limiter le nombre de fonts différentes (2-3 maximum)