カスタムWordPressフォントを追加する方法（そしてペアになるフォントを選択する）

公開: 2019-04-04

独自のカスタムWordPressフォントをサイトに追加する方法をお探しですか？

WordPressテーマには、選択できる独自のフォントセットが付属している可能性がありますが、オプションがかなり制限される可能性があるため、代わりに独自のWordPressフォントを追加することをお勧めします。

この投稿では、WordPressでフォントをアップロードして使用する方法をいくつかの異なる方法で学習します。

独自のWordPressフォントを使用するというアイデアに慣れていない場合は、カスタムフォントの場所と、それらをペアリングする方法についての簡単な入門書から始めます。

次に、以下からカスタムWordPressフォントを追加する方法を説明します。

Google Fonts
Adobe Fonts（Typekit）
文字通りどこでも！（フォントファイルをアップロードし、CSS3 @ font-faceを使用して）

チュートリアルに直接ジャンプするには、このリンクをクリックしてください。

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

カスタムWordPressフォントを見つけるのに最もよく知られている場所は、間違いなくGoogleFontsです。 Google Fontsには、900を超えるフォントのリポジトリがあります。これらはすべて無料で、GoogleのCDNのおかげでWordPressサイトに非常に簡単に統合できます。

Google Fontsに続いて、もう1つのよく知られたオプションはAdobe Fonts（以前はTypekitと呼ばれていました）です。 Adobe Fontsは、AdobeのCreative Cloudサブスクリプションの一部として追加料金なしで含まれていますが、非サブスクライバーは利用できません。

最後に、無料フォントとプレミアムフォントを集約した他の多くのサイトを見つけることができます。私たちのお気に入りの2つは次のとおりです。

Font Squirrel –商用利用が100％無料のフォントを収集します。
Fonts.com –プレミアムフォントの膨大なコレクションがあります。

あなたのサイトが素晴らしく見えるようにフォントをペアリングする方法

通常、WordPressサイトでは単一のフォントを使用しません。代わりに、ほとんどのサイトはフォントのペアを使用して、より興味深いデザインを作成し、コンテンツの差別化を支援しています。

ただし、2つのフォントをランダムに一緒に投げたくない場合は、あまり熱く見えない可能性があります。

代わりに、連携して機能する2つのフォントが必要です。これは、デザイナーでない場合、理解するのが難しい場合があります。

助けるために、あなたのためにフォントペアを提案するたくさんの素晴らしいサイトがあります。たとえば、絶対に気に入っているフォントが1つ見つかった場合は、これらのサイトの1つを使用してそのフォントのペアを見つけることができます。私たちのお気に入りのいくつかは次のとおりです。

FontPair
Fontjoy
Typ.io

2つのフォントしか使用できないという規則はありませんが、WordPressフォントの数が多すぎることに注意する必要があります。混沌としたデザインを作成する可能性を超えて、あまりにも多くのカスタムフォントを使用すると、サイトの読み込み時間が遅くなる可能性もあります。

カスタムWordPressフォントを追加する方法：ステップバイステップガイド

さて、楽しい部分です。ここでは、独自のカスタムWordPressフォントの使用を開始する方法を説明します。

フォントをどこから入手したいかに応じて、ここで取ることができるいくつかのルートがあります。

これが私たちがカバーする3つの方法です。ここでも、リンクをクリックして特定のチュートリアルに直接ジャンプできます。

WordPressにGoogleFontsを追加する（プラグイン、手動、またはローカルホスティング方法）
WordPressにAdobeFonts（Typekit）を追加する
CSS3 @ font-faceを使用して、WordPressで任意のフォントをアップロードおよび追加します

WordPressにGoogleFontsを追加する方法

Google FontsはカスタムWordPressフォントの最も人気のあるソースであるため、WordPressにGoogleFontsを追加する3つの異なる方法について説明します。

