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

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

オンラインで無料で利用できるカスタムフォントは非常に多く、自分のサイトに簡単に追加できます。 適切なフォントを見つけたら、それらを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; }

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

 .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つのオプションは、EasyGoogleFontsとGoogleFontsTypographyです。 これらのプラグインのいずれかをアクティブにすると、複雑なコードを処理しなくても、フォントのGoogleFontsカタログ全体に簡単にアクセスしてページに追加できるようになります。

これを行う最も簡単な方法はGoogleFontsを使用することであり、変更内容とカスタムフォントを画面上でリアルタイムにプレビューできます。

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

ステップ1

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

ステップ2

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

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

ステップ3

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

クイックノート：

私たちがお勧めする他の優れたカスタムWordPressフォントプラグインには、カスタムフォントアップローダーとUse Any Fontがありますが、他にも数え切れないほどの選択肢があるため、使用するオプションを決定する前にオプションを検討してください。

あなたも好きかもしれません： 20のベストセラーマイクロニッチワードプレステーマ。

最後に、テーマを使用してみてください

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

視覚的要素とデザイン要素は、間違いなく、訪問するすべての人の注意を引く効果的なWebサイトを作成する上で最も重要な要素の1つです。 この分野での最大の特徴の1つは、フォントの使用です。 WordPress Webサイトにカスタムフォントを追加する方法を選択する場合は、Webサイト全体とブランドのスタイル、オーディエンス、コンテンツ、テーマ、およびトーンに最適なフォントを見つけて使用する必要があります。

 この記事はBeatriceBeardによって書かれました。 Beatriceは、Academic Britsのプロのコピーライターであり、印象的な範囲のトピックと主題分野を専門としています。 ベアトリスは常に彼女の個人的な経験を共有し、実際に売れる高品質のコンテンツを作成することの多くの課題と特殊性のすべてを明らかにする初心者の作家に専門家のアドバイスを与えることにオープンです。