サイトのフォント設定をシンプルにした

2025-09-08 Font, Performance

サイト構築時

最初は学習を兼ねてWebフォントBIZ UDGothic - Google Fontsopen_in_newを使用していた。このフォントは見やすさと読みやすさが意識されたユニバーサルフォントで、実際に使ってみても非常に見やすいと感じていた。また、unicode-rangeが指定されて分割されたフォントファイルがダウンロードされる仕組みになっていた。サイトにはFontsourceopen_in_newを利用してnpmパッケージとして追加した。

また、いくつかのMaterial Symbolsアイコンも使用していたため、そのCSSをドキュメント通りにBaseLayoutで読み込んでいた。

Webフォントを使わない判断に至るまで

Material SymbolsもFontsourceから利用できることに気づいたので変更してみた。 Chrome Dev ToolsのNetworkタブでデータ量を計測していたところ、 Material SymbolsよりもBIZ UDGothicの方が断然データ量が多いことに気づいた。（日本語のフォントがデータ量大きいのは知ってたので今更感あったが…）この時点で、Webフォントの使用をやめることがパフォーマンス改善の近道だと感じ始めた。

また途中で気付いたが、サイト構築時はMaterial Symbolsのアイコン名を具体的に指定していなかったため、全てのアイコンを含んだフォントファイルがダウンロードされていた。（補足: それでもなお、BIZ UDGothicの方がサイズが大きかった）公式の利用方法ではクエリパラメータで利用するアイコン名を指定できるが、Fontsource経由だとそれができなそうだった。

試行錯誤の一環として、AstroのExperimental fonts APIopen_in_newも試してみた。手元での検証では、フォントのダウンロード回数は減ったものの、（1つの？）ファイルにまとまったことで逆にサイズが大きくなってしまった。これは設定ミスか、キャッシュ戦略に基づく最適化の結果かもしれないが、深く追求はしなかった。

最終的な着地点

最終的に、システムフォントに頼る方針に変更した。2025年に最適なfont-familyの書き方 - ICS MEDIAopen_in_newの記事を参考に、以下のような設定にした。

(global.css)

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme {
  --font-default:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
    Meiryo, sans-serif;
}

Material Symbolsについては、使用するアイコン名を明示的に列挙し、URLSearchParamsでクエリパラメータを作成した。

ちなみに、実際に組み立てたURLにアクセスしてみるとバリデーションエラーの詳細が確認できる。アイコン名はアルファベット順にソートされている必要があり、重複も許可されていなかった。そのため、重複を防ぐためにSetを利用している（使用アイコン数が少ないので失敗の可能性は低いが、念のための対策）。

（src/constants/iconName.ts）

// NOTE: icon names must be sorted alphabetically
const iconNames = ["calendar_today", "open_in_new", "tag"] as const;
// icon names must be unique
export const iconNameSet = new Set(iconNames);

export type IconName = (typeof iconNames)[number];

(src/layouts/BaseLayout.astro から抜粋)

const iconNameParams = new URLSearchParams({
  family: "Material Symbols Outlined",
  icon_names: Array.from(iconNameSet).join(","),
  display: "block",
});

さいごに

このサイトではWebフォントを利用しないこととしたが、 Fontsourceを経由してnpmパッケージとしてフォントを管理できるのは便利だった。特にモバイル向けにも提供しているサイトではリクエストのオーバーヘッドが減るのもいいことそう。 FontsourceやMaterial Symbolsの学びは得られたので、どこかで活かせたらと思う。