このサイトは4つのGoogle Fontsを組み合わせています。書体を増やすほど統一感を保つのが難しくなるので、それぞれに明確な役割を与えて使い分けています。
<link
href="https://fonts.googleapis.com/css2?family=Marcellus&family=Zen+Kaku+Gothic+New:wght@400;500;700&family=Zen+Old+Mincho:wght@400;600&family=DotGothic16&display=swap"
rel="stylesheet"
/>本文は Zen Kaku Gothic New に一本化
日本語の本文・説明文はすべて Zen Kaku Gothic New（角ゴシック）です。ウェイトは 400/500/700 の3段階のみに絞り、本文・強調・見出しの3役をこのウェイト差だけで表現しています。可読性が最優先になる領域はここに集約し、装飾的な判断を持ち込まないようにしています。
見出しの「英語部分」だけ Marcellus
セクション見出しの英語表記（About Skills Career など）には、クラシックな欧文セリフ体の Marcellus を当てています。日本語見出しと英語見出しを同じゴシックで揃えることもできますが、あえて欧文だけ書体を変えることで、「見出しの中に、和文とは違う格式のレイヤーがある」という視覚的な区切りを作っています。
世界観の演出だけに Zen Old Mincho
Zen Old Mincho（明朝体）は本文には使わず、ファンタジー色を出したい一部の装飾的なテキストにのみ絞って使用しています。明朝体は角ゴシックより情報密度の高い長文には不向きですが、短いフレーズに使うと途端に「物語っぽさ」が出ます。使う場所を意図的に絞ることで、明朝体自体が持つ雰囲気を薄めずに残しています。
ドット絵の世界観に合わせる DotGothic16
DotGothic16 はビットマップ風のドットフォントで、ドット絵エンジンで描いているアイコンやロゴと視覚的なトーンを揃えるために、ムード切替ラベルなど一部のUIラベルだけに使っています。本文に使うと可読性が大きく落ちるため、あくまで「ドット絵の隣に置いても違和感がない、短い文字列専用」という位置づけです。
preconnect はフォント読み込みの体感速度に直結する
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />Google Fontsは、CSSを配信するドメイン（fonts.googleapis.com）と実際のフォントファイルを配信するドメイン（fonts.gstatic.com）が分かれています。preconnect を両方に張っておくことで、DNS解決・TLSハンドシェイクをリクエスト前倒しで済ませられ、フォント読み込みの体感速度が変わります。
書体を増やすこと自体はコストですが、「本文用」「見出しの記号用」「世界観の演出用」「UIラベル用」と役割を明確に切り分けておけば、書体が増えても収拾がつかなくなることはない、というのが実感です。