WordPressウェブサイトにカスタムフォントを追加する方法[2022]
公開: 2022-05-05あなたはあなたのウェブデザインの中心的な部分が何であるか知っていますか？ WordPress Webサイトにカスタムフォントを追加することは、Webサイトの訪問者をサイトにとどめ、Webサイトの読みやすさを向上させるために実行できる究極のステップです。 Webサイトに選択したフォントは、ブランドイメージを表しています。 インとアウトを備えたカスタムフォントについて学びましょう。
オンラインで無料のフォントを見つけることができますが、テーマの互換性に基づいて使用に制限されます。 そのため、手動の方法とWordPressプラグインを使用してWordPressにカスタムフォントを追加する方法を説明します。
カスタムフォントを使用する理由とその場所
上記のように、フォントを簡単にダウンロードできるサイトが多数あります。 たとえば、 Font Squirrelには、使用できる最大3つの無料フォントが付属しています。 Google Fontsは、900以上のフォントから選択できるもう1つのすばらしいオプションです。 それ以外に、 EdgeWebFontsは多種多様なフォントも提供できます。 個人使用の場合は、 Fonts.comまたは1001FreeFontsを選択できます。
DaFontは、60,000を超える書体を備えた最も古いフォントライブラリであり、そこから必要なフォントをフィルタリングできます。 選択したフォントをダウンロードする必要があり、GoogleFontIntegrationとは異なります。 同様の種類のフォントライブラリは、クリエイティブで収益性の高いフォントを幅広く備えたUrbanFontです。
Adobe FontsまたはTypekitは、1900以上のフォントが利用できるため、すべてのWebデザイナーにとって非常に便利なフォントライブラリです。 無料アカウントを購読している場合でも、200以上のWebフォントを提供しています。
月単位でフォントをレンタルしてサブスクリプション料金を支払いたい場合は、 Fontstandを利用できます。 約2000のすばらしいフォントを提供し、月額料金を請求します。 このタイプネットワークと同じように、一度に400を超えるフォントファミリを取得し、簡単に探索できる、もう1つのセルフホストフォントライブラリです。
Webサイトに最適なカスタムフォントを選択する方法は？
WordPressに最適なカスタムフォントを見つけるためのリソースをすでに知っているので、今すぐ最適なフォントを選択する方法を知る必要があります。 ランダムなフォントを除外すると、選択プロセスが長くなり、扱いにくくなります。 代わりに、WordPress Webサイトに最適なカスタムフォントを選択しながら、次の手順を試すことができます。 このブログでは、Google Fontsを調べて最適なフォントを選択し、すべてのフォントをフィルタリングしながらベストプラクティスを確認します。
お気に入りのフォントの候補リスト– Googleフォントでは、検索ボックスで目的のフォントを簡単に検索して、カテゴリを設定できます。 調整により検索結果が変わります。 フォントは、アルファベット、数字、およびその他の形式で表示できます。
フォントの詳細を確認する-使用可能なすべてのスタイルとフォントサイズが一目でわかるため、フォントの詳細を確認することが重要です。 Google Fontsで見つかる驚くべき特典は、そのフォントとの人気のある組み合わせが表示されることです。
フォントの詳細を確認するときは、フォントの形式にも注意してください。 すべてのフォントがすべてのブラウザシステムをサポートしているわけではないためです。 最新のブラウザリストとサポートされているフォントフォーマットリストは次のとおりです。
ソース– https://www.w3schools.com/Css/css3_fonts.asp
フォントコレクションを充実させる-適切なフォントのフィルタリングが完了したら、 [このフォントを選択]ボタンをクリックするだけで、これらのフォントをコレクションに追加できます。
WordPressウェブサイトにカスタムフォントを追加する簡単な方法
カスタムフォントを段階的な形式でWebサイトに追加する最も簡単な方法をいくつか集めました。 飛び込んで、その方法を見てみましょう。
WordPressでカスタムフォントを手動で追加する方法
カスタムフォントを手動で追加することは、Webサイトの速度を低下させないための最も賢明な方法です。 目的のフォントを見つけるためにいくつかのフォントサイズをすでに調べているので、最初にフォントをダウンロードします。 次に、フォントをWebサイトホスティングアカウントにアップロードする必要があります。 WordPressWebサイトに使用しているテーマを確認してください。 フォントのCSSファイルをアカウントにアップロードします。 フォントをダウンロードするときは、.zipファイルからファイルを抽出することを忘れないでください。
フォントファイルをアップロードするには、wp-content / themes / your-theme/fontsディレクトリに移動します。 便宜上、別のフォントフォルダを作成できます。 ファイルマネージャを使用してファイルをhPanelにアップロードします。 次に、WordPressアカウントに移動し、[外観]オプションをクリックします。 style.cssファイルが表示されるテーマエディタを選択します。 コードの最後に次のコードを追加します。
@ font-face {
font-family：AguafinaScript-レギュラー;
src： url （ http://test-site.com/wp-content/themes/twentynineteen/fonts/AguafinaScript-Regular.ttf ）;
フォントの太さ：通常;
}
次に、[ファイルの更新]ボタンをクリックして変更を保存します。 font-faceコードは、訪問者がサイトにアクセスするたびにフォントをロードすることに注意してください。 ただし、書体はまだどの要素にも適用されていません。 特定の要素にフォントを割り当てるには、まったく同じstyle.cssファイルを変更する必要があります。 たとえば、次のコードを使用すると、Webサイトの見出しでフォントスクリプトを使用できます。
.site-title {
font-family： “ Aguafina Script-Regular” 、Arial、sans-serif;
}
WordPressプラグインを使用してカスタムフォントを設定する方法
すべてのWordPressユーザーにとって、フォントプラグインを使用するのがカスタムフォントを設定する最も簡単な方法です。 ここでは、WordPressWebサイトにカスタムフォントを追加するための最も簡単で便利なフォントプラグインをいくつか紹介しました。
WP Google Fonts
カスタムフォントを使用し、 WPGoogleFontsプラグインを使用して特定のCSS要素に適用できます。 WordPressプラグインディレクトリからWPGoogleFontsプラグインをインストールし、WordPressダッシュボードを使用してGoogleFontコントロールパネルにアクセスします。 書体を選択し、フォントスタイル、割り当てられた要素などのオプションを調整できます。
フォントプラグイン
Fonts Pluginは、同様の方法で機能するEasy Google Fontsのフリーミアム代替手段であり、テーマを変更せずにGoogleFontsをページにスムーズに統合できます。 また、カスタマイザーと連携して、公開する前に代替フォントオプションを試すことができます。 Fonts Pluginには、ボーナスであるAdobeFonts統合もあります。 Fonts Pluginを使用すると、素材でAdobeのtypefaceライブラリを使用することもできます。
カスタムフォントを使用して魅力的なWebサイトを作成する
あなたのテキストの読みやすさと優雅さはあなたの訪問者があなたのサイトをサーフィンすることをどれだけ楽しむかに影響を与えます。 誰もが自分のWebサイトで使用する多数の書体から選択できるようになりました。 最近、Webサイトで古いフォントを使用する理由はありません。 これで、WordPressタイポグラフィのカスタマイズを完全に制御できます。
このブログが魅力的で役立つと思われる場合は、このブログを購読して、このようなブログをさらに読んでください。 私たちのコミュニティに参加して、あなたの考えも共有してください。