I caratteri Web sono un ottimo modo per aggiungere caratteri personalizzati al tuo sito web. Questi font potrebbero non essere disponibili sul sistema di un utente, quindi è necessario includerli nel progetto ospitandoli o facendovi riferimento tramite un CDN.
Scopri come includere i caratteri Web in un sito Web Next.js utilizzando questi due metodi.
Utilizzo di caratteri self-hosted in Next.js
Per aggiungere font self-hosted in Next.js, è necessario usa la regola CSS @font-face. Questa regola ti consente di aggiungere caratteri personalizzati a una pagina web.
Prima di utilizzare font-face, devi scaricare i caratteri che desideri utilizzare. Ci sono molti siti su Internet che offrono font gratuiti, inclusi i siti web di font, fontspace e dafont di Google.
Dopo aver scaricato i caratteri Web, convertili in diversi formati di carattere per supportare più browser. Puoi usare strumenti di conversione dei caratteri online gratuiti fare così. I browser Web moderni supportano i formati .woff e .woff2. Se è necessario supportare i browser legacy, è necessario fornire anche i formati .eot e .ttf.
Crea una nuova cartella chiamata caratteri nella directory del tuo sito e salva lì i file dei font convertiti.
Il passaggio successivo consiste nell'includere i caratteri nel file styles/global.css file per renderli disponibili a tutto il sito web. Questo esempio mostra i caratteri per il carattere sirena in grassetto:
@font-face {
famiglia di font: 'Sirena';
origine: URL('Mermaid-Bold.eot');
origine: URL('Mermaid-Bold.eot?#iefix') formato('tipo aperto incorporato'),
URL('Mermaid-Bold.woff2') formato('woff2'),
URL('Mermaid-Bold.woff') formato('wow'),
URL('Mermaid-Bold.ttf') formato('truetype');
font-weight: grassetto;
stile carattere: normale;
visualizzazione dei caratteri: scambia;
}
Dopo aver incluso i file dei caratteri, puoi utilizzare tali caratteri in un file CSS a livello di componente:
h1 {
famiglia di caratteri: sirena;
}Inclusione di Web Fonts in Next.js tramite un CDN
Alcuni siti web servono font web tramite un CDN che puoi importare nella tua app. Questo approccio è facile da configurare perché non è necessario scaricare font o creare caratteri. Inoltre, se utilizzi Google Fonts o TypeKit, Next.js gestisce automaticamente l'ottimizzazione.
Puoi aggiungere font da un CDN utilizzando il tag link o la regola @import all'interno di un file CSS.
Il tag link va sempre all'interno del tag head di un documento HTML. Per aggiungere un tag head in Next.js, devi creare un documento personalizzato. Questo documento modifica i tag head e body utilizzati per il rendering di ciascuna pagina.
Inizia a utilizzare questa funzione di documento personalizzato creando il file /pages/_document.js.
Quindi, includi il collegamento al carattere nell'intestazione del file _document.js.
importare Documento, { Html, Head, Main, NextScript } da "Prossimo/documento";
classeIl mio documentoestendeDocumento{
staticoasincrono getInitialProps (ctx) {
cost prop iniziale = aspetta Document.getInitialProps (ctx);
ritorno { ...initialProps };
}
rendere() {
ritorno (
<HTML>
<Testa>
<collegamento
href="https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&visualizzazione=scambio"
rel="foglio di stile"
/>
</Head>
<corpo>
<Principale />
<ProssimoScript />
</body>
</Html>
);
}
}
esportarepredefinito Il mio documento;Come utilizzare la regola @import per includere caratteri in un progetto Next.js
Un'altra opzione è utilizzare la regola @import nel file CSS in cui si desidera utilizzare il carattere.
Ad esempio, rendi disponibile il carattere nell'intero progetto importando il carattere Web nel file styles/global.css file.
@importazione URL('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&visualizzazione=scambio');
Ora puoi fare riferimento alla famiglia di caratteri in a Selettore CSS come questo:
h1 {
famiglia di font:'Display Caslon gratuito', grazie;
}La regola @import consente di importare un font in un file CSS contenuto. L'utilizzo del tag di collegamento rende il carattere accessibile in tutto il sito.
Dovresti ospitare i font localmente o importarli tramite un CDN?
I caratteri ospitati localmente sono generalmente più veloci dei caratteri importati da un CDN. Questo perché il browser non deve effettuare una richiesta aggiuntiva al font CDN una volta caricata la pagina web.
Se desideri utilizzare caratteri importati, precaricali per migliorare le prestazioni del sito. Se i caratteri sono disponibili su Google Fonts o Typekit, puoi importarli e sfruttare le funzionalità di ottimizzazione di Next.js.