プラグインを使用してGoogleのCDNからGoogleFontsを追加する
GoogleのCDNからGoogleFontsを手動で追加する
プラグインを使用してWordPressでローカルにGoogleFontsをホストする

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

Google Fontsは人気があるため、WordPressにGoogle Fontsを簡単に追加できる高品質のプラグインをいくつか見つけることができます。私たちのお気に入りは、次の理由からEasy GoogleFontsです。

無料
軽量
使いやすい

プラグインをインストールしてアクティブ化したら、WordPressダッシュボードの[外観]→[カスタマイズ]に移動して、リアルタイムのWordPressカスタマイザーを起動します。

次に、[タイポグラフィ]オプションをクリックして、 GoogleFontsオプションを選択します。

そこから、オプションを使用して、サイトの各要素のカスタムフォントを選択できます。

たとえば、段落フォントを変更すると次のようになります。

プラグインでは、フォント自体を選択するだけでなく、次のものをカスタマイズすることもできます。

フォントの太さ
テキスト装飾
色

小さなCSSの使い方を知っている場合は、プラグインのフォントコントロール機能を使用して、特定の要素をグループ化することもできます。たとえば、ヘッダーセレクターを組み合わせて、すべてのヘッダーを一度にターゲティングできます。

これを設定するには、 [設定]→[Google Fonts]に移動し、特定のCSSセレクターを対象とする新しいフォントコントロールを作成します。

プラグインなしでWordPressにGoogleフォントを追加する方法

Googleはすべてのフォントを独自のCDNでホストしているため、WordPressに手動でGoogleフォントを追加することも非常に簡単です。

基本的に、フォントファイルをサーバーにアップロードする代わりに、GoogleがホストするCDNにリンクするだけで、Googleがフォントの提供を処理します。

パフォーマンス上の理由からこれを好まない人もいます。必要に応じて、次のセクションでGoogleFontsをローカルでホストする方法を共有します。

開始するには、Google Fonts Webサイトを使用して、追加するフォントを選択する必要があります。

この例では、 Robotoを使用するとします。

フォントのページに移動し、[ +このフォントを選択]をクリックします。

これにより、右下隅にウィンドウが追加されます。クリックしてそのウィンドウを展開します。

追加のフォントの太さ（太字や斜体など）を選択する場合は、[カスタマイズ]タブに移動できます。使いやすさとパフォーマンスのバランスをとるために、絶対最大値で3つのフォントの太さを選択することをお勧めします。

通常
イタリック
はげ

最高のパフォーマンスが必要な場合は、使用する数を減らすこともできます。

選択したら、[埋め込み]タブに戻り、[埋め込みフォント]コードをコピーします。

次に、このコードをWordPressテーマの<head>セクションに追加する必要があります。これは次の方法で実行できます。

子テーマのheader.phpファイルを直接編集します（子テーマを使用していることを確認してください。そうしないと、テーマを更新したときにカスタムフォントが表示されなくなります）
ヘッダーやフッターの挿入などの無料のプラグインを使用する

コードを追加したら、CSSでGoogleFontsの使用を開始できます。

Google FontsのWebサイトに戻ると、Googleは実際に使用する必要のあるCSSルールを通知します。

たとえば、h2タグで新しいRobotoフォントを使用するには、[外観]→[カスタマイズ]→[追加のCSS]に移動して、次のスニペットを追加します。

h2 {

font-family： 'Roboto'、sans-serif;

}

プラグインを使用してWordPressでローカルにGoogleFontsをホストする方法

これがGoogleFontsの最後の方法です！

一部の人々は、GoogleのCDNからロードするのではなく、ローカルでGoogleFontsをホストすることを好みます。つまり、「https://fonts.googleapis.com/css?family=Roboto:400,700」のようなリンクからファイルをロードするのではなく、独自のサーバーでファイルをホストできます。

これを行う最も簡単な方法は、CAOS forWebfontsと呼ばれる無料のプラグインを使用することです。

