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

標準フォントを使用してブログを退屈にするのはなぜですか?活気に満ちた個性と、さまざまなカスタムフォントを使用してカバーするトピックについて、ブログで話してみましょう。カスタムフォントはあなたのブログを他の人に好まれるようにする素晴らしい機能です.


それに直面しよう;私たちは皆、適切なフォントを備えたブログやサイトを愛しています。それらはサイトを飾るだけでなく、ユーザーをあなたのコンテンツに引き付けるのにも役立ちます。ただし、標準のWordPressフォントの選択は制限されており、使用しているテーマによって異なります。良いニュースは、それらを手動で、または専用のプラグインで追加できることです.

ここで、2つの質問が発生します。 カスタムフォントの入手先 WordPressおよび カスタムフォントをインストールする方法 WordPressサイト.

確認してみましょう.

 カスタムフォントを使用する理由?

Times New RomanとGeorgiaがWebサイト上のテキストの唯一のフォントと見なされていた時代は終わりました。過去数年にわたり、Google Fontsなどのフォントの登場により、フォントスペースは完全に変化しました.

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

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

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

なぜフォントを変更するか、単語間のインデント、行間隔、文字間隔、またはフォントの彩度を変更するのですか?とにかく、いくつかの研究はそれを証明しています タイポグラフィは読解力を向上させます.

フォントの構成に大きく依存します。意識的および潜在的レベルで–誰もが意図的にWebページのコンテンツを評価します.

フォントデザインは、読者がそれに注意を払わなくても、読者に影響を与えます. フォントデザインを放棄するということは、開発そのものを放棄することを意味します!読者の気分はそれに依存します。フォントは読みやすくするか、ユーザーに強制的にページを離れさせる.

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

Google Fonts Alternatives

カスタムフォントの場所

多くの人が無料のGoogleフォントについて知っています。美しいフォントを見つけられるサイトは他にもたくさんあります。それらのいくつかは個人的な使用のために無料です。商用利用が必要な場合は、ライセンスが必要です。 Google FontsとAdobe Edge Fontsは無料です。それが彼らがそれほど独特ではない理由です。そして、これは私たちには合いません.

ここにいくつかあります フォントを見つけるための他のリソース 無料で商用利用:

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

フォントはすべて美しいため、フォントの選択は非常に魅力的です。しかし、たくさん選ぶべきではありません。使用する サイトに2つ以下のフォント. そうすれば、あなたのウェブサイトの見た目は一貫したものになります。フォントを選択したら、使用する各スタイル(通常、太字、斜体など)のファイルをダウンロードしてください。.

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

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フォント

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

プラグインでフォントをインストールする方法?

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

WP Googleフォント

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

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

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

長所

  • CSSを介して、任意の形式のフォントを接続できます:ttf、otf、woff、svg.
  • フォントファイルはサーバーに配置されます-サードパーティのサービスに依存しません.

短所

  • 各スタイルの正しいフォント接続のために、個別のコードを登録する必要があります.
  • CSSを知らないと、簡単に混乱する可能性があります.

しかし、できればそれは本当の問題ではありません 完成したコードをコピーするだけ 値を指定する必要がある場所.

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

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

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

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

これは、ホスティングのコントロールパネルまたはFTPを介して実行できます.

新しく追加したフォントフォルダーにすべてのフォントファイルを追加します。 wp-content / themes / 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:通常;
フォントスタイル:通常;
}

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

最初に通常のスタイルを接続するので、font-weightプロパティとfont-styleプロパティを通常に設定します.

ステップ4.追加するとき 斜体, 次のように書きます:

@ 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:通常;
フォントスタイル:イタリック;
}

すべてが同じ場合、フォントスタイルプロパティをイタリックに追加しただけです。.

手順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:太字;
フォントスタイル:通常;
}

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:太字;
フォントスタイル:イタリック;
}

これで全部です ’これで、4つのフォントスタイルをWebサイトに接続しました.

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

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

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

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

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

また、カスタムフォントをWebサイトに追加するためにどのオプションを選択するか、およびフォントを見つける場所についてもお知らせいたします。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me