WordPressにカスタムフォントを追加する方法は？
公開: 2020-11-05あなたのウェブサイトのタイポグラフィをカスタマイズすることを学ぶことは、ウェブサイトを作成して実行することのかなり基本的な側面です。 それはあなたのウェブサイトの全体的な感触を変え、訪問者があなたの顧客と対話する方法に大きな違いをもたらすことができます。
したがって、WordPressにカスタムフォントを追加する方法を知る必要があります。 適切なフォントを選択すると、Webサイトの外観が明確になり、ビジュアルブランドを構築でき、読みやすさと訪問者のエンゲージメントが向上します。
オンラインで使用できるフォントは数千あり、その多くは無料です。 この記事では、最も人気のある2つのWebフォントデータベースであるGoogleFontsとAdobeFonts（Typekit Fontsとも呼ばれます）からフォントを追加する方法について説明します。 これらのフォントライブラリには、ダウンロードできる何千ものWebフォントが含まれています。
これらと並んでインターネット上には他にも数え切れないほどのフォントライブラリがあり、それらについても話します。
これらのカスタムフォントをWebサイトに追加する方法は次のとおりです。
目次
- WordPressにカスタムフォントを追加する方法
- 1.プラグインを使用してGoogleFontsを追加します
- 2.コードを使用してGoogleFontsを追加する
- 3. AdobeTypeKitフォントをWordPressに追加します
- その他のカスタムフォントライブラリ
- プラグインを使用して他のカスタムフォントを追加する方法
- 他のカスタムフォントを手動で追加する方法
- 結論
WordPressにカスタムフォントを追加する方法
1.プラグインを使用してGoogleFontsを追加します
GoogleFontsを使用してWordPressWebサイトのコンテンツをスタイル設定する場合は、WordPressカスタマイザーをGoogleFontsデータベースに直接接続する便利なツールがあります。 Easy Google Fontsは無料で、コードを操作しなくてもGoogleFontsを使用できます。
- この方法では、最初にEasy GoogleFontsプラグインをインストールします。 プラグインを設定すると、WordPressカスタマイザーに「タイポグラフィ」という新しいオプションが表示されます（[外観]> [カスタマイズ]）。
2.タイポグラフィオプションに移動すると、カスタマイズ可能なさまざまなデフォルトのコンテンツセクションまたはフォントコントロールが表示されます。 [フォントの編集]をクリックすると、その特定のグループのフォント設定を見つけることができます。
フォント設定は非常に広範囲であり、テキストのほぼすべての側面をカスタマイズして、フォントサイズなどの目的のフォントスタイルを作成できます。 その特定のテキストカテゴリのフォントは、[スタイル]タブの[フォントファミリ]オプションから変更できます。
[外観]タブには、フォントの色、フォントサイズ、線の高さなど、他の一般的なオプションがあります。
[ポジショニング]タブには、[余白]、[パディング]、[境界線]などの詳細なビジュアルコントロールがあります。
3.これで、このプラグインによって提供されるデフォルトのフォントコントロールでは対処できない特定のテキストカテゴリに、Webサイトで特別な注意を払う必要がある場合もあります。 たぶん、すべての見出しに同じタイポグラフィ設定が必要で、1つのカテゴリですべての見出しを制御したい場合があります。 [設定]> [Google Fonts]に移動して、カスタムフォントコントロールを作成できます。
4. [フォントコントロールの管理]タブに移動し、[フォントコントロールの作成]をクリックします。
5.この特定のカテゴリを定義するためのCSSセレクターを提供するように求められます。 次に、[安全なフォントコントロール]をクリックして、新しいカテゴリ/フォントコントロールを作成します。
6.カスタムフォントコントロールは、デフォルトのものとは異なる場所にあります。 WordPressカスタマイザーに戻り、タイポグラフィオプションをクリックします。 デフォルトのタイポグラフィとテーマのタイポグラフィの2つのカテゴリがあります。 カスタムフォントコントロールは、[テーマのタイポグラフィ]オプションの下にあります。
2.コードを使用してGoogleFontsを追加する
- プラグインなしでGoogleFontsをWordPressに追加する場合は、テーマファイルにコードを追加できます。 このための子テーマを作成して、変更が気に入らない場合に変更を元に戻すことができるようにすることをお勧めします。
2. Google FontsのWebサイトにアクセスして、好きなフォントを見つけます。 フォントのページには、各フォントのさまざまなスタイルがあります。 目的のスタイルの[このスタイルを選択]ボタンをクリックします。 選択したフォントは、特別なセクションで使用するために保存されます。 ページの右上には、選択したフォントを表示するためのボタンがあります。 2つのタブがあるサイドバーが開きます。 [埋め込み]タブをクリックします。
3.この埋め込みリンクをコピーして、header.phpファイルの<body>タグの直前に貼り付けます。
4.テーマファイルを操作する煩わしさを処理したくない場合は、テーマファイルにコードを簡単に追加するInsert Headers andFootersと呼ばれる便利なプラグインがあります。 このプラグインは、「ヘッダーとフッターの挿入」というタイトルの設定バーの独自のセクションから使用できます。 [ヘッダーのスクリプト]ボックスにコードを貼り付けるだけです。
3. AdobeTypeKitフォントをWordPressに追加します
アドビには、無料版と有料版のカスタムフォントの印象的なライブラリがもう1つあります。 フォントの使用を開始する前に、Adobe FontsWebサイトのアカウントが必要です。 [フォントの参照]ページから、使用可能なフォントの参照を開始できます。
- ウェブサイトにログインしたら、</>ボタンをクリックしてお好きなフォントを使用できます。
2.埋め込みリンクを取得するには、Adobe FontsでWebプロジェクトを作成し、選択したフォントをプロジェクトに追加する必要があります。
3. Google Fontsのプロセスと同様に、この埋め込みリンクをテーマのheader.phpファイルの<body>タグの前に貼り付ける必要があります。
4. Insert Headers and Footersプラグインを使用すると、テーマファイルを直接操作することを回避できます。 設定バーの[ヘッダーとフッターの挿入]オプションに移動し、埋め込みコードを[ヘッダーのスクリプト]ボックスに貼り付けるだけです。 これにより、選択したTypeKitフォントがインポートされます。
その他のカスタムフォントライブラリ
GoogleFontsとAdobeFontsは、Webフォントで最も人気のあるデータベースの一部です。 ただし、WordPressWebサイトに適切なフォントをダウンロードするために探索できるフォントライブラリは他にもたくさんあります。 探索できるものは次のとおりです。
- TemplateMonster
- フォントリス
- Fontspring
- 1001フリーフォント
- フォントフリーク
- 抽象フォント
- MyFonts
プラグインを使用して他のカスタムフォントを追加する方法
カスタムフォントを手動で追加する手間を省くことができるUseAnyFontと呼ばれる便利なプラグインがあります。 ダッシュボードから直接新しいフォントを追加し、カスタムフォントを目的の要素に割り当てることができるシンプルなインターフェイスを提供します。
他のカスタムフォントを手動で追加する方法
必要なフォントを手動で追加する場合は、フォントファイルをWordPressディレクトリにアップロードする必要があります。 新しい外観が気に入らない場合や、不要な変更によってWebサイトにバグが発生した場合に備えて、セキュリティのレイヤーを構築するために、この子テーマを使用します。 子テーマを使用すると、変更を簡単に元に戻すことができます。
TemplateMonsterなどのフォントライブラリから目的のフォントをダウンロードします。 次に、 wp-content / themes / your-theme / fontsに移動し、FTPクライアントを使用してFontsフォルダーにアップロードします。 Fontsフォルダーがない場合は、作成します。
フォントファイルがアップロードされたら、スタイルシートを使用してフォントをインポートする必要があります。 次のコードをstyle.cssファイルに追加します。
@ font-face {
font-family：カスタムフォント;
src：url（http://yourwebsite.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf）;
フォントの太さ：通常;
}
font-familyをインポートするフォントの名前に置き換え、URLをWebサイトのURLに置き換える必要があります。
結論
上記の手順に従うことで、最小限の手間でWordPressWebサイトにカスタムフォントを簡単に追加できます。 GoogleFontsおよびAdobeFontsデータベースからだけ使用できる何千ものWebフォントがあります。 カスタムフォントを正しく選択することで、Webサイトはさまざまな魅力を獲得し、訪問者をより引き付け、トピックに関連するより優れた美学を生み出すことができます。