ワードプレスサイトのフォントを整えるのに何時間も費やしてきた。デフォルトのフォントでは読みにくかったり、私が求めている雰囲気と合わなかったりするのだ。もしあなたが同じように感じているなら、心配しないでほしい。このガイドでは、初心者向けでコード不要のツールを使ってWordPressのフォントを変更する方法を紹介する。
TL;DR: WordPressでフォントを変更する簡単な方法
- テーマビルダーを使用して、サイト全体のフォントを完全に制御する
- WordPressカスタマイザーでフォントを変更する（プラグイン不要）
- ブロックベースのテーマでフルサイト編集を使用してフォントを更新する
- フォントのプラグインをインストールして、Google Fontsなどにアクセスする。
- コンテンツエディターでフォントの外観を直接調整できる
WordPressでフォントを変更する理由
フォントはサイトのデザインとブランディングの重要な要素です。WordPressでタイポグラフィを変更すると、読みやすさが向上し、サイト全体のトーンが決まります。
ウェブサイトに読みにくいフォントスタイルが使用されていると、訪問者はコンテンツに興味を持つことが難しくなり、最終的にサイトを放棄してしまうかもしれません。しかし、読みやすさに基づいてフォントを選択すれば、ユーザー体験を向上させることができます。例えば、セリフ体のフォントとサンセリフ体のフォントを併用すると、どんなサイトでも見栄えが良くなります。
ウェブセーフで読みやすいフォントを使用することで、ページの読み込み時間とSEOを改善することができます。WordPressのフォント設定はパフォーマンスに影響するため、シンプルなタイポグラフィを選択することで、サイトの読み込みを速くすることができます。
使用するフォントもまた、ブランドのアイデンティティを形成します。WordPressのフォントをモダンな雰囲気にカスタマイズしても、遊び心のある雰囲気にカスタマイズしても、フォントはあなたのビジネスを反映する一貫した外観を作り出します。
多くのWordPressテーマには、あなたのブランドにマッチしないデフォルトフォントが付属しています。フォントをカスタマイズすることで、サイトのタイポグラフィ、スタイル、ボイスを完全にコントロールすることができます。
アクセシビリティは、読書や視覚に障害のある訪問者にとって重要です。明瞭で読みやすいフォントを選ぶことで、ウェブサイトをより多くの人が利用しやすいものにすることができます。
前述したように、WordPressでフォントを変更するにはいくつかの方法がある。以下では、最も簡単な方法を紹介しよう。
どのフォント変更方法を使うべきか？
| 方法 | 最適 | プラグインが必要ですか？ | カスタマイズ・レベル |
|---|---|---|---|
| テーマビルダー | サイト全体のフォントとデザインを完全にコントロール | はい | 高い |
| カスタマイザー | テーマ設定でフォントを素早く変更 | いいえ | ミディアム |
| フルサイト編集（FSE） | ブロックベースのテーマを使ってフォントを編集する | いいえ | 高い |
| フォントプラグイン | Google Fontsへのアクセスと高度なタイポグラフィ | はい | 中～高 |
| コンテンツ・エディター | 個々の投稿やページ用のカスタムフォント | いいえ | 低い |
テーマビルダーを使ってWordPressのフォントを変更する
WordPressテーマビルダーを使えば、WordPressサイト全体のフォントを完全にコントロールすることができる。この方法は、サイトのあらゆる部分を視覚的にデザインしたい場合に最適です。
この方法では、WordPressのための最高のページビルダーとテーマビルダー・プラグインであるSeedProdを使う。SeedProdはドラッグ＆ドロップでWordPressのカスタムテーマを作成できるプラグインで、コードを一行も触ることなく視覚的にテーマを作成することができる。
はじめに、テーマビルダー機能が含まれているため、SeedProd Proバージョンが必要です。プランを選択し、プラグインをダウンロードした後、WordPressウェブサイトにインストールして有効化する必要があります。
もし、SeedProd Proをインストールする際に助けが必要であれば、私たちのステップバイステップのドキュメントに従ってください。このガイドでは、プレミアム機能のロックを解除するためにプラグインのライセンスキーを入力する場所も説明します。
プラグインをアクティブにした状態で、WordPressのダッシュボードからSeedProd " Theme Builderに移動し、Theme Template Kitsボタンをクリックします。
そこから、プラグインはあなたのテーマの出発点として使用するウェブサイトのテンプレートのライブラリを表示します。
テーマを選択するには、テーマにカーソルを合わせてチェックマークアイコンをクリックしてください。このガイドでは、栄養コンサルタントのテーマを使用します。
1つ選ぶと、SeedProdはあなたのテーマを構成するテンプレートを自動的に生成します。
各テンプレートを編集してWordPressテーマの外観をカスタマイズできます。また、手動でテンプレートパーツを追加作成するオプションもあります。
このガイドでは、Homepageテンプレートを編集し、さまざまなHomepage要素のフォントを変更します。これを行うには、Homepage見出しの下にあるEdit Designリンクをクリックします。
あなたのホームページテンプレートは、SeedProdのドラッグ＆ドロップビルダーで起動します。ここでは、左側のパネルから新しいデザイン要素を追加し、デザインプレビュー上の好きな場所に配置することができます。
要素のフォントを変更するには、その要素をクリックするだけです。例えば、見出しの下にあるテキストボックスをクリックすると、ブロック設定が開きます。
そこから、Advancedタブをクリックし、Typography見出しの横にあるEditをクリックします。
特定のデザイン要素のタイポグラフィを編集するための複数のオプションがあるドロップダウンパネルが開きます。
たとえば、フォントファミリーのドロップダウンメニューをクリックすると、さまざまなGoogleフォントから選択できます。また、さまざまなフォントの太さを選択したり、フォントサイズ、行の高さ、文字間隔、大文字と小文字、配置などを調整するオプションもあります。
SeedProdを使用してWordPressテーマの他の要素をカスタマイズするには、以下の手順を繰り返します。
見た目が気に入ったら、ページ上部の「保存」ボタンをクリックします。
WordPressテーマのフォントを編集し、カスタマイズした後、SeedProd " Theme Builderに戻り、Enable SeedProd Themeの横にあるトグルスイッチをYesの位置にクリックします。
SeedProdは、あなたの変更をライブにし、あなたのホームページを訪問してあなたのサイトのフォントを見ることができます。
カスタマイザーでWordPressのフォントを変更する
WordPressのカスタマイザーでは、アクティブなテーマの設定に基づいてフォントを変更することができます。プラグインなしでタイポグラフィを更新する手軽な方法だが、テーマによってはオプションが制限されることもある。
この例では、Astra WordPressテーマを使用しています。しかし、カスタマイザーに表示される設定は、お使いのテーマによって異なります。あなたが探す必要があるオプションは、見出しに「font」または「typography」があるはずです。
WordPressのカスタマイザーを開くには、WordPressの管理画面から外観 " カスタマイズに進みます。
Astraテーマでは、Global settingsオプションでサイト全体の変更を行うことができます。ウェブサイト全体のフォントを変更するには、このオプションをクリックします。
次の画面では、タイポグラフィ、フォントカラー、コンテナなど、いくつかのカスタマイズオプションが表示されます。Typographyオプションをクリックすると、サイト全体のフォントが変更されます。
また、本文や見出しのフォントなど、個々のテキスト要素のフォントを変更することもできます。これを行うには、編集アイコンをクリックし、フォントファミリーのドロップダウンメニューからフォントを選択します。
同じパネルで、フォントのウェイト、サイズ、スタイルなどを調整できる。
フォントの変更に満足したら、Publishボタンをクリックします。この場合、Rubik見出しフォントとKarla本文フォントになります。
注：すべてのテーマが同じ機能やカスタマイズオプションを提供しているわけではありません。あなたのテーマがこれを提供していない場合は、次のステップまで読み進めてください。
WordPressのフルサイト編集でフォントを編集する
Twenty Twenty-ThreeのようなブロックベースのWordPressテーマを使用している場合、フルサイトエディタを使用すると、デザインインターフェイス内でヘッダーや本文などのフォントを直接更新することができます。
この方法を始めるには、WordPressの管理パネルから外観 " 編集に移動し、テーマのFSEを開きます。今回はTwenty Twenty-Threeテーマを使用しています。
サイトエディターで、テーマプレビューのどこかをクリックしてフルスクリーンにし、追加のメニューバーを表示する。
そこから右上のスタイルアイコンをクリックし、タイポグラフィオプションを選択します。
ここでは、WordPressの見出し、テキスト、リンク、ボタンなどのフォントを変更できます。
この例では、見出しオプションを選択し、フォントのドロップダウンメニューから新しいフォントを選択します。
変更後、保存ボタンをクリックします。サイトエディタを終了し、ライブウェブサイトにアクセスすると、新しいフォントの変更を確認できます。
WordPressでフォントを追加・変更するにはプラグインを使おう
フォントプラグインを使えば、何百ものGoogleフォントやAdobeフォントにアクセスできる。この方法は、ほとんどのテーマで動作し、現在のテーマが組み込みのタイポグラフィ設定を提供していない場合、良い選択肢です。
例えば、Fonts Pluginを使えば、1455種類のフリーフォントから選んでウェブサイトで使うことができる。また、Adobe Fonts (Typekit)との統合や、ライブカスタマイザーによるプレビューも可能です。
まずはフォント・プラグインをダウンロードし、WordPressサイトにインストールして有効化してください。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこちらのガイドに従ってください。
次に、ダッシュボードからFonts Plugin " Customize Fontsに移動し、ライブWordPressカスタマイザーを開きます。
ここで基本設定をクリックし、基本タイポグラフィ、見出し、ボタン、入力のウェブフォントを変更することができます。
また、詳細設定オプションをクリックすると、ナビゲーションリンクとサイドバーのブランディングフォントとタイポグラフィを変更できます。
変更が完了したら、[Publish]ボタンをクリックします。そこから、あなたのサイトにアクセスして、新しいフォントの動作を確認することができます。
個々の投稿やページでフォントをカスタマイズする
特定のブログ記事やページで異なるフォントを使いたいですか？ブロックエディターでタイポグラフィを調整できます。テキストをクリックして、左サイドバーのフォント設定を微調整するだけです。
この方法は個々の投稿をカスタマイズするには最適ですが、サイト全体のフォントを変更したい場合は、このガイドにある他の方法のいずれかを使用するのが最善です。
ここでは、WordPressの特定の投稿のフォントを変更する方法を説明します。
まず、任意の投稿を編集してWordPressのコンテンツエディタを表示し、変更したいテキストブロックまたは本文をクリックします。左側のサイドバーで、Typography見出しの横にある3つの点をクリックします。
すると、フォントファミリー、アピアランス、行の高さ、文字の間隔など、さまざまな設定を選択できるパネルが開きます。これらのオプションをクリックすると、サイドバーに追加されます。
そこから設定を編集して、特定のテキストブロックを他のコンテンツとは異なる外観にすることができます。
変更を保存して、新しい投稿フォントの外観をプレビューすることができます。
WordPressのフォント変更に関するFAQ
カスタムフォントの使用、複数の書体の組み合わせ、スピードとSEOのためのフォントパフォーマンスの最適化など、フォントに関する一般的な質問に素早くお答えします。
はい、テーマのファイルに追加するか、プラグインを使用することでカスタムフォントをアップロードできます。SeedProdやFonts Pluginのようなツールでは、コードに触れることなくカスタムフォントを追加することもできます。
WordPressのブロックエディターでフォントを変更するには、テキストブロックを選択してタイポグラフィ設定を開きます。これにより、そのブロックまたは投稿のためだけに異なるフォントスタイルを選択することができます。
最適なフォントは1つとは限りませんが、Open Sans、Roboto、Latoのようなクリーンでウェブセーフなフォントは読みやすさに優れています。常にブランドにマッチし、あらゆるデバイスで読みやすいフォントを選びましょう。
ほとんどのテーマやプラグインでは、見出し、本文、ボタンに異なるフォントを設定できます。フォントのスタイルを混在させることは可能ですが、デザインをすっきりさせるために2～3種類までにしましょう。
必要なフォントのウェイトとスタイルだけを使用し、高速なCDNまたは独自のサーバーから提供します。Google Fontsのfont-display: swapは、パフォーマンスにとって良い出発点です。
このガイドが、HTMLやPHP、CSSのコードを書かずにWordPressのフォントを変更する方法を学ぶのに役立てば幸いです。WordPressで画像にテキストを追加する方法については、こちらのガイドもお勧めです。
サイト全体のフォントの変更など、デザインの自由度を完全に高めたい場合は、SeedProdのビジュアルテーマビルダーを使えば簡単です。
今すぐSeedProdを試して、あなたのWordPressサイトのデザインを始めましょう。
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
