セルフホスティングフォント
Webアプリケーションで使用されるフォントをバンドルする場合は、Fontsourceを参照してください（ページの最後にある補遺のリンクも参照してください）。使用したいフォントをインストールできます。つまり、フォントは自分でホストされており、ロードするのにCDNは必要ありません。
各フォントのインストール
使用するフォントをインストールするには、バリアントごとにinstall-commandを実行するだけです。次のコードスニペットは、このPWAのフォントがどのようにインストールされるかを示しています。
npm install @fontsource/work-sans
次に、アプリケーションのエントリポイントで、インストールされたパッケージをインポートして使用する必要があります。これにより、オーバーヘッドを追加することなく、必要なものを正確に定義できます。フォントのサイズは非常に大きくなる可能性があるため、これはバイトを節約する絶好の機会です。
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
最後に、CSSでフォントファミリを設定する必要があります。使用しているライブラリ（Tailwind.cssなど）によっては、このコードの外観が少し異なる場合があります。
body {
font-family: "Work Sans", sans-serif;
}
可変フォント
Fontsourceには、可変フォントをインストールするオプションもあります。つまり、フォントの読み込みに関しては、最新のツールにアクセスできます。すべてのフォントが可変バリアントとして使用できるわけではないことに注意してください。
