フォント変更ツールを使うと、ウェブページ上の任意のフォントを Google Fonts ライブラリから別のフォントに置き換えられます。ページ全体(すべてのテキスト)への一括適用や、要素ごと(見出しのみ、本文のみ、クリックした特定の要素)への個別適用が可能です。フォントはオンデマンドで動的に読み込まれ、元のフォントと新しいフォントを切り替えて可読性やデザインへの影響を比較できます。
適切な書体を選ぶことは、デザイン上もっとも影響の大きい決断の1つですが、実際の文脈でフォントを試すのは意外と難しいものです。Google Fonts のプレビューはサンプルテキストを使って単体でフォントを表示するだけで、実際のページレイアウトや本物のコンテンツの文脈の中では確認できません。Fonts Changer は Google Fonts をブラウザに直接取り込み、実際のページに適用して確認できるようにします。
ライブラリを閲覧または検索し、フォントをクリックすると即座に適用されます。フォントは Google の CDN から動的に読み込まれるため、ダウンロードやインストールは不要です。ページ全体に適用して新しい書体でどう見えるかを確認することも、特定の要素をクリックして見出しと本文で異なるフォントを試すこともできます。ワンクリックで元のフォントと変更後のフォントを切り替え、読みやすさや視覚的な重みを比較できます。
フォントは拡張機能にバンドルされるのではなくオンデマンドで読み込まれるため、ライブラリを閲覧するだけなら事前のコストは一切かかりません。実際に選択したフォントだけがダウンロードされ、他の Web フォントと同様にセッション中はブラウザにキャッシュされます。フォントの変更はサイトごとに保存されるため、クライアントのホームページを確認しているときに選んだ書体は、次回同じサイトを開いたときにも引き続き適用され、他のページには影響しません。すべての変更は非破壊的であり、リロードすればすべて元に戻せます。
ワンクリックでページ全体に新しいフォントを適用します。見出し・段落・ボタン・ナビゲーション・フッターなど、すべてのテキスト要素が選択したフォントに切り替わります。書体をまるごと変更したときのデザイン全体への影響をすぐに確認できます。
特定の要素をクリックして、その要素のフォントだけを変更します。見出しに serif フォント、本文に sans-serif フォントを使ったり、コードブロックにだけ monospace フォントを適用したりできます。同じページで複数のフォントを組み合わせて使えます。
ツール内で Google Fonts ライブラリ(1,500以上のフォントファミリー)を閲覧・検索できます。フォントはオンデマンドで Google の CDN から動的に読み込まれるため、ローカルへのインストールやダウンロードは不要です。
ワンクリックで元のフォントと置換フォントを切り替えます。ページが瞬時に行き来するため、2つの書体の可読性・視覚的ウェイト・x-height・スペーシングを簡単に比較できます。
新しいフォントを適用しても、元の font-weight と font-style の値は保持されます。太字の見出しは太字のまま、斜体のテキストは斜体のまま、ライトウェイトの本文テキストはライトウェイトのままです。書体は変わりますが、タイポグラフィの階層構造は維持されます。
フォント名で検索したり、カテゴリー(serif・sans-serif・display・handwriting・monospace)でフィルタリングしたりできます。1,500以上の選択肢から目的の書体をすばやく見つけられます。
新しいウェブサイトを始めるとき、類似サイトを開いてフォントを候補の書体に置き換えてみましょう。Google Fonts のサンプルテキストプレビューよりも、実際のコンテンツとレイアウトで各書体がどう見えるかをはるかにリアルに確認できます。
デザインレビュー中に、クライアントのサイトが異なるフォントではどう見えるかを見せましょう。「これが現在のデザインです…見出しに Playfair Display を使うとこうなります」。ライブの切り替えがあると比較がとても説得力を持ちます。
異なるフォントが長文コンテンツの可読性にどう影響するか比較します。ブログ記事を Inter・Georgia・Lora・Merriweather で切り替えて、対象のフォントサイズで最も読みやすい書体を見つけましょう。
ブランドリフレッシュを検討しているなら、新しい書体候補を本番サイトに適用して、実際のコンテンツ・カラー・レイアウトでどう見えるかを確認しましょう。すべての選択肢のモックアップを作るよりもはるかに速く作業できます。
難読症や視覚障害のあるユーザーにとって異なるフォントが可読性にどう影響するかをテストします。OpenDyslexic・Lexie Readable・x-heightの高い sans-serif フォントなどを即座に適用して、その効果を確認できます。
DevSuite Pro のフローティングドックを開き、フォント変更アイコンをクリックします。検索可能な Google Fonts ライブラリを備えたパネルが開きます。
フォント名を入力して検索するか、ライブラリをスクロールします。カテゴリー(serif・sans-serif・display・monospace)でフィルタリングして選択肢を絞り込めます。
フォント名をクリックするとページ上のすべてのテキストにグローバルで適用されます。または「要素ごと」モードを先にクリックし、ページ上の特定の要素をクリックしてからフォントを選択します。
切り替えボタンを使って元のフォントと置換フォントを行き来します。可読性・視覚的ウェイト・デザインへの影響を並べて比較できます。
実験が終わったら、ページを更新するとすべての元のフォントが完全に復元されます。