ウェブサイト検索

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

標準フォントを使用するとブログが退屈になるのはなぜでしょうか?あなたのブログで、あなたの活気に満ちた個性や、さまざまなカスタム フォントを使って取り上げるトピックについて語ってみましょう。カスタム フォントは、あなたのブログを他のブログよりも美しく見せることができる優れた機能です。

それに直面しよう;私たちは皆、適切なフォントを使用したブログやサイトが大好きです。これらはサイトを装飾するだけでなく、ユーザーをコンテンツに引き付けるのにも役立ちます。ただし、標準の WordPress フォントの選択は限られており、使用しているテーマによって異なります。幸いなことに、それらは手動または特殊なプラグインを使用して追加できるということです。

ここで、WordPress 用のカスタム フォントをどこで入手するかと、WordPress サイトにカスタム フォントをインストールする方法という 2 つの疑問が生じます。

確認してみましょう。

カスタム フォントを使用する必要があるのはなぜですか?

Times New Roman と Georgia が Web サイト上のテキストの唯一のフォントと考えられていた時代は終わりました。ここ数年、Google Fonts などのフォントの登場により、フォント空間は完全に変化しました。

現在、インターネット上には、何百もの無料のフォント、情報およびトレーニング補助、デザイン用に設計されたリソースが用意されています。 Adobe Illustrator、Photoshop、その他の従来のアプリケーションとは異なり、WordPress ではデフォルトではフォントを完全に制御できません。カスタム フォントのサポートと使用を選択するのは一部のテーマのみです。

したがって、この投稿では、適切なカスタム フォントを見つける方法と、WordPress サイトでそれらを使用する方法を学びます。

カスタム フォントを使用することの重要性

なぜフォント、単語間のインデント、行間、文字間隔、フォントの彩度などを変更する必要があるのでしょうか?それはともかく、 いくつかの研究では<i>タイポグラフィーが読解力を向上させることが証明されています。

多くはフォントの構造に依存します。意識的および潜在意識のレベルでは、誰もが Web ページのコンテンツをデザインによって評価します。

<i>フォント デザインは、読者が注意を払わなくても影響を与えます。フォントデザインを放棄するということは、開発そのものを放棄することを意味します。読み手の気分次第です。フォントによって読みやすくなったり、ユーザーがページから離れてしまったりします。

すべての Web ブラウザには、デフォルトのフォントのセットが含まれています。これは、ページの CSS でフォントが指定されていない場合は、標準バージョンが使用されることを意味します。デフォルトのフォントはいつでも使用できますが、ユーザーの作業が複雑になります。そのため、カスタム フォントを使用することが重要です。テーマにフォントを変更するオプションがない場合は、多くの Web サイトやツールが役に立ちます。

Google フォントの代替案

無料のGoogleフォントについては多くの人が知っています。美しいフォントを見つけることができるサイトは他にもたくさんあります。一部は個人使用であれば無料です。商用利用が必要な場合はライセンスが必要です。 Google FontsとAdobe Edge Fontsは無料です。それが、それらがそれほどユニークではない理由です。そして、これは私たちには似合わないのです。

無料および商用利用可能なフォントを見つけるためのその他のリソースをいくつか紹介します。

  1. TemplateMonster — TemplateMonster マーケットプレイス Web サイトでは、Web デザインに必要なものがすべて見つかります。個人使用のための低価格のフォントやフォント パックも多数あります。また、これらは ONE Web 開発キットでも提供されます。コレクションは膨大でクリエイティブです。パンフレットやフレームに表示されているすべてのフォントを選択しやすくします。すべてのフォントには商用ライセンスも付いています。
  2. MyFonts — MyFonts は現在、世界最大のフォントのセレクションを提供しています。ただし、ここの価格もより高いセグメントにあります。したがって、予算が限られている場合は、あなたには向かないかもしれません。
  3. FontSpring — Fontspring は商用目的で派手なフォントを販売しています。しかし、ほとんどの家庭には、個人的な目的で使用できるフリーフォントが 1 ～ 2 個あります。さらに、無料のフォントを含む別のセクションがあります。コレクションはヴィブランです。ただし、ダウンロードする前に、特定のフォントのライセンス情報を注意深く調べる必要があります。
  4. Cufonfonts — これは、さまざまなフォントの広範なコレクションでもあります。どれかを選択すると、それに関する詳細情報が記載されたページが表示されます。無料のフォントはたくさんあり、個別のセクションに分かれています。 CufonFonts のソート システムは非常に柔軟で便利です。また、Web フォントのサポートも含まれています。
  5. Dafont — 3,500 個の無料フォントのアクセス可能なコレクションです。それらのほとんどは個人使用のみを目的として設計されています。 DaFont の優れた機能はカテゴリ システムです。コミック、ビデオゲーム、ビンテージのスタイルのフォント、または日本語の文字として様式化されたフォントを選択できます。

