WordPress にカスタムフォントを追加する方法

公開: 2024-02-02

WordPress ウェブサイトで同じ古いデフォルトのフォントを使用することにうんざりしていませんか? カスタマイズしてサイトにカスタム フォントを追加しましょう。

考えてみてください。Web サイトはオンライン ホームまたは仮想ストアのようなものです。 細部に至るまでブランドの個性を反映すべきではないでしょうか?

そこでカスタム フォントの出番です。カスタム フォントは、Web サイトを平均的なものから素晴らしいものに変える秘密の材料のようなものです。

ただし、WordPress にカスタム フォントを追加するのは面倒に感じるかもしれません。 心配しないで; 私たちが助けに来ました！

この記事では、WordPress Web サイトにカスタム フォントを追加する方法を説明します。

何を求めている？ 早速始めてみましょう！

目次

  1. WordPress Web サイトにとってカスタム フォントが重要な理由
  2. WordPress のカスタム フォントを見つける場所
  3. プラグインを使用してWordPressにカスタムフォントを追加する方法
  4. カスタムフォントをWordPressに手動で追加する方法
  5. 結論

1 WordPress Web サイトにとってカスタム フォントが重要な理由

WordPress Web サイトにおけるカスタム フォントの重要性は、どれだけ強調してもしすぎることはありません。 カスタム フォントは、Web サイトに独自のブランド アイデンティティを作成し、全体的なデザインの美しさを向上させるのに役立ちます。

カスタム フォントを使用すると、Web サイトのニッチな分野や視聴者に最も適したフォントを選択でき、Web サイトをより魅力的なものにすることができます。 カスタム フォントを使用すると、コンテンツの読みやすさも向上し、訪問者がメッセージに関心を持ちやすくなります。

カスタム フォントは、Web サイトを他の Web サイトと区別するのにも役立ちます。 ウェブサイトに独特の外観と雰囲気を与え、訪問者にとってより記憶に残るものになります。

しかし、これらのカスタム フォントはどこで見つけられるのでしょうか? これについては次のセクションで説明します。

2 WordPress のカスタム フォントを見つける場所

WordPress にカスタム フォントを追加するのは、特に Web サイトに適したフォントを見つける必要がある場合には、困難になることがあります。 幸いなことに、サイトに適切なフォントを見つけるのに役立つリソースが用意されています。

出発点として最適なのは、Web での使用に最適化された無料フォントの膨大なライブラリを提供する Google Fonts です。 カテゴリ、言語、人気などに基づいてフォントを簡単に検索できます。

もう 1 つのオプションは、WordPress とシームレスに統合される高品質のフォントを提供する Adob​​e Fonts (旧 Typekit) です。 Adobe Fonts をダウンロードするには、Creative Cloud サブスクリプションが必要であることに注意してください。

ただし、フォントを使用する前にライセンス条項を確認し、Web サイトで合法的に使用できるようにしてください。

適切なフォントを選択したら、フォント ファイルをアップロードし、CSS スタイルシートでフォントを定義し、それを Web サイト上の目的の要素に適用することで、WordPress サイトにフォントを追加できます。

これを行うには、プラグインを使用する方法と、テーマにコードを手動で追加する方法の 2 つがあります。

Web サイトにカスタム フォントを追加する前に、WordPress テーマに Google フォントが組み込まれているかどうか、および Adob​​e フォントなどのカスタム フォントをアップロードできるかどうかを確認してください。 そうでない場合は、WordPress へのカスタム フォントの追加に進むことができます。

3プラグインを使用してWordPressにカスタムフォントを追加する方法

カスタム フォント プラグインを使用して、WordPress サイトにカスタム フォントを追加できます。

無料で使用でき、制限はありません。 Elementor などの WordPress テーマやページビルダーと互換性があります。

このプラグインを使用すると、Google のフォントでも、他のソースのローカル フォントでも、任意のフォントを Web サイトに追加できます。

3.1 Google フォントを WordPress のカスタムフォントとして追加する方法

Google フォントを追加するには、カスタム フォント プラグインをインストールして有効にする必要があります。

詳細については、WordPress プラグインのインストール方法に関する投稿を参照してください。

アクティブ化したら、以下に示すように、 [外観] → [カスタム フォント]に移動し、 [新しいフォントの追加]ボタンをクリックします。

プラグインを使用して新しいカスタム フォントを追加する

次に、 [Google フォント]タブに移動し、 [フォントの選択] オプションの下のドロップダウン メニューをクリックします。 以下に示すように、Web サイトで使用する Google フォント ファミリーを選択します。

フォントの選択

選択したフォント ファミリが[フォント プレビュー]セクションに表示されます。 フォントの外観をピクセル単位で調整して、好みに完全に一致するようにすることができます。

フォントの外観を調整する

フォント ファミリを選択するには、その横にある[追加]ボタンをクリックします。 選択したフォントが [Google Fonts] セクションに表示され、[追加] ボタンが[削除]に変わります。 これにより、Web サイト用に選択したフォントの管理が簡素化されます。

追加されたフォント

以上です！ Web サイトに Google フォントが正常に追加されました。

カスタム フォント プラグインを使用すると、追加またはアップロードされたフォントはサーバー上にローカルに保存されます。 Web サイトのパフォーマンスを最適化するには、使用する予定のフォントのみを追加してください。 読み込むフォントが多すぎると Web サイトの速度が低下する可能性があるため、少なくとも 2 つの異なるフォントを選択することをお勧めします。

