Spostiamo ora l'attenzione sui font da utilizzare nell'applicazione.

I font dell'applicazione vengono ottimizzati automaticamente quando utilizziamo il modulo next/font con Next.js. I file dei font vengono scaricati durante la fase di build e ospitati insieme agli altri asset statici. Di conseguenza, quando un utente visita l'applicazione, non vengono effettuate ulteriori richieste di rete per i font, contribuendo così a migliorare le prestazioni.

Ritorno al progetto

Aggiungiamo il font personalizzato Poppins di Google per la nostra applicazione.

1. Creare un nuovo file chiamato fonts.ts all'interno della cartella app/ui;
2. Importare il font Poppins dal modulo next/font/google;
3. Specificare anche il weight e i subsets del font.

Siamo pronti a utilizzare il font Poppins nell'applicazione. Applichiamolo all'elemento body nel file app/layout.tsx.

Di conseguenza, l'intera applicazione utilizza il font Poppins.

Nel prossimo capitolo, includeremo font aggiuntivi.

In pratica