Famiglie di caratteri personalizzate

Tailwind offre tre utility predefinite per le famiglie di caratteri: font-sans, font-serif e font-mono. Ognuna corrisponde a una combinazione di caratteri di sistema scelta con cura, che garantisce un buon risultato su tutti i sistemi operativi senza richiedere il download di font. Nella maggior parte dei progetti vorrà sostituirle o integrarle con un carattere web associato al brand, che conferisca al progetto un'identità tipografica distintiva.

Google Fonts è la fonte più comune di caratteri web gratuiti. Visiti fonts.google.com e scelga un carattere adatto al Suo brand. Tra le scelte più diffuse per i progetti di interfacce utente ci sono Inter per interfacce moderne e lineari, Geist per prodotti tecnici, Playfair Display per un'eleganza editoriale e JetBrains Mono per gli editor di codice. Scelga solo i pesi che utilizzerà effettivamente (il normale 400 e il semigrassetto 600 coprono la maggior parte dei casi).

Dopo aver caricato il carattere tramite un tag <link> o un @import CSS, lo registri in tailwind.config.js sotto theme.extend.fontFamily. Inserisca come primo elemento dell'array della combinazione il nome del carattere esattamente come appare in Google Fonts, inclusi gli spazi, se presenti. Includa sempre caratteri di fallback: caratteri di sistema da utilizzare come alternativa nel caso in cui il carattere web non venga caricato.

Una volta registrata la famiglia, utilizzi la classe utility font-{key} per applicarla. Se ha esteso sans, font-sans farà ora riferimento al carattere scelto. Se ha aggiunto una nuova chiave come display, la classe utility sarà font-display. Applichi la famiglia di caratteri al livello più alto possibile nella gerarchia degli antenati, così da ereditarla ovunque, quindi sovrascriva l'impostazione nelle sezioni specifiche secondo necessità.

Per impostare il carattere scelto come predefinito ovunque senza aggiungere font-sans a ogni elemento, sovrascriva theme.fontFamily.sans (al di fuori di extend) per sostituire completamente la combinazione predefinita. Applichi quindi font-sans una sola volta all'elemento body: tutto il testo che eredita lo stile da body utilizzerà il carattere personalizzato senza ulteriori nomi di classe.

Nei progetti Next.js utilizzi il modulo next/font invece dei link CDN di Google Fonts. Il modulo scarica i caratteri durante la compilazione, li distribuisce dal Suo dominio, elimina le richieste esterne e previene gli spostamenti del layout regolando automaticamente le dimensioni dei caratteri. Generi il nome della variabile CSS e lo passi alla configurazione di Tailwind utilizzando quella variabile, creando una stretta integrazione tra l'ottimizzazione dei caratteri di Next.js e Tailwind.

Quando utilizza caratteri acquistati o personalizzati, li ospiti localmente e li definisca con una regola CSS @font-face. Inserisca i file dei caratteri nella directory pubblica e vi faccia riferimento tramite percorsi assoluti. Utilizzi font-display: swap per mostrare immediatamente i caratteri di fallback mentre viene caricato quello personalizzato, evitando che il testo risulti invisibile durante il caricamento. Registri quindi la famiglia di caratteri nella configurazione di Tailwind come di consueto.

Dopo aver impostato la famiglia di caratteri, ne controlli il peso con le utility font-{weight} di Tailwind. Tra i pesi più comuni ci sono font-normal (400), font-medium (500), font-semibold (600) e font-bold (700). Si assicuri di caricare da Google Fonts i pesi specifici che intende utilizzare: se richiede un peso non caricato, il browser lo sintetizza, producendo testo di qualità inferiore.

I caratteri variabili contengono tutti i pesi (e talvolta anche larghezze e corsivi) in un unico file, riducendo le richieste HTTP e supportando al contempo l'intero intervallo di pesi. Carichi una volta il carattere variabile e utilizzi qualsiasi utility font-weight di Tailwind senza preoccuparsi che quel peso specifico sia stato richiesto. Molti caratteri moderni di Google Fonts offrono ormai versioni variabili: cerchi la sintassi dell'asse ital,wght@ nell'URL.

Tailwind offre le utility antialiased e subpixel-antialiased, che controllano il rendering dei caratteri sullo schermo. Applichi globalmente antialiased all'elemento body per attivare l'anti-aliasing in scala di grigi, che rende i caratteri web moderni più nitidi e sottili sui display ad alta densità di pixel. Nella maggior parte dei progetti Tailwind, antialiased viene aggiunto come stile di base insieme alla dichiarazione della famiglia di caratteri.

Verifichi che i caratteri personalizzati vengano caricati correttamente aprendo gli Strumenti per sviluppatori di Chrome, accedendo alla scheda Network e filtrando per Font. Dovrebbe visualizzare nell'elenco i file dei caratteri. Nel pannello Elements, selezioni un nodo di testo e controlli la scheda Computed: la proprietà font-family dovrebbe mostrare il nome del carattere personalizzato come carattere effettivamente utilizzato, non quello di fallback. Esegua i test con diverse dimensioni della viewport e velocità di connessione, per individuare eventuali problemi di caricamento.

In questa lezione ha imparato a: registrare caratteri personalizzati in theme.extend.fontFamily come array con caratteri di fallback; caricare Google Fonts tramite un tag CDN <link> oppure utilizzare next/font per un caricamento ottimizzato in Next.js; e applicare globalmente antialiased per un rendering nitido dei caratteri. Ora aggiungeremo valori di spaziatura personalizzati per colmare le lacune nella scala predefinita di Tailwind.