Astroでのフォントの設定方法

Astroにはカスタムフォントの設定方法が2通りあります。

• Fontsourceを使用する
• フォントを自分でDLする

Fontsourceを使用すると手っ取り早いのですが、Fontsourceで扱っていないフォントを使用する際は自分でフォントをDLする必要があります。

※IBMPlexSansJPはFontsourceに存在しますが、より高速な読み取りを期待し、今回は自分でフォントをDLする方法で設定していきます。

DL方法

使用したいフォントがあれば「フォント名　woff2」などと検索します。

今回は以下のURLからIBM PlexSansJPをDLしていきます。

GitHub IBM/Plex

拡張子について

.otf、.ttf、.woff、.woff2などがありますが、特にこだわりがなければ.woff2を選んでおけば良いと思います。

以下の記事に詳しく書かれていました。

フォント拡張子によって何が違う？どれをインストールすべき？

フォントヒンティング

.woff2内にはhintedとunhintedの2種類がありますが、こちらはhintedを選んでおけば良いでしょう。

ヒンティング処理の有無の違いのようです。

Wikipedia フォントヒンティング

ThinからBoldまでありますが、使用する太さのものをDLします。

具体的な設定方法

目当てのフォントをDLしたら、publicディレクトリにfontsディレクトリを作成し、そこにDLした.woff2形式のフォントファイルを配置します。

次にCSSファイルで以下のように設定をします。

複数のウエイトをDLした場合はfont-familyの名前を変えるのではなくfont-weightをそれぞれ数値で設定することで使いやすくなります。

@font-face {
  font-family: 'MonaspaceArgon';
  src: url('/fonts/MonaspaceArgon-Light.woff') format('woff');
  font-weight: 300;
}

@font-face {
  font-family: 'MonaspaceArgon';
  src: url('/fonts/MonaspaceArgon-Regular.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'MonaspaceArgon';
  src: url('/fonts/MonaspaceArgon-SemiBold.woff') format('woff');
  font-weight: 500;
}

設定を終えたら使用するページ内で呼び出します。

---
@import "src/styles/<ファイル名>.css"
---

<p>Hello World!</p>

<style>
  p {
    font-family: 'MonaspaceArgon';
    font-weight: 400;
  }
</style>

都度呼び出しするのが面倒な場合はastro.config.mjsで以下のように設定します。

import { defineConfig } from 'astro/config';

// https://astro.build/config
export default defineConfig({
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "src/styles/font.scss";`
        }
      }
    }
  },
});

もしくはlayoutファイルで読み込むなどしても良いと思います。

まとめ

Fontsourceで設定するのは本当に手間がかからず楽だったのですが、Fontsourceで扱っていないフォントを使いたい場合、管理場所がバラバラになってしまうのが嫌だったので、一度Fontsourceのデータを破棄し、使用フォントは自分でDLしてfontsディレクトリで一括管理することにしました。

これで今後どんなフォントが増えてもぐちゃぐちゃにならずに済むので、今のうちに設定し直して良かったと思います。