Summary  
This chapter explains how to import and configure a custom Google Font using a font-module API—specifying weights and subsets—and have it automatically optimized and bundled at build time. It then shows applying the generated font class to the root layout so the font is used across the entire application.

General domain of usage  
Web development (frontend styling)

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.

Impara a creare applicazioni web moderne e ad alte prestazioni utilizzando Next.js. Configura progetti con layout strutturati, stile e routing per una navigazione fluida. Recupera e visualizza dati in modo efficiente ottimizzando il rendering e le prestazioni. Implementa funzionalità avanzate come paginazione, operazioni CRUD e ricerca globale per applicazioni web dinamiche. Distribuisci i tuoi progetti Next.js, collegali a database e aggiungi l'autenticazione per proteggere i dati degli utenti.

Discutiamo le conoscenze necessarie prima di approfondire il framework Next.js, cosa aspettarsi da questo corso e cosa realizzerai.

Imposteremo il progetto, esamineremo i metodi per aggiungere lo stile alla nostra applicazione e tratteremo aspetti visivi come immagini, font, pagine e layout.

Scopri come creare e gestire facilmente una nuova vista per la tua applicazione e navigare tra tutte le pagine senza interruzioni grazie a un sistema di routing integrato.

Distribuire l'app Next.js utilizzando account GitHub e Vercel. Inoltre, configurare un database per fornire all'app i dati necessari.

Considerare come ottenere e mostrare i dati all'utente in modo chiaro ed efficiente.

Scopri come implementare funzionalità web moderne come paginazione, operazioni CRUD, ricerca globale, validazione dei moduli e altro ancora.

Implementazione dell'autenticazione in Next.js.

Aggiunta di Font Google Personalizzati

Ritorno al progetto

In pratica

Aggiunta di Font Google Personalizzati

Ritorno al progetto

In pratica