管理画面からサイト全体のフォントを切り替えられるようにした

何を作ったか

管理画面の「フォント設定」ページから、arismmn.pages.dev 全体のフォントをワンクリックで変更できる機能を追加した。

できること

5種類のフォントをカード形式で選択できる
カードに実際のフォントでサンプルテキストが表示されるので、見た目を比較しながら選べる
保存するとサイト全体（公開ページ12ページ）に即時反映される

選べるフォント

キー	フォント名	特徴
`noto-sans-jp`	Noto Sans JP	Googleが作った定番。可読性が高くクセがない（デフォルト）
`zen-kaku-gothic-antique`	Zen Kaku Gothic Antique	アンティーク調のゴシック体
`biz-udpgothic`	BIZ UDPGothic	ユニバーサルデザイン採用のビジネス向けゴシック
`zen-kaku-gothic-new`	Zen Kaku Gothic New	モダンでスッキリしたゴシック体
`kosugi`	Kosugi	シンプルで細めのゴシック体

技術的な実装

仕組みの全体像

管理画面で選択 → site_settings テーブルに site_font キーで保存
                    ↓
各公開ページが loadConfig() で読み込む
                    ↓
SiteFont.astro コンポーネントが <head> に挿入される
- Google Fonts の <link> タグを出力
- CSS カスタムプロパティ --font-body を設定
                    ↓
各ページの body { font-family: var(--font-body) } に反映

新規ファイル

src/lib/fonts.ts — フォント定義を一元管理するファイル。フォントキー・ラベル・Google Fonts URL・CSS font-family を持つ。新しいフォントを追加したい場合はここに追記するだけでよい。

src/components/SiteFont.astro — fontKey を受け取り、Google Fonts の <link> タグと CSS カスタムプロパティを <head> に出力するコンポーネント。

src/pages/admin/font.astro — フォント選択UI。管理画面から操作する画面。

CSS 変数による設計

以前は各ページで個別にフォントを body { font-family: 'XXX' } と直書きしていた。今回の改修でこれを var(--font-body) に統一した。

/* 以前（ページごとにバラバラ） */
body { font-family: 'Noto Sans JP', sans-serif; }   /* index.astro */
body { font-family: 'Zen Kaku Gothic New', sans-serif; } /* devblog */

/* 改修後（共通変数参照） */
:root { --font-body: 'Noto Sans JP', -apple-system, sans-serif; } /* SiteFont.astro が設定 */
body  { font-family: var(--font-body); }  /* 各ページ */

セキュリティ

フォントキーは FONTS 配列のキーのみ許可するホワイトリストバリデーションを実装している。任意の文字列が site_settings に書き込まれるリスクを排除している。

const validKeys = FONTS.map(f => f.key);
const siteFontKey = validKeys.includes(fontKeyRaw) ? fontKeyRaw : DEFAULT_FONT_KEY;

対象ページ

公開されているSSRページ12ページにSiteFontコンポーネントを適用した。

prerender: true（静的ビルド）の devblog/category/[category].astro はDBへのアクセスができないため対象外となっている。