プラグインをインストールしてアクティブ化したら、 [設定]→[ Webフォントの最適化]に移動して、サーバーにダウンロードするフォントを選択できます。

それが済んだら、CSSでフォントの使用を開始できます（前の方法に従っている場合と同じように）。

WordPressでAdobeFonts（Typekit）を追加する方法

WordPressでAdobeFontsを使用したい場合は、基本的に手動のGoogleFontsの方法と同じ手順に従うことができます。 Adobe Fontsサービスは、CreativeCloudサブスクリプションの一部としてのみ利用可能であることを忘れないでください。

開始するには、Adobe Fonts Webサイトを使用してフォントを選択し、 Webプロジェクトを作成する必要があります（詳細な手順はこちら）。

[ Webプロジェクトにフォントを追加]ウィンドウで、含めるフォントを選択できます。

次に、Adobeは、GoogleFontsと同じように埋め込みコードを提供します。

その埋め込みコードを取得し、子テーマのheader.phpファイルまたはInsert Headers andFootersなどのプラグインを使用してサイトに追加します。

CSSファイルにリンクしたら、アドビが提供するCSSを使用して、サイトのCSSセレクターへのフォントの適用を開始できます。

WordPressで@ font-faceを使用する方法

最後に、最後に紹介する方法は、WordPressで@ font-faceを使用する方法です。このメソッドの良いところは、文字通り、あらゆるソースのあらゆるフォントファイルで機能することです。

基本的に、フォントファイルをダウンロードして使用する権限がある限り、CSS3 @ font-faceで処理できます。

開始するには、お好みのソースからフォントファイルをダウンロードします。この例では、アレックス・ブラシと呼ばれるフォントのリスから無料でフォントを使用します。

可能であれば、ブラウザ間の互換性を最大限に高めるために、ファイルを.woffまたは.woff2ファイル形式でダウンロードしてみてください。それが不可能な場合は、フォントを別の形式でダウンロードしてから、無料のFontSquirrel WebfontGeneratorツールを使用して.woffに変換できます。

次に、FTPまたはcPanelファイルマネージャーを介してWordPressサイトのサーバーに接続します。それで…

アクティブなテーマまたは子テーマのディレクトリ内にfontsという名前の新しいフォルダを作成します（一部のテーマにはすでにfontsフォルダがある場合があります。その場合はスキップできます）。
フォントファイルをfontsフォルダーにアップロードします。 .woff形式と.woff2形式の両方をアップロードできます

ファイルをアップロードしたら、WordPressダッシュボードで[外観]→[カスタマイズ]→[追加のCSS]に移動します。

まず、 @ font-faceを使用してフォントを追加する必要があります…

これを行うには、フォントの名前をfont-familyとして入力し、サーバー上のフォントファイルに直接URLをURLとして追加します。 AlexBrushの例は次のようになります。

@ font-face {

フォントファミリー：AlexBrush;

src：url（http://easy-whale.w6.wpsandbox.pro/wp-content/themes/twentynineteen/fonts/alexbrush-regular-webfont.woff）;

フォントの太さ：通常;

}

それが済んだら、CSSを使用してフォントファミリーを適用できます（ @ font-faceで登録した名前で）。たとえば、<h2>ヘッダーにAlexBrushフォントを使用すると次のようになります。

以上です！このCSS3 @ font-faceメソッドは、文字通りすべてのフォントファイルに使用できます。

カスタムWordPressフォントに関する最終的な考え

WordPressテーマに使用したいフォントがない場合でも、慌てる必要はありません。独自のカスタムWordPressフォントを追加するためのオプションがたくさんあります。

開始する最も簡単な方法は、GoogleFontsでホストされている無料フォントまたはAdobeFontsでホストされているプレミアムオプションを使用することです。

ただし、これらのサービスに限定されるわけではありません。CSS3@ font-faceを使用すると、文字通り任意のフォントファイルをWordPressにアップロードして、テーマで使用を開始できます。

今すぐそこに出て、独自のフォントペアを作成してください！