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

公開: 2019-07-09

あなたのウェブサイトを群衆から本当に目立たせたいなら、カスタムフォントを使うことはあなたがこれを達成するのを助けるでしょう。何千もの美しいカスタムフォントから選択できます。プロジェクトに適したフォントを選択することで、独自のだけでなく、スタイルやブランドを反映したWebサイトを作成できます。では、WordPressにカスタムフォントをどのように追加しますか？

この記事では、カスタムフォントをWebサイトに適用するために知っておく必要のあるすべてのことを説明します。これも：

カスタムフォントの場所
プラグインEasyGoogleFontsを使用してウェブサイトにGoogleFontsを追加する方法
ウェブサイトに手動でGoogleFontsを追加する（プラグインは必要ありません）
WordPressへのAdobeフォントの追加
Webスペースにカスタムフォントを追加する方法

始める準備はできましたか？

カスタムフォントはどこにありますか？

現在、多くのプレミアムWordPressテーマには、多数のカスタムフォントが付属しています。ただし、これらは多くの場合、テーマの肥大化を増加させ、Webサイトの読み込み時間に予想以上の影響を与える可能性があります。また、実際にはせいぜい2、3のカスタムフォントしか使用していないため、テーマが提供するフォントの大部分は必要ありません。

したがって、軽量のWordPressテーマを選択することをお勧めします。これにより、必要に応じてカスタムフォントを追加できます。 Webサイトに適したカスタムフォントを見つけることができる場所はたくさんあります。見てみましょう…

Google Fonts –最も人気のある選択肢であるGoogle Fontsは、135以上の言語で使用できる900以上のオープンソースデザイナーフォントの無料ディレクトリを提供しています。これらのフォントはすばやく閲覧でき、Webデザインプロジェクトにシームレスに統合できます。
Adobe Fonts（以前はTypekitと呼ばれていました）– Typekitはサービスの無料バージョンとプレミアムバージョンの両方を提供し、現在はAdobe Fontsとしてブランド名が変更されていますが、このリソースにアクセスするには有料のAdobe CreativeCloudパッケージにサインアップする必要があります。何千ものフォントから選択でき、すべてのフォントは個人用および商用用にライセンスされています。また、プロジェクトをテーマにしたフォントパックから選択することもできます。これは、デザインに目がない人に最適です。
Font Squirrel – Font Squirrelライブラリには、無料フォントとプレミアムフォントが混在しており、後者は1回限りの購入として購入できます。繰り返しになりますが、何千もの高品質フォントから選択できます。その大部分は無料で商用ライセンスが付与されています。
Fonts.com – 150,000を超えるデスクトップおよびWebフォント製品を提供するFonts.comには、プレミアムカスタムフォントの印象的なコレクションが含まれています。 Font.comブログには、活版印刷のヒントやテクニックを共有する興味深い記事の品揃えもあります。
FontPair –他のリソースとは少し異なるエクスペリエンスを提供するFontPairは、Google Fontsのフォントを組み合わせて、Webサイトに適したフォントの組み合わせを見つけるのに役立ちます。

これで、カスタムフォントの場所がわかりました。次に、WordPressWebサイトにGoogleFontsを追加する方法を見てみましょう。

プラグインを使用してWordPressにGoogleFontsを追加する方法EasyGoogle Fonts

Google Fontsはカスタムフォントの最も人気のあるリソースであるため、このライブラリからWebサイトにフォントを追加する方法を見ていきます。これを行うにはいくつかの方法がありますが、最も速くて簡単なオプションは、WordPressプラグインのEasy GoogleFontsを使用することです。

Easy Google Fontsは無料のWordPressプラグインで、コード行に触れることなく、WordPressWebサイトにカスタムフォントを挿入できます。このプラグインはWordPressカスタマイザーと統合されているため、ページを更新しなくても、WebサイトのフロントエンドにGoogleフォントをリアルタイムで挿入して使用できます。

それでは、このプラグインをインストールして使用する方法を見てみましょう。

ステップ1：Easy GoogleFontsをインストールする

Easy Google Fontsの使用を開始するには、WordPressダッシュボードを開き、メニューから[プラグイン]> [新規追加]を選択します。

次に、検索機能にEasy Google Fontsと入力し、プラグインを取得したら、[インストール]> [アクティブ化]をクリックします。

これで、WordPressメニューの[設定]の下にEasy GoogleFontsが表示されます。

ステップ2：WordPressカスタマイザーでフォントを編集する

Easy Google Fontsをインストールしたら、WordPressメニューから[外観]> [カスタマイズ]を選択します。これで、Webサイトがフロントエンドで開き、タイポグラフィセクションがカスタマイザーに追加されていることがわかります。

