Bondel lettertipes in jou webtoepassing

Hoe Fontsource lettertipes verskaf om saam met jou toepassing te stuur

Self-gasheer lettertipes

As jy die lettertipes wat in jou webtoepassing gebruik word, wil saambind, dan is Fontsource 'n biblioteek waarna jy dalk wil kyk (skakel ook in addendum aan die einde van die bladsy). Dit laat jou toe om die lettertipes te installeer wat jy wil verbruik, wat beteken dat jou lettertipes deur jouself gehuisves word en nie 'n CDN benodig om te laai nie.

Installeer elke font

Om die lettertipes wat jy wil gebruik te installeer, voer eenvoudig die install-opdrag vir elke variant uit. Die volgende kodebrokkies wys hoe die lettertipe vir hierdie PWA geïnstalleer sou word.

npm install @fontsource/work-sans

In die toegangspunt van my toepassing moet ek dan die geïnstalleerde pakket verbruik deur dit in te voer. Dit stel my in staat om presies te definieer wat ek nodig het sonder om enige oorhoofse by te voeg. Aangesien lettertipes redelik groot kan wees, is dit 'n wonderlike geleentheid om Bytes te stoor.

import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";

Ten slotte moet ek die lettertipe-familie in my CSS stel. Afhangende van die biblioteek wat jy gebruik (byvoorbeeld Tailwind.css), kan hierdie kode vir jou 'n bietjie anders lyk.

body {
  font-family: "Work Sans", sans-serif;
}

Veranderlike lettertipes

Fontsource bied ook 'n opsie om veranderlike lettertipes te installeer, wat beteken dat jy toegang het tot die nuutste gereedskap wanneer dit kom by die laai van lettertipes. Neem asseblief kennis dat nie alle lettertipes as veranderlike variante beskikbaar is nie.