← 機能一覧に戻る
Pro

フォント変更

フォント変更ツールを使うと、ウェブページ上の任意のフォントを Google Fonts ライブラリから別のフォントに置き換えられます。ページ全体(すべてのテキスト)への一括適用や、要素ごと(見出しのみ、本文のみ、クリックした特定の要素)への個別適用が可能です。フォントはオンデマンドで動的に読み込まれ、元のフォントと新しいフォントを切り替えて可読性やデザインへの影響を比較できます。

適切な書体を選ぶことは、デザイン上もっとも影響の大きい決断の1つですが、実際の文脈でフォントを試すのは意外と難しいものです。Google Fonts のプレビューはサンプルテキストを使って単体でフォントを表示するだけで、実際のページレイアウトや本物のコンテンツの文脈の中では確認できません。Fonts Changer は Google Fonts をブラウザに直接取り込み、実際のページに適用して確認できるようにします。

ライブラリを閲覧または検索し、フォントをクリックすると即座に適用されます。フォントは Google の CDN から動的に読み込まれるため、ダウンロードやインストールは不要です。ページ全体に適用して新しい書体でどう見えるかを確認することも、特定の要素をクリックして見出しと本文で異なるフォントを試すこともできます。ワンクリックで元のフォントと変更後のフォントを切り替え、読みやすさや視覚的な重みを比較できます。

フォントは拡張機能にバンドルされるのではなくオンデマンドで読み込まれるため、ライブラリを閲覧するだけなら事前のコストは一切かかりません。実際に選択したフォントだけがダウンロードされ、他の Web フォントと同様にセッション中はブラウザにキャッシュされます。フォントの変更はサイトごとに保存されるため、クライアントのホームページを確認しているときに選んだ書体は、次回同じサイトを開いたときにも引き続き適用され、他のページには影響しません。すべての変更は非破壊的であり、リロードすればすべて元に戻せます。

ライブプレビュー
example.com/article
フォントがグローバルに変更されました
Georgia で表示されたサンプル見出し
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
元のフォント: Jost 新しいフォント: Georgia
フォントライブラリ
フォントを検索...
Inter
Georgia ✓
Roboto
Playfair Display
Source Code Pro
Lato
主な機能

ページ全体へのフォント一括適用

ワンクリックでページ全体に新しいフォントを適用します。見出し・段落・ボタン・ナビゲーション・フッターなど、すべてのテキスト要素が選択したフォントに切り替わります。書体をまるごと変更したときのデザイン全体への影響をすぐに確認できます。

要素ごとのターゲット指定

特定の要素をクリックして、その要素のフォントだけを変更します。見出しに serif フォント、本文に sans-serif フォントを使ったり、コードブロックにだけ monospace フォントを適用したりできます。同じページで複数のフォントを組み合わせて使えます。

Google Fonts ライブラリへのアクセス

ツール内で 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 フォントなどを即座に適用して、その効果を確認できます。

使い方
1

フォント変更を起動

DevSuite Pro のフローティングドックを開き、フォント変更アイコンをクリックします。検索可能な Google Fonts ライブラリを備えたパネルが開きます。

2

フォントを検索または閲覧

フォント名を入力して検索するか、ライブラリをスクロールします。カテゴリー(serif・sans-serif・display・monospace)でフィルタリングして選択肢を絞り込めます。

3

全体または要素ごとに適用

フォント名をクリックするとページ上のすべてのテキストにグローバルで適用されます。または「要素ごと」モードを先にクリックし、ページ上の特定の要素をクリックしてからフォントを選択します。

4

切り替えて比較

切り替えボタンを使って元のフォントと置換フォントを行き来します。可読性・視覚的ウェイト・デザインへの影響を並べて比較できます。

5

ページ更新でリセット

実験が終わったら、ページを更新するとすべての元のフォントが完全に復元されます。

試してみませんか?

DevSuite Pro を無料でインストールして、ブラウザで 64 以上の開発者ツールを利用しましょう。

Chrome に追加 Edgeに追加 Firefox に追加