WordPress サイトのテーマにカスタム フォントを追加する 3 つの方法

WordPress Web サイトをよりユニークで視覚的に魅力的なものにするための、興味深くカスタマイズ可能な方法がたくさんあります。 方法の 1 つは、WordPress サイトにカスタム フォントを追加することです。 競合他社の Web サイトをいくつか見てみましょう。 これらは、あなたが独自の WordPress Web サイトで作成したいものと同じトーンやスタイルをエミュレートする場合があります。 フォントの使用に注意してください。 成功しているサイトの多くは、Web サイト全体で一貫して使用される厳選された少数のフォントを使用する傾向があります。

オンラインで無料で入手できるカスタム フォントが数多くあり、自分のサイトに簡単に追加できます。 適切なフォントを見つけたら、それを Web サイトに適用する方法を知る必要があります。 これを達成するには、さまざまな方法を試すことができます。

まず最初に、適切なフォントを見つけます。 世の中には、何千もの無料フォントをダウンロードできるサイトが無数にあります。 Google Fonts、TemplateMonster、MyFonts、FontSpring、Cufonfonts、Dafont、Font Squirrel、Edge Web Fonts、1001 Free Fonts、Fonts.comをお試しください。

つまり、WordPress Web サイトにカスタム フォントを追加するには、手動で行う方法とプラグインを使用する方法の 2 つの主な方法があります。

WordPress サイトのテーマにカスタム フォントを手動で追加する

WordPress サイトにあまりにも多くのプラグインで過剰な負荷をかけるリスクを避けたい場合は、カスタム フォントを WordPress に手動で追加すると便利です。 これは、@font-face ディレクティブを編集することで実現できます。 これにより、任意の形式の複数のフォントをサイトに接続できるようになります。

これには次の手順が含まれます。

ステップ1

まず、最も便利な Web サイトから選択したカスタム フォントをダウンロードします。 ファイルがコンピュータに保存されたら、この .zip アーカイブを解凍します。

ステップ2

これに続いて、このフォント ファイルを WordPress ホスティング サーバーの「wp-content/themes/your-theme-folder/fonts」ディレクトリにアップロードできます。 カスタム フォント用の指定フォルダーをまだ設定していない場合は、フォルダーを作成してそこに保存します。

ステップ3

