Astro 6.0で使えるようになった Build-in Fonts API を導入した

Astro 6.0にアップデートしました。それに伴い、 Build-in Fonts API を導入したので、その導入ログを残しておきます。

Build-in Fonts API とは

Using custom fonts

Looking to add some custom typefaces to an Astro website? Use Google Fonts with Fontsource or add a font of your choice.

docs.astro.build

Astro 6.0 で導入された機能で、ローカルにあるフォントファイルやWebフォントを簡単に利用できるようになるAPIです。これまでは、フォントファイルをローカルサーバーから配信していましたが、これを機にWebフォントを利用することにしました。

導入の流れ

1. astro.config.mjs に fonts を追加する

今回はGoogle Fontsから BIZ UDPGothicを利用することにしました。そのため、fontProviders.google()を指定しています。この他にも以下から選ぶことができます。

• Adobe
• Bunny
• Fontshare
• Fontsource
• Google
• Google Icons
• Local
• NPM

# astro.config.mjs
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";

 export default defineConfig({
   site: "https://koxya.me/",
   integrations: [mdx(), sitemap(), react()],
+  fonts: [
+    {
+      name: "BIZ UDGothic",
+      cssVariable: "--font-biz-udp-gothic",
+      provider: fontProviders.google(),
+    },
+  ],
 });

2. CSS で cssVariable を指定する

これまでheadタグに直接ローカルフォントファイルのパスを指定していたのを止め、先程作成したcssVariableを利用するように変更しました。

# src/components/BaseHead.astro
+import { Font } from "astro:assets";

<!-- Font preloads -->
-<link rel="preload" href="/fonts/atkinson-regular.woff" as="font" type="font/woff" crossorigin />
-<link rel="preload" href="/fonts/atkinson-bold.woff" as="font" type="font/woff" crossorigin />
+<Font cssVariable="--font-atkinson" preload />

また、CSSでも同様に、font-familyでcssVariableのvar(--font-biz-udp-gothic) に変更しました。

# src/styles/global.css
-@font-face {
-    font-family: "Atkinson";
-    src: url("/fonts/atkinson-regular.woff") format("woff");
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-}
-@font-face {
-    font-family: "Atkinson";
-    src: url("/fonts/atkinson-bold.woff") format("woff");
-    font-weight: 700;
-    font-style: normal;
-    font-display: swap;
-}
 body {
-    font-family: "Atkinson", sans-serif;
+    font-family: var(--font-atkinson), sans-serif;
     margin: 0;
     padding: 0;
     text-align: left;

これでAstroでフォントのheadタグ追加やキャッシュなどを良しなにやってくれます。個人ブログなのでそこまでパフォーマンスのことは気にせず和文Webフォントを利用しています。 消したコードの方が多くて嬉しいです。