Astroでローカルフォントを使うときは一手間加えよう！
Astroの公式ドキュメントにはローカルフォントを使うときは以下のCSSだけが方法として書かれています
@font-face {
font-family: 'DistantGalaxy';
src: url('/fonts/DistantGalaxy.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
これだけでも十分なのですが、ここで一手間加えるともっと良くなります
すること
レイアウトを書いている .astro ファイルの head 部分に以下のタグを書き足します
<link rel="preload" as="font" type="font/woff2" href=[path] crossorigin="anonymous" />
[path] の部分は @font-face の src と同じものを入力してください
フォントは必ず public フォルダ内に置いてください、それ以外の場所に置くと正常に動きません
具体例
サンセリフに Inter を、等幅フォントに JetBrains Mono を使う場合
ファイル構造
/public
/fonts
InterVariable.woff2
JetBrainsMono.woff2
/src
/style
app.css
/pages
index.astro
app.css
@font-face {
font-family: "Inter";
src: url("/fonts/InterVariable.woff2");
}
@font-face {
font-family: "JetBrains Mono";
src: url("/fonts/JetBrainsMono.woff2");
}
body {
font-family: "Inter", sans-serif;
}
code {
font-family: "JetBrains Mono", monospace;
}
index.astro
---
import '../style/app.css'
---
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="preload" as="font" type="font/woff2" href="/fonts/InterVariable.woff2" crossorigin="anonymous" />
<link rel="preload" as="font" type="font/woff2" href="/fonts/JetBrainsMono.woff2" crossorigin="anonymous" />
<title>フォント</title>
</head>
<body class="antialiased px-5 py-4">
<p>サンセリフに Inter を</p>
<p>等幅フォントに <code>JetBrains Mono</code> を</p>
</body>
</html>
結果
どんな良いことがあるのか
目に見える変化は少ないです
WebサイトはほとんどがHTMLファイルの読み込みから始まります
CSSファイルしかフォントに関する情報が書かれてないと、HTMLを読み込んだあとにさらにCSSを読み込まれるまでフォントも読み込まれません
そこで、HTMLにフォントに関することを書いておいて、一緒にプリロードすることでフォントがより早く読み込まれて、初回アクセス時の動作がいい感じになります
また、最初の読み込み時に全てのフォントがまとめてキャッシュされるため、等幅フォントが最初にアクセスされたページで使われてなくても、別のページを開くときにフォントの表示がスムーズになります
私はDevtoolsを見るのが趣味なのですが、ソースとネットワークがこのようにいい感じになります
ソース
ソース
ここはどっちの場合でも同じです
ちなみに _astro というフォルダ名は変更することが出来ます
例えばCloudflareは _willow という誰かの名前みたいな単語になってます
ネットワーク
CSSのみの場合です
ネットワーク、CSSのみ
HTMLを読み込んだあとに、CSSを読み込み、そのときにフォントを読み込むので時間もかかってしまいます（フォント自体が少し重いので結局変わらないかもしれない）
ネットワーク
いいね！
ローカルサーバーで動かしてる関係でそもそもの速度が早すぎるので違いはあまりわかりませんが、それでも1.5倍くらい早くなりました！
ちなみにこれはNextjsのフォント最適化でも行われています
ネットワーク、Nextjs
Nextjsは動作もソースもお洒落です
終わり
ここまで書いてみて、別にやらなくてもいいんじゃないかと思うくらいしょぼく見えてきましたが、それでもタグをひとつふたつ追加するだけで、成果に見合うくらい簡単に出来ることなので、Astroでローカルフォントを使ってフォントにこだわりたいなと思っている方はぜひ試してみてください！
Discussion