タイポグラフィをクリックします。 次に、カスタムGoogleフォントを適用するWebサイトのさまざまな領域（段落、ヘッダー2、ヘッダー3など）を選択できます。

編集するセクションの下で、[フォントの編集]をクリックします。次に、使用するフォントを選択できます。各フォントがWebサイトで直接どのように表示されるかをプレビューできます。

フォントの種類を変更できるだけでなく、色、サイズ、位置などを変更することもできます。新しいフォントに満足したら、[公開]をクリックします。

ステップ3：カスタムフォントコントロールを作成する

Easy Google Fontsのデフォルトのコントロールを使用すると、段落セクションとヘッダー1〜6のフォントを変更できます。ただし、テーマのすべての要素がデフォルトのフォントコントロールで管理できるわけではありません。

テーマの別の要素（段落やヘッダー以外）を変更する場合は、独自のカスタムフォントコントロールを作成する必要があります。 Easy Font Controlを使用すると、これを簡単に行うことができますが、CSSセレクターの基本的な理解が必要です。

カスタムフォントコントロールを追加するには、WordPressダッシュボードから[設定]> [Googleフォント]を選択します。次に、[フォントコントロールの編集]タブで、新しいフォントコントロールグループに適切な名前を付け、[フォントコントロールの作成]を選択します。ここでは、ブロッククォートのフォントコントロールを作成します…

[ CSSセレクターの追加]で、管理する要素のCSSセレクターを追加します。必要に応じて、複数の要素を追加できます。次に、[フォントコントロールの保存]を選択します。

Webサイトのフロントエンドにあるカスタマイザーの[タイポグラフィ]の下に、新しいカスタムコントロールにアクセスできる[テーマタイポグラフィ]オプションがあります。

これで、特定のカスタム要素の新しいカスタムフォントを選択し、その他の外観と位置の設定を変更できます。

Easy Custom Fontsは、GoogleからWordPressにカスタムフォントを追加したい人にとって素晴らしいオプションです。ただし、必要に応じて、プラグインを使用せずにコードのみを使用して、手動でGoogleFontsをウェブサイトに追加することもできます。これを行う方法を見つけましょう…

WordPressにGoogleフォントを手動で追加する方法（プラグインは必要ありません）

Google FontsをWordPressに手動で追加したい場合は、コーディングの非常に基本的な知識が必要になります。

ステップ1：GoogleFontを選択する

開始するには、Google Fontsを開き、Webサイトに追加するカスタムフォントタイプを選択します。

次に、フォントのページで、 [このフォントを選択]をクリックします。ここでは、フォントIndieFlowerを選択しました。

ポップアップが画面に表示されます。選択したフォントに応じて、フォントの太さやスタイルのカスタマイズオプションにアクセスしたり、埋め込み情報を表示したりできます。

ステップ2：カスタムフォントのコードをWordPressWebサイトに埋め込む

次に、埋め込みコード（上記のポップアップを参照）をコピーして、WordPressテーマの<head>セクションに貼り付ける必要があります。これを行う最も簡単な方法は、無料のWordPressプラグインのInsert Headers andFootersをインストールすることです。このプラグインを使用すると、テーマファイルを編集しなくても、Webサイトにコードをすばやく追加できます。

インストール後、WordPressダッシュボードから[設定]> [ヘッダーとフッターの挿入]を選択して、プラグイン設定を開きます。次に、GoogleFontsの埋め込みコードをヘッダーセクションに追加する必要があります。

同様に、必要に応じて、子テーマのheader.phpファイルを編集できます。

ステップ3：CSSを使用して新しいフォントを適用する

カスタムフォントのHTMLコードをWebサイトに追加すると、CSSを使用して新しいカスタムフォントを適用できるようになります。 Google Fontsポップアップには、新しいフォントに固有のCSSルールがあります。

Webサイトのライブ側のカスタマイザーに戻り、[追加のCSS]を選択します。ここにCSSコードを入力して、サイトのフォントをカスタマイズできます。以下に、ヘッダー2と段落セクションにインディーフラワーCSSコードを適用したことがわかります…

カスタマイザーはフォントの変更をリアルタイムで表示します。結果に満足したら、[公開]をクリックします。

WordPressにAdobeフォントを追加する方法

Adobe Premium Creative Cloudパッケージにサインアップしている場合は、そのカスタムフォントをWordPressWebサイトに追加できます。このプロセスは、サイトにGoogleFontsを手動で追加するプロセスと非常によく似ています。簡単に見てみましょう。