どのフォントも美しいので、フォントの選択は非常に魅力的です。しかし、たくさん選んではいけないのです。 <i>サイト上で使用するフォントは 2 つまでにしてください。そうすれば、Web サイトの外観に一貫性が生まれます。フォントを選択したら、使用する各スタイル (標準、太字、斜体など) のファイルを必ずダウンロードしてください。

サイトに適切なフォントを選択したので、それを追加する方法を見てみましょう。

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

WordPress サイトにフォントを追加するには、いくつかの方法があります。

  1. プラグイン: この場合、プロセスを容易にするためにさまざまな WordPress プラグインが使用されます。
  2. 手動: この方法を使用するには、ダウンロードしたフォントをサイトにアップロードし、CSS ファイルを編集する必要があります。
  3. テーマ: 多くの人気のあるテーマには、フォントをカスタマイズするための組み込みオプションが含まれています (注 – プロセスは使用しているテーマによって異なるため、このオプションについては説明しませんが、高品質のプレミアム テーマTotal WordPress テーマのように、Total にカスタム フォントを追加するためのこのガイドなど、簡単にフォローできるオンライン ドキュメントが提供されます)

オプション 1 – プラグインを使用して WordPress フォントを変更する

グローバルな変更を気にしない場合は、サイトのフォントを変更する WordPress プラグインをインストールできます。

カスタムフォントプラグインの特徴

オープンソース ソフトウェアにはコミュニティの利益につながる利点があり、WordPress にもこの利点があります。いくつかの WordPress プラグインを使用すると、カスタム フォントを追加できます。たくさんあるプラグインの中から適切なプラグインを選択するにはどうすればよいでしょうか?カスタム フォント プラグインの機能は何ですか?

考慮すべき点がいくつかあります。

  • カスタムフォントを使用する機能
  • 複数のフォントを使用する機能
  • ターゲットヘッダーとコンポーネント
  • ボーナス: ビジュアルエディターからフォント設定を変更できる機能

それだけです。リストの最初の機能は非常に重要です。 DaFont、Font Squirrel などのサイトからいつでもフォントをダウンロードできますが、WordPress にアップロードできる必要があります。

カスタム フォントをアップロードできる WordPress 用のプラグインをいくつか見てみましょう。

カスタム フォント アップローダー

このプラグインを使用すると、Google フォントをダウンロードして、ブログのさまざまな要素に適用できます。たとえば、記事やページの見出しや本文などです。

任意のフォントを使用する

これは、フォントをダウンロードし、ビジュアル エディターから直接使用するための便利なインターフェイスを提供する WordPress プラグインです。 WordPress ビジュアルエディターは、テキストのフォントを自動的に変更できます。このプラグインは、カスタム フォントを追加するプロセスをより管理しやすくするいくつかの機能を提供します。

WP Google フォント

WP Google Fonts を使用すると、Google フォント カタログを使用できます。このプラグインの驚くべき利点の 1 つは、1000 近くの Google フォントが追加されていることです。 Google フォントを手動でキューに入れることもできますが、ほとんどのユーザーにとってプラグインを使用する方がはるかに簡単です。

プラグインを使用してフォントをインストールするにはどうすればよいですか?

たとえば、WP Google Fonts を考えてみましょう。公式 WordPress リポジトリからこのプラグインをインストールし、Google Fonts セクションを開くだけです。

ここに Google フォント コントロール パネルが表示されます。フォントを選択し、フォント スタイルやフォントが適用される要素などのさまざまな設定を変更します。

オプション 2 – WordPress カスタム フォントを手動でインストールする

@font-face ディレクティブを使用すると、1 つまたは複数のフォントをサイトに接続できます。しかし、この方法には長所と短所があります。

