✍️ ブログ管理画面でのウェブフォント設定と読み込み最適化の詳細説明書

本プロジェクトは、ブログの視覚的な完成度と読みやすさを高めるために、管理画面から簡単にフォントをカスタマイズできる直感的な編集ツールを提供しています。

単にフォント名を適用するだけでなく、モバイル環境やネットワーク速度が制限された環境でも、最高の読み込み速度とパフォーマンススコア（Lighthouse Performance）を維持できるように設計された特別な最適化エンジンが連動して動作します。

本説明書では、管理画面デザインエディターでの具体的なフォント設定方法と、内部的にフォントがどのように最適化されて訪問者に高速提供されるかの動作概念を詳細に解説します。

📂 1. デザインエディター内のフォント設定詳細項目

管理画面デザインエディターページの設定メニューから、ブログのレイアウトに合わせてフォントの種類、サイズ、太さを詳細に編集できます。

✍️ 1-1. グローバルウェブフォント設定 (全体ページに適用)

ブログのメイン本文領域および基本インターフェース全般にデフォルトでバインドされるグローバルフォントを管理します。

基本フォント設定 (Font Family):
- ブログ全体のベースとなる本文書体を指定します。
- 入力方法: ブラウザが認識できるフォント名を入力します。空欄のままにすると、システムデフォルトフォントである Inter がブログ全体に継承されます。（例: 'Noto Serif JP', serif または Pretendard）
追加するGoogleウェブフォント (Google Font Name):
- ロゴテキストや主要なウィジェットタイトルなどの特定領域に個別に指定したいGoogleフォントの英語名を入力します。
- 入力方法: カンマ(,)またはセミコロン(;)で区切って複数のフォントを並べて登録できます。（例: Noto Serif JP, Newsreader）
- 連動効果: ここに入力したカスタムフォント名は、ヘッダーのロゴフォント設定や各領域の個別フォント選択オプションのドロップダウンメニューに自動的に表示され、選択可能になります。
基本フォントサイズ (Base Size) & 基本フォントサイズ (Base Size) (Mobile):
- デスクトップ表示とモバイル表示それぞれの基準となる本文フォントサイズを定義します。
- 入力方法とヒント: 16px や 14px のような**絶対単位(px)だけでなく、ユーザーのブラウザデフォルト設定に合わせて柔軟に変更される相対単位(rem, em)**形式の入力にも対応しています。（例: デスクトップ 1rem または 16px / モバイル 0.875rem または 14px）

🎨 1-2. ヘッダーおよびロゴフォント設定

上部ナビゲーションヘッダーに表示されるブランディングロゴテキストに、独立したデザインを適用します。

フォントファミリー (Font Family):
- ロゴテキストに適用する書体をドロップダウンから選択します。
- デフォルト設定の フォント継承 (Inherit) を選択すると、全体のグローバルフォントを継承します。グローバルウェブフォント設定の**[追加するGoogleウェブフォント]**領域に入力したフォントがある場合、リストに自動的に表示され、個別に選択できます。
フォントサイズ & モバイルフォントサイズ:
- 画面サイズの変化によってロゴテキストがはみ出したり、レイアウトが崩れたりしないように、デスクトップサイズとモバイルサイズを別々に指定できます。（例: デスクトップ 1.5rem / モバイル 1.2rem）
ロゴの太さ (Logo Weight):
- ロゴの視覚的な存在感を調整するために、100（最も細い）から 900（最も太い）まで100単位の太さ選択オプションを提供しています。
- 注意事項: 実際に表示される太さは、選択したフォントファミリー側の仕様に依存します。選択したウェブフォントが特定の太さ（例: 100または900）をサポートしていない場合、ブラウザはサポートされている最も近い太さに代用して表示するため、あらかじめフォントの仕様を確認しておくことをお勧めします。

🧩 1-3. グローバルウィジェットスタイル設定

サイドバーやフッター領域などに配置される個別ウィジェットカードのタイトルおよび詳細項目のテキストスタイルを調整します。

グローバルウィジェットタイトルスタイル: 全てのウィジェットカードの上部に表示されるタイトル領域のフォントファミリー、サイズ、太さ、色を設定します。
グローバルウィジェット項目スタイル: ウィジェットカードを構成する個別のコンテンツおよびリンクテキストに適用するスタイルを設定します。
継承規則: ウィジェット設定もフォントファミリー名を空欄にすると、最上位のグローバルフォントを自動的に継承し、デザインの一貫性を維持します。