ステップ1：Adobeフォントを選択する

まず最初に、アドビの豊富なフォントライブラリを参照し、プロジェクトに適合するフォントを選択する必要があります。選択したら、 </>アイコンをクリックして、フォントを新しいWebプロジェクトに追加します。

Webプロジェクトに名前を付けるか、チェックボックスを使用して含めるフォントの太さとスタイルを選択するように求められます。次に、[プロジェクトの作成]を選択します。

ステップ2：AdobeFontのコードをWordPressWebサイトに埋め込む

次のステップは、Adobeが選択したフォント用に提供するコードをWordPressWebサイトに埋め込むことです。

これは、GoogleFontsコードを埋め込むのとまったく同じプロセスに従います。コードをWebサイトの<head>タグに埋め込むか、WordPressプラグインのInsert Headers and Footersを使用するだけです（前述のとおり）。

ステップ3：CSSを使用して新しいフォントを適用する

繰り返しになりますが、Google Fontsと同様に、CSSルールを使用して新しいAdobeカスタムフォントを適用できるようになりました。 AdobeダッシュボードのWebプロジェクトページには、選択したフォントタイプごとに、CSSフォントファミリ名、フォントスタイル、および数値の太さが一覧表示されます。

WordPress Webサイトに戻ると、これらのCSSルールはカスタマイザー内の追加CSSで使用できます。

これで、非常に人気のある無料のGoogleFontsと印象的なプレミアムリソースのAdobeFontsを使用してWordPressにカスタムフォントを追加する方法について説明しました。

ただし、ここで説明する最後のオプションでは、サイトのサーバーにアップロードすることで、任意のカスタムフォントをWebサイトに追加できます。詳細を調べましょう。

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

Webスペースにカスタムフォントを追加するのは比較的簡単ですが、フォントをWebサイトに適用するには、CSSの基本を理解する必要があります。

ステップ1：カスタムフォントをダウンロードする

この記事の冒頭で述べたように、Webサイトで使用する無料またはプレミアムのカスタムフォントを選択できるリソースは多数あります。サーバーに追加するときにカスタムフォントを選択するときは、それを使用する権利があり、ダウンロード可能であることを確認してください。

ここでは、SquirrelFontsから無料のカスタムフォントMilkshakeをダウンロードしました。

カスタムフォントをWebフォント形式でダウンロードすることが重要です。ウェブフォントコンテナ形式のWOFFは、最もクロスブラウザのサポートを享受していますが、デバイス間でユーザーに一貫したエクスペリエンスを提供するために、複数の形式を提供することをお勧めします。

カスタムフォントを別の形式に変換する必要がある場合、SquirrelFontは無料のWebfontGeneratorツールを提供します。

ステップ2：カスタムフォントをサーバーにアップロードする

次のステップは、カスタムフォントをサーバーにアップロードすることです。これを行うには、サイトのcPanelでファイルマネージャーを開きます。

次に、アクティブなテーマフォルダー内に、 Fontsという名前の新しいフォルダーを作成し、ここにカスタムフォントをアップロードします。

フォントの形式が複数ある場合は、それらすべてをFontsフォルダーにアップロードします。これで、カスタムフォントがWebスペースに追加されました。

ステップ3：CSSを使用してカスタムフォントをWebサイトに適用する

次に、カスタムフォントをWebサイトに適用する必要があります。まず、テーマのスタイルシートにフォントをロードする必要があります。これを行うには、WordPressカスタマイザーを開き、[追加のCSS]の下に次のコードを追加します。

 @ font-face {
    フォントファミリー：ミルクセーキ;
    src：url（ "https://jonesblogs.com/wp-content/themes/beautiful-pro/fonts/milkshake.woff"）
         format（ "woff"）;
}

重要なのは、フォント名とURLを必ず変更することです（サーバー上のフォントファイルのURLをコピーしてください）。

次に、CSSルールを使用して、サイトのフォントを更新できます。カスタムフォントをヘッダー3と段落セクションに適用する方法の例を次に示します。

新しいカスタムフォントがWebサイトでどのように表示されるかを確認したら、[公開]をクリックします。

WordPressにカスタムフォントを追加する方法に関する最終的な考え

ご覧のとおり、美しく注目を集めるカスタムフォントをお探しの場合は、プロジェクトに最適なフォントを見つけるためのリソースが多数あります。さらに、WordPressにカスタムフォントを正常に追加する方法についての知識が身に付きました。では、どのカスタムフォントを選択しますか？

WordPressにカスタムフォントを追加する方法について質問がありますか？ 以下のコメントで質問してください…