目次
Astro.jsでWebフォント(NotoSansJP)を使ってみたのでメモ。
WEBフォントの追加方法
Astroには、Webフォントを追加するための3つの方法があります。
- CDNを使用する
- ローカルフォントを使用する
- Fontsourceを使用する
以下の表に、各方法のメリットとデメリットをまとめました。
| 方法 | メリット | デメリット |
|---|---|---|
| CDN | - 簡単に導入できる - キャッシュ効果で読み込みが早い |
- 外部依存のため、接続が不安定な場合がある - プライバシーに懸念がある場合がある |
| ローカル | - 外部依存なしで安定した表示 - プライバシー保護 |
- フォントファイルの管理が必要 - 初回読み込みが遅くなる可能性がある |
| Fontsource | - 簡単に管理できる - 必要なフォントだけを選択可能 |
- npmパッケージのインストールが必要 - プロジェクトのサイズが増加する可能性がある |
基本的には、Fontsourceを使用する方法がおすすめです。
理由は以下の通りです。
- 簡単な管理: Fontsourceを使用すると、必要なフォントだけを選択してインストールできるため、プロジェクトが軽量になります。
- 安定性: ローカルにフォントを持つことで、外部依存がなく、常に同じフォントが表示されます。
- カスタマイズ性: フォントのスタイルやウェイトを細かく制御できるため、デザインの自由度が高まります。
Fontsourceにないフォントを使用する場合以外は、Fontsourceを使用することをおすすめします。
方法3: Fontsourceを使用する
最後に、Fontsourceを使用する方法です。Fontsourceを利用すると、簡単にWebフォントを管理できます。以下の手順でNoto Sansをインストールします。
Fontsourceをインストール
Fontsourceのサイトにアクセスして検索欄に"noto sans"と入力します。
下に検索結果が出てくるのでNoto Sans JPをクリックします。
右上の「Install」タブをクリックします。
すると利用手順が書かれているので、それに従ってインストールします。
Noto Sans JPをインストールする場合の手順は下記です。
pnpm add @fontsource-variable/noto-sans-jp
フォントを使用する
使用したいコンポーネントでフォントをインポートします。
私は全てに適用したかったので共通のレイアウトコンポーネントとglobal.cssに追加しました。
---
import '@fontsource-variable/noto-sans-jp';
---
body {
font-family: 'Noto Sans JP Variable', sans-serif;
}
Tailwind CSSを使用している場合
Tailwind CSSを使用している場合は、global.cssの@themeにフォントを追加します。
@theme {
--font-sans: 'Noto Sans JP Variables', 'sans-serif';
}
ローカルフォントを使用する
Fontsourceに使いたいフォントがない場合は、ローカルフォントを使用しましょう。
フォントファイルのダウンロード
フォントファイルをダウンロードします。
Noto Sans JPを使用する場合の手順を説明します。
- Google Fontsにアクセスします。
- 検索バーに"Noto Sans"と入力します。
- フォントファミリーを選択し、"Select this style"をクリックします。
- "Customize"をクリックして、必要なスタイルを選択します。
- "Download"をクリックして、フォントファイルをダウンロードします。
速度を考慮したフォントの選択
フォントファイルには形式があるため、速度が遅くなる可能性があります。
- WOFF2: 圧縮されたWebフォントファイル。最も速度が速い。
- WOFF: Webフォントファイル。速度が速い。
- TTF: TrueTypeフォントファイル。速度が遅い。
他にも形式がありますが、よく使われるのは上記の3つです。
WOFF2形式のフォントファイルを使用することをお勧めします。
NotoSansJPのWOFF2形式のフォントファイルは、以下のリンクからダウンロードできます。
フォントファイルの配置
プロジェクトのpublic/fonts/ディレクトリに保存します。
例えば、NotoSansJP-Regular.woff2とNotoSansJP-Bold.woff2を用意します。
public/
└── fonts/
├── NotoSansJG-Regular.woff2
└── NotoSans-Bold.woff2
次に、CSSで@font-faceを使用してフォントを登録します。
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Regular.woff2') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Noto Sans JP';
src: url('/fonts/NotoSansJP-Bold.woff2') format('woff');
font-weight: bold;
font-style: normal;
}
これで、Noto Sansフォントを使用する準備が整いました。
フォントを使用する
例えば、全てのページでNoto Sans JPを使用したい場合は、global.cssのbodyにフォントを適用します。
body {
font-family: 'Noto Sans JP', sans-serif;
}
Tailwind CSSを使用している場合
Tailwind CSSを使用している場合は、global.cssの@themeにフォントを追加します。
@theme {
--font-sans: 'Noto Sans JP', 'sans-serif';
}
