Font auto-hosting
Se vuoi raggruppare i caratteri utilizzati nella tua applicazione web, Fontsource è una libreria a cui potresti voler dare un'occhiata (link anche nell'addendum alla fine della pagina). Ti consente di installare i caratteri che desideri consumare, il che significa che i tuoi caratteri sono ospitati da te e non richiedono un CDN per il caricamento.
Installazione di ogni carattere
Per installare i caratteri che desideri utilizzare, esegui semplicemente il comando di installazione per ciascuna variante. I frammenti di codice seguenti mostrano come verrebbe installato il carattere per questa PWA.
npm install @fontsource/work-sans
Nel punto di ingresso della mia applicazione, devo quindi consumare il pacchetto installato importandolo. Ciò mi consente di definire con precisione ciò di cui ho bisogno senza aggiungere alcun sovraccarico. Poiché i caratteri possono essere di dimensioni piuttosto grandi, questa è una grande opportunità per salvare i byte.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Infine, ho bisogno di impostare la famiglia di caratteri nel mio CSS. A seconda della libreria in uso (ad esempio Tailwind.css), questo codice potrebbe avere un aspetto leggermente diverso per te.
body {
font-family: "Work Sans", sans-serif;
}
Caratteri variabili
Fontsource fornisce anche un'opzione per installare i caratteri variabili, il che significa che hai accesso agli strumenti più recenti quando si tratta di caricare i caratteri. Tieni presente che non tutti i caratteri sono disponibili come varianti variabili.
