WordPressのウェブサイトにカスタムフォントを追加する方法を学びたいですか？
標準フォントを使用してブログを退屈にするのはなぜですか？ あなたのブログにあなたの活気に満ちた個性とあなたがカバーするトピックについて多種多様なカスタムフォントで話させてください。 カスタムフォントは、ブログを他の人よりも見栄えよくする優れた機能です。
それに直面しよう; 私たちは皆、適切なフォントを使用したブログや Web サイトが大好きです。 Web サイトを装飾するだけでなく、ユーザーをコンテンツに引き付けるのにも役立ちます。 ただし、WordPress の標準フォントの選択肢は限られており、使用しているテーマによって異なります。 良いニュースは、それらを手動で、または WordPressのプラグイン 専門。
そしてここでXNUMXつの質問が発生します：カスタムフォントの入手先 WordPressと カスタムフォントのインストール方法 あなたのウェブサイトに
見つけるのをしてみましょう。
なぜカスタムフォントを使用する必要があるのですか？
TimesNewRomanとGeorgiaがウェブサイト上のテキストの唯一の書体と見なされていた時代は終わりました。 過去数年間で、フォントスペースは次のようなフォントの出現で完全に変化しました Googleのフォント などがあります。
今日、インターネット上には何百もの無料のフォント、情報とトレーニングエイド、およびデザインリソースがあります。 Adobe Illustrator、Photoshop、およびその他の従来のアプリとは異なり、WordPressではデフォルトのフォントを完全に制御することはできません。 特定のWordPressテーマのみが、カスタムフォントのサポートと使用を選択します。
したがって、この記事では、適切なカスタムフォントを見つけて、WordPressWebサイトでそれらを使用する方法を学習します。
カスタムフォントを使用することの重要性
なぜフォント、単語のインデント、行間隔、文字間隔、またはフォントの彩度を変更するのですか？ しかし、いくつかの研究は タイポグラフィは読解力を向上させます.
フォントの構成に大きく依存します。 意識的および潜在意識的なレベルで–誰もがWebページのコンテンツを設計によって評価します。
フォントのデザインは、読者が注意を払わなくても、読者に影響を与えます。 フォントデザインをあきらめるということは、開発自体をあきらめることを意味します！ 読者の気分はそれに依存します。 フォントを使用すると、読みやすくなったり、ユーザーにページを離れさせたりすることができます。
すべてのWebブラウザーには、一連のデフォルトフォントが含まれています。 これは、フォントがページのCSSで指定されていない場合、標準バージョンが使用されることを意味します。 デフォルトのフォントは引き続き使用できますが、ユーザーにとっては難しくなります。 これが、カスタムフォントを使用することが不可欠である理由です。 WordPressテーマにフォントを変更するオプションがない場合は、役立つWebサイトやツールがたくさんあります。
Google Font Alternatives
あなたの多くは知っています Googleフォント。 あなたが美しいフォントを見つけることができるより多くのウェブサイトがあります。 それらのいくつかは個人使用のために無料です。 商用利用が必要な場合は、ライセンスが必要になります。 GoogleFontsとAdobeEdgeFontsは無料です。 これが、それらがそれほどユニークではない理由です。
ここにあるいくつかの フォントを見つけるための他のリソース 無料および商用利用：
- TemplateMonster — TemplateMonster Webサイトには、Webデザインに必要なすべてのものがあります。 個人用のフォントやフォントパックも低価格でたくさんあります。 さらに、選択を支援するために、パンフレットまたはフレームに表示されるすべてのフォント。 各フォントには、商用ライセンスも付いています。
- MyFonts — MyFontsは現在、世界で最も多くのフォントを提供しています。 ただし、ここでの価格も上位セグメントにあります。 したがって、予算が限られている場合、これは適切ではない可能性があります。
- フォントスプリング — fontspringは、商用利用のためのノベルティフォントを販売しています。 しかし、ほとんどすべての家族で、1〜2個の無料フォントを個人的な目的に使用できます。 また、フリーフォントの別のセクションがあります。 コレクションは活気に満ちています。 ただし、ダウンロードする前に、特定のフォントのライセンス情報を注意深く調べる必要があります。
- カフォンフォント —これはさまざまなフォントの膨大なコレクションでもあります。 いずれかを選択すると、詳細情報が記載されたページが表示されます。 無料のフォントはたくさんあり、それらは個々のセクションに分かれています。 CufonFontsのソートシステムは非常に柔軟で便利です。 また、Webフォントのサポートも含まれています。
- ダフォント — アクセスしやすい 3 の無料フォントの別のコレクション。 それらのほとんどは、個人的な使用のみを目的として設計されています。 DaFont の優れた機能は、カテゴリ システムです。 コミック、ビデオゲーム、ビンテージなどのスタイルのフォントを選択できます。
フォントはすべて美しいので、フォントの選択は非常に魅力的です。 しかし、あなたは多くを選ぶべきではありません。 サイトでXNUMXつ以上のフォントを使用しないでください ウェブ。 そうしてあなたのウェブサイトの外観 一貫性があります。 フォントを選択したら、使用するスタイル (標準、太字、斜体など) ごとにファイルをアップロードしてください。
Webサイトに適切なフォントを選択したので、それを追加する方法を見つけましょう。
WordPressにカスタムフォントを追加する方法
WordPressWebサイトにフォントを追加する方法はいくつかあります。
- プラグイン : この場合、異なる WordPressのプラグイン プロセスを容易にするために使用されます。
- 手動 ：この方法を使用するには、サイトからダウンロードしたフォントをダウンロードし、CSSファイルを変更する必要があります。
- テーマ：多くの人気のあるテーマには、フォントをカスタマイズするための組み込みオプションがあります（注–使用しているテーマによってプロセスが異なるため、このオプションについては説明しません。
オプション1-プラグインを使用してWordPressフォントを変更する
グローバルな変更を気にしない場合は、次のようにインストールできます。 WordPressのプラグイン これにより、Web サイトのフォントが変更されます。
カスタムフォントプラグインの機能
オープンソースソフトウェアにはコミュニティの利益のための利点があり、WordPressにもその利点があります。 いくつかのWordPressプラグインを使用すると、カスタムフォントを追加できます。 非常に多い場合に適切なプラグインを選択するにはどうすればよいですか？ カスタムフォントのWordPressプラグインの機能は何ですか？
考慮すべき点は次のとおりです。
- カスタムフォントを使用する機能
- 複数のフォントを使用する機能
- ヘッダーとターゲットコンポーネント
- ボーナス：ビジュアルエディターからフォント設定を変更する機能
それで全部です。 リストの最初の特性は非常に重要です。 DaFont、Font SquirrelなどのWebサイトからフォントをダウンロードすることはできますが、WordPressにアップロードできる必要があります。
カスタムフォントをアップロードできるWordPress用のプラグインをいくつか見てみましょう。
1。 Better Awesomeフォント
このWordPressプラグインにより、ユーザーはBetter Font Awesomeフォントの最新バージョンと CSS、ショートコードなど。 さらに、このWordPressプラグインは自動的に更新されます。
機能としてそこにあります：定期的な更新、ショートコードジェネレータ、他のWordPressプラグインとの互換性など...
2。 WordPress用のGoogleフォント
このWordPressプラグインは877の特殊フォントで構成されており、WordPress Webサイトですべてのフォントを使用できます。 リアルタイムプレビューのおかげで、フォントが適用されるとWebサイトがどのように見えるかを確認できます。
さらに、お好きな組み合わせを見つけたら、保存してフロントエンドで編集することができます。
その機能が含まれます：リアルタイムプレビュー、 非常に高度なSEO、多言語サポート、より多くの870 + Googleフォントのサポート、簡単な更新など。
3.フォントプラグイン
Fonts Pluginは、ユーザーがGoogleFontsおよびAdobeFontsライブラリにアクセスできるようにする無料のWordPressプラグインです。 このWordPressプラグインを使用すると、1000を超えるGoogleおよびAdobeフォントから選択し、Webサイトで複数のフォントを使用し、WordPressカスタマイザーのプラグインのリアルタイムプレビュー機能を使用してさまざまなオプションをテストできます。
フォントサイズ、文字間隔、行の高さなど、Webサイトのタイポグラフィをカスタマイズするその他の方法については、プレミアムバージョンにアップグレードできます。 フォントプラグインプロ.ダウンロード | デモ | ウェブホスティング
4。 簡単なGoogleフォント
Easy Google Fonts はその XNUMX つです。 最高のWordPressプラグイン ウェブサイトのタイポグラフィをカスタマイズします。 Fonts Plugin と同様に、何百もの Google フォントから選択して、Web サイトに追加する前にカスタマイザーでプレビューできます。
少数のGoogleFontsへのアクセスを提供しますが、管理領域でカスタムフォントコントロールとルールを作成できるという点で独特であり、WordPressカスタマイザーにすぐに表示されます。
オプション2–WordPressカスタムフォントを手動でインストールする
@ font-faceディレクティブを使用すると、XNUMXつ以上のフォントをWebサイトに接続できます。 しかし、この方法には長所と短所があります。
メリット:
- CSSのおかげで、ttf、otf、woff、svgなどの任意の形式のフォントを接続できます。
- フォントファイルはサーバー上に配置されます–サードパーティのサービスに依存することはありません。
デメリット :
- 各スタイルの正しいフォント接続については、個別のコードを登録する必要があります。
- CSSを知らないと、簡単に混乱する可能性があります。
しかし、できればそれは本当の問題ではありません 完成したコードをコピーするだけです 値を指定する必要がある場所。
レマルク ：始める前に、必ず 子テーマを作成する あなたのウェブサイトのために。 このようにして、子テーマにすべての変更を加え、メインテーマを残して、将来必要になった場合に簡単に更新できるようにします。
ステップ1：「フォント」フォルダを作成する
子テーマで、次の下に新しい「フォント」フォルダを作成します。 wp-content / themes / your-child-theme / fonts
ステップ2.ダウンロードしたフォントファイルをWebサイトにアップロードします
これは、ホスティングコントロールパネルまたはFTPを介して実行できます。
新しく追加されたフォントフォルダにすべてのフォントファイルを追加します。 wp-content / themes /子テーマで、次の下に新しい「fonts」フォルダーを作成します。 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: normal;
font-style: normal;
}どこ マイウェブフォント はフォントの名前であり、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: normal;
font-style: italic;
}すべてが同じである場合、fontstyleプロパティを斜体に付加するのは私たちだけです。
手順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;
}まあ、それだけです。 これで、XNUMXつのフォントスタイルをWebサイトに接続できました。
ただし、注意点が8つあります。このフォント接続はInternet Explorer 8では正しく表示されません。慰めは、IEXNUMXをまだ使用している人が非常に少ないことです。
その他の推奨リソース
また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。
- ウェブサイト用の10個のWordPressアコーディオンプラグイン
- WordPressで複数の列を追加する方法
- あなたのブログにGoogleサービスを統合するためのいくつかのプラグイン
- 通知を表示する5 WordPressプラグイン
- 異なる背景を使用してワードプレス
まとめ
ユーザーがあなたのウェブサイトにアクセスしたときに最初に気付くのは何ですか？ そうです、そのデザイン！ デザインのほとんどは、美しいフォントの適切な使用に依存しています。 だから、あなたはあなたのウェブサイトのフォントデザインの世話をする必要があります。 コードを追加するか、上記のプラグインのXNUMXつを使用して、新しいフォントスタイルを埋め込みます。 どのように選択するかはあなた次第です。
同じWebサイトでXNUMXつ以上のフォントを使用しないようにしてください。 Webサイトに追加するカスタムフォントが多いほど、Webサイトの速度が低下します。
WordPressWebサイトにカスタムフォントを追加する方法を示すこの記事は以上です。 ぜひお試しください。 ご不明な点やご提案がございましたら、内でお知らせください commentaires.
しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
一方で、 さまざまなソーシャルネットワークでこの記事を共有する.
...
