カスタムフォントをインストールする

astro.jsでGoogleFontsを利用するための手順になります。

Fontsourceを利用することで、簡単にGoogle Fontsやその他のオープンソースのフォントを使用できます。使用したいフォントをnpmモジュールとしてインストールできます。

Fontsourceで、利用したいフォントを選択の上、画面右上のInstallボタンを押します。　　 ダウンロード用のコマンドと、利用方法が表示されるので実行します。

例

Installation

npm install @fontsource-variable/oswald

Import

// Supports weights 200-700
import '@fontsource-variable/oswald';

CSS

body {
  font-family: 'Oswald Variable', sans-serif;
}