Selbst gehostete Schriftarten
Wenn Sie die in Ihrer Webanwendung verwendeten Schriftarten bündeln möchten, dann ist Fontsource eine Bibliothek, die Sie sich vielleicht ansehen sollten (Link auch im Anhang am Ende der Seite). Sie können damit die Schriftarten installieren, die Sie verwenden möchten, was bedeutet, dass Ihre Schriftarten von Ihnen selbst gehostet werden und zum Laden kein CDN erforderlich ist.
Jede Schriftart installieren
Um die Schriftarten zu installieren, die Sie verwenden möchten, führen Sie einfach den Installationsbefehl für jede Variante aus. Die folgenden Codeausschnitte zeigen, wie die Schriftart für diese PWA installiert würde.
npm install @fontsource/work-sans
Im Einstiegspunkt meiner Anwendung muss ich dann das installierte Paket verbrauchen, indem ich es importiere. Dadurch kann ich genau definieren, was ich brauche, ohne zusätzlichen Overhead hinzuzufügen. Da Schriftarten ziemlich groß sein können, ist dies eine großartige Gelegenheit, Bytes zu sparen.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Schließlich muss ich die Schriftfamilie in meinem CSS festlegen. Je nach verwendeter Bibliothek (z. B. Tailwind.css) sieht dieser Code für Sie möglicherweise etwas anders aus.
body {
font-family: "Work Sans", sans-serif;
}
Variable Schriftarten
Fontsource bietet auch eine Option zum Installieren variabler Schriftarten, was bedeutet, dass Sie Zugriff auf die neuesten Tools haben, wenn es um das Laden von Schriftarten geht. Bitte beachten Sie, dass nicht alle Schriftarten als variable Varianten verfügbar sind.
