VKT Toolkit · 2026年9月10日 · 約7分

Webサイトのフォント変更：5つの方法をテストして徹底比較

12pxの灰色テキストで埋め尽くされたニュースサイト。15分も読み続けていると細いコンデンスフォントがにじんで見えるポータル。本文が利用規約の脚注みたいに小さければもっと読めるはずの記事——フォントを変えたいと思ったとき、たいていどちらかに終わります。レイアウトが崩れるか、ページを離れたら設定が消えるか。

実際に使われている5つの方法を、ChromeとEdgeで数週間の日常読みにかけてテストしました。組み込み2種、DIY 2種、そしてフォント変更 Chrome拡張1種を、正直に採点します。フォントそのものが変わるか、テキストだけをリサイズできるか、サイトごとに記憶されるか、コストはいくらか。結論を先に言うと、ページズームはフォント問題に合った道具ではなく、サイト側の設定は存在するときだけ有効で（ほぼ存在しない）、StylusはCSSを話せる人のためのもので、ブックマークレットは一回限りの実験用——コードなしで読みやすいフォント設定を日常的に使いたいなら、テスト期間終了時点でインストールされたまま残っていたのはVKT FontFixerだけでした。

5つの方法を一目で比較

重要なのは3つの列です。フォント変更が、本当のフォント差し替えと見せかけを分けます——ページズームはすべてを拡大するだけで、フォントそのものは変わりません。テキストのみサイズ変更が重要なのは、そうでないと画像やボタン、余白まで膨らんで2方向にスクロールする羽目になるからです。サイトごと自動適用は、その場限りの修正と毎日のツールの違いです。修正がセッションごとにリセットされるなら、あなたはWebサイトを変えているのではなく、雑用を繰り返しているだけです。

方法1：ブラウザのページズーム（Ctrl / ⌘ + +）

ページズームは描画されたページ全体をスケールします。フォント、画像、ボタン、広告、余白——すべて。文章全体が小さいときの即効手段としては正しい反射です。しかし文字サイズ変更の拡張機能ではなく、拡大トリックに過ぎません。本文を読みやすくしようとするとレイアウト全体が膨らみ、その代償を払います。1画面に入る情報量が減り、スクロールが増え、横スクロールバーが出現することも。肝心の12pxの細いフォントは相変わらず12pxの細いフォント——ただ「大きい版」を見ているだけです。ChromeとEdgeもズームを一時的な表示設定として扱うため、ブラウザを再起動すれば100%に戻ります。

• メリット：インストール不要、即座に使える、キーボードだけで操作可能、あらゆるページで動作；
• デメリット：フォントは変わらない；レイアウト全体がスケール（スクロール増、1画面あたりの情報減）；セッション間でサイトごとの記憶が不安定；フォントやコントラスト自体には何もしない；
• 結論：緊急用にショートカットを手元に置いておくのはOK——慢性的なフォント問題には合った道具ではありません。

方法2：Webサイト側のアクセシビリティ設定

サイトによっては——大手ニュースサイトや一部の官公庁ポータルに多い——テキストサイズのトグル（A− / A / A+の列）、テーマ選択、簡易リーディングビューを用意していることがあります。これが存在するなら、現時点で最良の選択肢です。ページを設計した人が組み込んだオプションなので、130%の文字サイズでレイアウトが壊れることもなく、何もインストールせず、パーミッションも不要です。ただし問題は「availability」にあります。ほんの一部のページしか何の設定も提供しておらず、つまりこの方法は「任意のWebサイトのフォントを変える」というこの記事の問いに答えられません。設定もそのブラウザ・そのデバイスのストレージにしか保存されないため、ノートPCを変えたりCookieを消せば、また小さな文字に戻ります。

• メリット：レイアウトの完全な忠実性；サードパーティコードなし；コントラストやテーマ設定とセットで提供されることも多い；
• デメリット：レア；サイトごと・ブラウザごと・デバイスごと——同期されない；設定がないサイトでは何もできない（大多数のサイト）；
• 結論：存在するときは使えばいい——これを軸に読みやすさプランは組めません。

方法3：StylusなどのユーザーCSS拡張

無料のオープンソース・ユーザースタイルマネージャー、Stylusはパワーオプションです。仕組みは完璧に正しい。ドメインにCSSを書けば、ブラウザが毎回の訪問で注入し、スタイルは永遠に自動有効化されます。フォントツールができることはすべてCSSででき、font-family、font-size、line-height、カラーに加え、GUIでは触れないことも可能に。コメント欄だけをスタイリングしたり、頑固な.mastheadを上書きし、疑似要素にすら手が届きます。代償は「あなたがコードを書く」ということ。各サイトが小さなCSSプロジェクトになります。フォールバックスタックをGoogleで調べ、マシンに実際にインストールされているフォントを試行錯誤で突き止め、ルールがレイアウトを壊したら修復ツールは……CSSエディタ。スライダーもフォントピッカーもライブプレビューもありません。テキストエリアがあなたにその言葉を話すよう求めているだけです。