⚡ 2. フォント読み込みパフォーマンスの最適化メカニズム

ウェブサイトでよく発生するフォント読み込み遅延は、パフォーマンススコアを低下させる大きな原因となります。これを防止するため、本ブログエンジンはサーバーレス環境に最適化された独自のフォント加速パイプラインを内蔵しています。

🛡️ 2-1. システム内蔵基本フォントのフィルタリング

訪問者のデバイス（PCやスマートフォン）のOSにあらかじめインストールされている可能性が高いフォント（例: Pretendard, Arial, system-ui など）については、サーバー側で自動的に除外します。これにより、不要なGoogleフォントサーバーへの通信を完全にカットし、ネットワークトラフィックを削減します。

🔄 2-2. 外部リクエストのブロックと独自プロキシ中継

一般的なウェブサイトのように、外部のGoogleフォントサーバー（fonts.googleapis.com および gstatic.com）にクライアントブラウザが直接接続すると、DNSクエリやSSL接続に時間がかかり、レン더リングの遅延が発生します。

中継スタイルシートの生成: ページレンダリング時にGoogleサーバーを直接呼び出す代わりに、ブログ独自のAPIを通じてスタイルシート(CSS)をプロキシ取得します。
内部リンクの置換: スタイルシート内の実際のフォントファイル(.woff2)のダウンロードリンクを解析し、Googleの外部URLからブログ内部の独自ドメインプロキシURLへ一括変換します。
セキュリティフィルタ: プロキシAPIは、Google公式フォントドメイン以外のホストへの不正アクセスを遮断し、任意の有害コードの中継を安全に防止します。

💾 2-3. Cloudflare Pages CDNおよびブラウザローカルキャッシュ

プロキシ経由で要求された全てのフォント定義およびフォントファイル(.woff2)は、Cloudflareのグローバルエッジサーバー(CDN)に24時間キャッシュされます。

また、ブラウザにも強力なキャッシュヘッダーを付与して応答するため、ユーザーが別の記事をクリックしたり、次回再訪問した際には、ネットワーク経由ではなくローカルデバイスメモリから0msで即座にフォントがレンダリングされます。これにより、フォント読み込みのずれによってレイアウトがガタつく現象(CLS)をほぼ完全に防止します。

🚀 2-4. Pretendardフォント特化加速の適用

日本語・韓国語の可読性に最適化されたシステム書体である Pretendard をグローバルフォントとして使用する場合、レンダリング速度を劇的に短縮する迂回加速ルートが自動的に開通します。

並行ダウンロードの相乗効果: Googleサーバーや中継プロキシAPIを経由せず、世界中にエッジが配置された超高速オープンソースCDN（jsDelivr）静的ネットワークを通じて、他のスクリプトと並行してフォントファイルをロードします。
レンダリングの最適化: 容量の大きい東アジア言語フォントを最短時間で確保し、初回のページ進入時に文字の表示が遅れたり、途中でフォントが急に切り替わったりする現象を回避します。

💡 3. 設定時の注意事項と推奨値

[!IMPORTANT]
💡 管理画面でフォントを変更する際の3つの行動規則

Googleウェブフォント名の正確なスペル遵守:

追加するGoogleウェブフォント項目に入力する英語名は、Google Fontsライブラリの公式英字表記と100%同一である必要があります。スペルミスや不要なスペースがあるとローダーがフォントを認識できず、代替フォント（Sans-serif）で強制表示されます。

デスクトップとモバイルのフォントサイズバランスの調整:

モバイル表示でもデスクトップのフォントサイズをそのまま適用すると、画面の可読性が低下します。モバイルフォントサイズ項目には、基準より 2px 程度小さいサイズを個別に指定して、レスポンシブデザインを適切に維持してください。

安定した日本語フォールバック(Fallback)フォントの宣言:

本文のフォント設定にカスタムウェブフォントを適用する際、'Noto Serif JP', serif のように、末尾にシステムの汎用代替名（serif または sans-serif）を並べて指定することで、ウェブフォントのロードが一時的に遅延した瞬間でも、テキストが崩れずにフォールバックフォントで安定して描画されます。

ウェブフォントの設定手順と表示速度の最適化マニュアル