長所:

  • CSS を介して、ttf、otf、woff、svg などのあらゆる形式のフォントを接続できます。
  • フォント ファイルはサーバー上に配置されます。サードパーティのサービスに依存することはありません。

短所:

  • 各スタイルに正しいフォント接続を行うには、個別のコードを登録する必要があります。
  • CSS の知識がないと、混乱しやすくなります。

ただし、 完成したコードを<i>単純にコピーでき、値を指定する必要がある場合は、実際の問題ではありません。

注: 開始する前に、サイトの子テーマを必ず作成してください。こうすることで、コアテーマをそのまま残したまま、子テーマにすべての編集を加えることができるため、将来必要に応じて簡単に更新できます。

ステップ 1: 「フォント」フォルダーを作成する

子テーマ内で、wp-content/主題/your-child-theme/fonts の下に新しい「フォント」フォルダーを作成します。

ステップ 2. ダウンロードしたフォント ファイルを Web サイトにアップロードします

これは、ホスティングのコントロール パネルまたは FTP 経由で行うことができます。

すべてのフォント ファイルを、新しく追加したフォント フォルダー (作成したwp-content/主題/your-child-theme/fonts) に追加します。

ステップ 3. 子テーマのスタイルシートを介してフォントをインポートする

子テーマの style.css ファイルを開き、CSS ファイルの先頭 (子テーマのコメントの後) に次のコードを追加します。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont.eot');
src: url('fonts/WebFont.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont.woff') format('woff'),
url('fonts/WebFont.ttf') format('truetype'),
url('fonts/WebFont.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: normal;
}

<i>MyWebFont はフォントの名前で、 src プロパティの値 (引用符で囲まれた括弧内のデータ) はフォントの場所 (相対リンク) です。各スタイルを個別に指定する必要があります。

最初に標準スタイルを接続するため、font-weight プロパティと font-style プロパティを標準に設定します。

ステップ 4.<i>斜体を追加する場合は、次のように記述します。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic.eot');
src: url('fonts/WebFont-Italic.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic.woff') format('woff'),
url('fonts/WebFont-Italic.ttf') format('truetype'),
url('fonts/WebFont-Italic.svg#svgwebfont') format('svg');
font-weight: normal;
font-style: italic;
}

すべて同じですが、font-style プロパティを斜体に付加しただけです。

ステップ 5. 太字フォントを追加するには、次のコードを追加します。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Bold.eot');
src: url('fonts/WebFont-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Bold.woff') format('woff'),
url('fonts/WebFont-Bold.ttf') format('truetype'),
url('fonts/WebFont-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: normal;
}

ここで、font-weight プロパティを太字に設定します。

各スタイルのフォント ファイルの正しい場所を忘れずに指定してください。

ステップ 6. 太字の斜体を接続するには、次のように入力します。

@font-face{
font-family: 'MyWebFont';
src: url('fonts/WebFont-Italic-Bold.eot');
src: url('fonts/WebFont-Italic-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/WebFont-Italic-Bold.woff') format('woff'),
url('fonts/WebFont-Italic-Bold.ttf') format('truetype'),
url('fonts/WebFont-Italic-Bold.svg#svgwebfont') format('svg');
font-weight: bold;
font-style: italic;
}

これですべてです 🙂 これで、4 つのフォント スタイルが Web サイトに接続されました。

ただし、注意点が 1 つあります。このフォント接続は Internet Explorer 8 では誤って表示されます。慰めとなるのは、IE8 をまだ使用している人がほとんどいないことです。

WordPress のカスタム フォントのまとめ

ユーザーがあなたのサイトにアクセスしたときに最初に気づくことは何ですか?そう、そのデザイン！デザインのほとんどは、美しいフォントを適切に使用することに依存しています。したがって、サイトのフォントデザインに注意する必要があります。コードを追加するか、上記のプラグインのいずれかを使用して、新しいフォント スタイルを埋め込みます。どちらの方法を選択するかはあなた次第です。

同じサイトで 3 つ以上のフォントを使用していないことを確認してください。サイトに追加するカスタム フォントが増えると、サイトの速度が遅くなります。

<i>以上です。お気軽にコメントしてください。

<i>ウェブサイトにカスタム フォントを追加するためにどのオプションを選択したか、またフォントがどこで見つかったかについても喜んでお知らせいたします。