• メリット：最大限のコントロール；サイトごとのスタイルが持続し自動有効化；無料＆オープンソース；
• デメリット：CSS必須；GUIもプレビューもなし；インストール済みフォントの推測は手動；サイトのマークアップ変更に伴うメンテナンス；
• 結論：このリストで最も強力な方法——そしてスキルと時間の面で最もコストが高い。

方法4：オンラインフォントチェンジャーとブックマークレット

ワンクリックのおもちゃもあります。ChangeFont系のブックマークレットをブックマークバーにドラッグし、任意のページでクリックすると、十数種のWebセーフフォントや汎用セリフ／サンセリフスタックを切り替えられる小さなパネルが出ます。本当に役立つのは実験という1つの仕事だけです。Georgia、Verdana、丸みのあるサンセリフを5秒ずつ試すことで、核心の問いに答えられます——「このサイトが嫌いな理由はフォントなのか？」日常使いを妨げる問題が3つあります。何も持続しません。リロードすればサイトのスタイルシートが戻るので、毎回の読書セッションが手動クリックから始まります。ページ内でサードパーティスクリプトを実行します——ブックマークレットは「あなたが実行に同意した他人のJavaScript」なので、コードが1行で読みやすいものを選びましょう。コントロールも粗い。サイズ変更は基本的か皆無で、カラーも同様です。

• メリット：拡張のインストール不要；即座のフォント試行；無料；
• デメリット：サイトごとの記憶なし；サードパーティコードがページ上で実行；サイズ/カラーのコントロールは最低限；
• 結論：ラボのおもちゃとしては合格——常駐する快適ツールにはなりません。

方法5：専用フォントチェンジャー——VKT FontFixer

VKT FontFixerは、Stylusの仕事をフォームで実行する無料のChrome/Edge拡張です。ポップアップがCSSエディタをドロップダウンとスライダーに置き換えます。フォントを選ぶ——組み込み3種（Noto Sans、Source Han Sans、Arial）またはブラウザのLocal Font Access APIを通じてパソコンにインストールされた任意のフォント——文字サイズを80%〜160%の範囲で調整し、テキストカラーとリンク用の個別カラーを設定。ドラッグするたびにページ上でライブプレビューが動き、ワンクリックでサイトのオリジナルデザインに戻せます。

「楽しいおもちゃ」を「毎日のツール」に引き上げるのは、サイトごとの動作です。Auto Applyをオンにすると、FontFixerがそのサイトの設定を保存し、以降の訪問ごとに自動適用。サイトはあなたの選んだ読みやすいフォント設定でそのまま開きます。無料プランは最大5サイト分を自動保存します。裏ではStylusユーザーが手書きするのと同じカテゴリのCSSを注入しており、違いは「あなたが書かなくていい」ということ。スケーリングはテキストのみ——余白と画像はデザイナーが置いた場所のままです。

• メリット：ローカルフォントを含む本物のフォント差し替え；レイアウトを壊さない80〜160%のテキストのみスケーリング；ライブプレビューとワンクリックリセット；サイトごとのAuto Apply；無料版はオフライン完結でアナリティクスなし——権限は最小限の storage＋scripting＋activeTab、<all_urls>ホストアクセスは保存済みスタイルの再適用のためだけ（ページコンテンツの読み取り・アップロードは一切なし）。唯一のネットワーク通信はオプションのライセンス認証のみ；
• デメリット：無料版は保存サイト設定が5件まで；変更はページ全体に適用——要素要素単位のターゲッティングが必要な人には物足りない；ローカルフォントの一覧はChromium専用APIに依存；
• 結論：コードゼロで、選んだサイトにフォント変更を「ただ起こす」ことにしたい人向け。

正直に、Stylusを今後も選ぶべき人は？DevToolsに精通していて、GUIでは表現できない手術が必要な場合——コメント欄だけに適用、自分のブログに正確なブランドフォントを指定、::first-lineのトリック、タイポグラフィの仕様にピクセル単位で合わせる——Stylusは正しいツールであり、無料です。FontFixerを含むGUIベースのチェンジャーは、要素ごとのパワーをスピードと引き換えにしています。パワーが必要ならそれを使えばいい。ただ、その対価はCSSで支払うことを理解しておいてください。

よくある質問

要約：今日の問題で選ぶ

• この1ページを今すぐ読めるようにしたい？ → Ctrl/⌘ + +；
• サイト側にA+/A−トグルがある？ → それを使えばいい——そのための機能；
• CSSを話せて要素レベルの手術が必要？ → Stylus；
• 別のフォントで雰囲気が変わるかどうか試したいだけ？ → 実験用にブックマークレット；
• 自分のフォント、テキストのみサイズ変更、リンクカラーを、読む場所ごとにサイト別で記憶させたい。コードは書かない？ → VKT FontFixer。

5つの方法に共通するパターンはシンプルです。組み込みは今このページを解決し、DIYツールはあなたの手でサイトごとに解決し、専用ツールは一度で解決します。Webサイトのフォント変更はもう解決済みの問題——残る選択は「何度もやり直すかどうか」だけです。

他のガイドはVKTブログへ。お問い合わせ [email protected]。