次に、WordPress の管理エリアに移動します。 「外観」を選択し、「テーマエディター」に移動します。 この時点で、テーマの style.css ファイルが画面に表示されます。 この下に、コードの次のセクションを追加する必要があります。

 @font-face { font-family: Aguafina Script-Regular; src: url(http://test-site.com/wp-content/themes/your-theme-folder/fonts/AguafinaScript-Regular.ttf); font-weight: normal; }

コード内の「URL」と「font-family」を、選択したフォントに対応する適切な値に忘れずに置き換えてください。 また、このコードのセクションを CSS ファイルの先頭、ただしテーマのコメントの後に貼り付ける必要があります。

ステップ4

最後に、重要な「ファイルの更新」ボタンをクリックしてください。 これにより、ページを離れる前に変更が適切に保存されます。

ステップ5

これに続いて、テーマのスタイルシート内でフォントを適用したい場所に簡単にフォントを使用できます。 次のコードを使用します。

 .h1 site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

このフォントフェイスコードを編集したので、誰かがあなたのウェブサイトにアクセスするたびにフォントが読み込まれるようになります。 ただし、ページ上の特定の要素にはまだ適用されていません。 これを行うには、アクセスしていた対応する style.css ファイルにもう一度最終編集を行う必要があります。 次のようなコードをファイルに入力する必要があります。

 .site-title { font-family: "Aguafina Script-Regular", Arial, sans-serif; }

あなたにおすすめ:初心者ガイド: WordPress テーマをインストールするには?

簡単なメモ:

前と同様に、使用しているフォントに合わせて font-family 値を編集してください。

たとえば、Google Fonts のカスタム書体を使用している場合は、@import という名前のタブが表示されます。このタブには、コピーしてテーマの style.css ファイルに貼り付けるだけの関連コードが表示されます。 あまりにも多くのコーディングに慣れていない場合は、これによりプロセス全体が非常に簡単になります。

ただし、これはあまり推奨される方法ではなくなりました。 いくつかのパフォーマンスの問題が発生し、ブラウザーが複数のスタイル シートを同時にダウンロードできなくなりました。 これにより、最終的にページの読み込みが遅くなります。 したがって、フォントとその使用方法を選択するときは、このことに留意してください。

一方、CSS を介して手動でカスタム フォントをインストールすると、SVG、WOFF、TTF、OTF などのさまざまな形式のフォントを接続できます。 この方法では、サードパーティのサービスに依存せずに作業することもできます。 フォント ファイルはサーバー上に配置されます。 これは、WordPress にカスタム フォントを追加する最も直接的な方法です。

プラグインを使用して WordPress サイトのテーマにカスタム フォントを追加する

多くの人は、プラグインを使用してカスタム フォントを WordPress サイトに含めることを選択します。これは、多くの点で最も簡単な方法であるためです。 これは、CSS コーディングを扱いたくない場合に特に当てはまります。 Google Fonts は、WordPress プラグインと簡単に併用できるため、人気の選択肢です。 あなたにとって最適な 2 つのオプションは、Easy Google Fonts と Google Fonts Typography です。 これらのプラグインのいずれかを有効にすると、複雑なコードを扱うことなく、Google Fonts のフォント カタログ全体に簡単にアクセスしてページに追加できるようになります。

Google フォントを使用するのが最も簡単な方法で、変更内容やカスタム フォントを画面上でリアルタイムにプレビューできます。

どのフォント ファイルを使用するか、および単一のリポジトリを使用するかどうかに応じて、カスタム フォント プラグインなどの代替プラグインの使用を検討することをお勧めします。

ステップ1

選択したプラグインをインストールしてアクティブ化したら、[外観] に移動し、[カスタマイザー] ページをクリックすると、ライブ WordPress テーマ カスタマイザー インターフェイス ページが開きます。 ここには [タイポグラフィ] タブが表示され、独自のカスタム フォントを適用できるサイトの各セクションが表示されます。

ステップ2

このページを開くと、編集を開始したいページのセクション内で [フォントの編集] ボタンをクリックできるようになります。 次に、フォント スタイル、サイズ、余白などを選択して、さまざまなサブセクションを操作できます。これらのセクションは、使用しているテーマによって異なります。

テーマによっては、Web サイトのさまざまなセクションで選択したフォントを直接編集できないこともあります。 ただし、この問題には簡単な解決策があります。[設定]、[Google フォント] の順に移動し、独自のフォント コントロールを作成できます。 これを行うには、ボックスにコントロール名を入力し、CSS セレクターを選択するだけです。 これにより、このフォントの対象とする HTML 要素を追加できます。 この情報を入力したら、[フォント コントロールの保存] ボタンをクリックして変更を保存し、設定が完全​​に更新されるようにしてください。 その後、WordPress Web サイトのさまざまなセクションごとに、必要なだけカスタム フォント コントロールを作成し続けることができます。

ステップ3

これらの新しいフォント コントローラーを作成した後に使用するには、[外観] セクションに戻り、[カスタマイザー] をクリックして、[タイポグラフィ] タブをクリックします。 これに続いて、「テーマ タイポグラフィ」というラベルの付いたオプションが表示されます。これをクリックすると、「編集」ボタンを選択するだけでカスタム フォント コントロールにアクセスできるようになり、この特定のフォントと外観を選択できます。コントロール。 もう一度言いますが、[公開] または [保存] ボタンをクリックしてサイトを更新し、変更を保存することを忘れないでください。

簡単なメモ:

私たちが推奨する他の優れたカスタム WordPress フォント プラグインは、Custom Font Uploader と Use Any Font です。ただし、他にも無数にあるため、使用するプラグインを決める前にオプションを検討してください。

こちらもおすすめです:ベストセラーのマイクロニッチ WordPress テーマ 20 個。

最後にテーマを使ってみる

カスタム フォントとタイポグラフィを WordPress Web サイトに追加するこれら 2 つの主な方法に加えて、選択できるテーマを利用することもできます。 利用可能なテーマは数多くありますが、その多くには、インストールされているフォントをカスタマイズできる組み込みオプションが付属しています。 そのプロセスは、使用しているテーマによって異なります。 したがって、テーマに合った適切なガイドを必ず調べてください。 高品質のプレミアム WordPress テーマでは、特定のテーマにカスタム フォントを追加するためのガイドラインを提供するオンライン アクセス可能なドキュメントも提供されます。

ビジュアル要素とデザイン要素は、訪問者全員の注目を集める効果的な Web サイトを作成する上で最も重要な要素の 1 つであることは間違いありません。 この分野の最大の特徴の 1 つはフォントの使用です。 WordPress Web サイトにカスタム フォントを追加するどの方法を選択する場合でも、Web サイト全体とブランドのスタイル、対象者、コンテンツ、テーマ、トーンに最も適したフォントを見つけて使用する必要があります。

 この記事はベアトリス・ビアードによって書かれています。 Beatrice は、Academic Brits のプロのコピーライターで、幅広いトピックと主題分野を専門としています。 ベアトリスは、常に自分の個人的な経験を共有し、本当に売れる高品質のコンテンツを作成する際の多くの課題や特殊性をすべて明らかにする初心者のライターに専門的なアドバイスを提供することにオープンです。