このプラグインを使用して他のソースからカスタム フォントをアップロードする方法について説明します。

3.2カスタムフォントをWordPressにアップロードする

Custom Fonts プラグインを使用すると、Adobe などのソースからカスタム フォントを WordPress サイトにアップロードすることもできます。

これを行うには、 「ローカル フォント」タブに移動します。 「詳細オプション」セクションで、フォントの名前を指定し、フォントのフォールバックを追加し、フォントの表示を調整します。

次に、 「ファイルを選択」フィールドを使用して、外部ソースから取得したフォントをアップロードします。

プラグインは次の形式を受け入れるため、フォントをアップロードするときは、ブラウザでサポートされている形式であることを確認してください。

  • Open Type Fonts (OTF) は、ほとんどのブラウザと互換性のある人気のある Web フォントです。
  • True Type フォント (TTF) はMicrosoft と Apple によって共同開発され、Windows と macOS で広く使用されています。
  • Web Open Font Format (WOFF) は、 W3C が推奨する Web ページ形式です。
  • WOFF 2 はより優れた圧縮能力を備えていますが、Safari および Internet Explorer ではサポートされておらず、Google Chrome、Firefox、または Opera では適切に動作します。

フォントをアップロードすると、プレビュー セクションにプレビューが表示されます。 好みに応じてスタイルと高さを設定できます。

フォントをアップロードする

さらに、別のフォントを同時に追加したい場合は、 「フォントバリエーションの追加」オプションを使用できます。

加えた変更に満足したら、 「フォントを保存」ボタンをクリックしてフォントを Web サイトにアップロードします。

すべてのフォントがサイトに追加されます。

サイトに追加されたフォント

これらのフォントをさらに最適化するには、以下に示すように、設定アイコンをクリックします。

[フォントのプリロード]オプションを有効にすると、選択したフォントをプリロードすることで Web サイトの読み込み速度が向上します。

フォントのプリロード

WordPress ダッシュボードから「外観」→「カスタマイズ」→「タイポグラフィ」に移動して、タイポグラフィを設定できます。

4 WordPress にカスタムフォントを手動で追加する方法

@font-face CSS ルールを使用して、カスタム フォントを WordPress に手動で追加できます。

この方法では、統合するフォントをより詳細に制御でき、比較的簡単です。

概要は次のとおりです。必要なフォントをダウンロードし、WordPress サイトにアップロードして、Web サイトの CSS ファイルに追加します。 段階的に見ていきましょう。

まず、信頼できるソースからサポートされている形式で、選択したフォントをコンピュータにダウンロードします。 必要に応じて、.zip アーカイブを抽出します。

次に、FTP またはファイル マネージャーを介して WordPress サイトに接続し、テーマのディレクトリ (通常は wp-content/messages/your-active-theme にあります) に移動します。

ディレクトリ内のフォントフォルダーを確認します。 存在しない場合は、「fonts」という名前の新しいフォルダーを作成し、フォント ファイルをこのフォルダーにアップロードします。

下の画像では、Honk フォントがアップロードされていることがわかります。

次に、テーマのディレクトリでstyle.cssファイルを見つけて編集し、@font-face ルールを利用します。 または、WordPress ダッシュボードから[外観] → [テーマ ファイル エディター]に移動してアクセスすることもできます。

style.cssセクション内で下にスクロールし、次のコードを挿入して @font-face ルールを宣言します。

 @font-face { font-family: YourFontName; src: url(http://www.yourwebsite.com/wp-content/themes/your-theme/fonts/your-font-file.ttf); font-weight: normal; }

使用したフォントに対応するようにフォント ファミリと URL 値を必ず変更してください。

コードを追加

コードを追加したら、 「ファイルを更新」ボタンをクリックして変更を保存します。

訪問者が Web サイトにアクセスするたびに、font-face コードによってフォントが読み込まれることに注意することが重要です。 ただし、フォントはまだどの要素にも適用されていません。

特定の要素にフォントを割り当てるには、同じ style.css ファイルを編集する必要があります。 たとえば、次のコードは Web サイトのタイトルに「Honk」フォントを適用します。

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

このコードは、クラス「site-title」を持つ「h1」要素のフォント ファミリを指定します。 最初にフォントを「Honk- Regular」に設定し、次に Arial、最後にフォールバック オプションとしてサンセリフを設定します。

これは、ユーザーのデバイスまたはブラウザで「Honk- Regular」が使用できない場合は、代わりに Arial を使用しようとし、それも使用できない場合は、デフォルトで汎用のサンセリフ フォント ファミリが使用されることを意味します。
「Honk- Regular」は、この記事で使用されている「Honk」フォントの特定のフォント スタイルまたは書体です。

5。結論

カスタム フォントを通じて WordPress Web サイトの視覚的な魅力を高めることは、アクセスしやすく創造的なプロセスです。

テーマ設定内の組み込みオプションを使用する場合でも、プラグインを使用する場合でも、Google Fonts やその他の信頼できるフォント リポジトリなどのプラットフォームが提供する柔軟性を利用して、ブランドやデザインの好みに合わせてサイトのタイポグラフィを構築できます。

最適な Web サイト機能を確保するために、カスタム フォントを選択して実装する際には、パフォーマンスとライセンスの側面を忘れずに考慮してください。

適切なアプローチをとれば、カスタム フォントは WordPress サイトを目立たせ、訪問者に永続的な印象を残すための強力なツールになります。

この投稿が気に入ったら、 @rankmathseo をツイートしてお知らせください。