ユーザーエクスペリエンス(UX)を向上させることで、WordPressサイトのエンゲージメントを高めることができます。UXには、ウェブデザインのプロセスにおけるいくつかの詳細が含まれますが、フォントは重要な要素の1つです。
適切なフォントを選ぶことで、読みやすく、魅力的で、視覚に訴えるサイトにすることができます。WordPressのタイポグラフィ・プラグインを使えば、このすべてを簡単に実現できる。
タイポグラフィ・プラグインを使う利点は、そのフォント・ライブラリとカスタム・フォントが利用できることだ。そこで、Google Fonts for WordPressやカスタマイザーフォントなど、さまざまなプラグインを実際のサイトでテストし、その機能性と使いやすさに注目してみた。
そして今、私たちはあなたが使用することができる最高のWordPressタイポグラフィープラグインのいくつかを共有します(それらのほとんどは無料で、あなたのサイトにインストールするのは簡単です)。
なぜWordPressサイトでタイポグラフィが重要なのか?
サイトのタイポグラフィは、デザイン全体の中でも非常に重要な要素です。美しく読みやすいフォントを選ぶことで、サイトのエンゲージメントを高め、ユーザーのサイト滞在時間を増やすことができます。
多くの優れたWordPressテーマには、Googleフォントへのアクセスが付属しており、ニーズに合わせてタイポグラフィを調整することができます。
投稿エディターやページエディターには、フォントやレイアウトをよりコントロールできるビルトイン設定があります。
しかし、字幕の追加、ドロップキャップの使用、脚注の追加、ユーザーによるフォントサイズの変更など、タイポグラフィでできることは他にもたくさんあります。
適切なWordPressプラグインを選択することで、コードを書くことなくWordPressサイトのタイポグラフィを改善することができます。
それでは、あなたのサイトで試せるWordPressのタイポグラフィ・プラグインをいくつか紹介しよう。
1.WordPress用Googleフォント
Google Fonts for WordPressには、WordPressサイトで使用できる1,455以上のスタイリッシュなフォントのライブラリがあります。各フォントのライブプレビューが付属しているので、見出しやコンテンツに使用するフォントを選択するのに役立ちます。
プラグインは、Adobeフォントの統合を持っており、また、Googleフォントの数千人をサポートしています.また、カスタムフォントをアップロードし、プラグインの設定でフォントサイズ、色、太さ、行の高さを変更することができます。
詳しくは、WordPressでカスタマイザーフォントを追加する方法をご覧ください。
ディール:あなたは、プラグインのプレミアムバージョンを取得したい場合, その後、20%割引のために私たちのGoogle Fonts for WordPressクーポンを使用して確認してください.
2.カスタムフォント
カスタマイザーフォントは、サーバー上でWebフォントをホスティングできるシンプルなWordPressフォントプラグインです。サイトがローカルでフォントを読み込むため、サイトのパフォーマンス向上に役立ちます。
プラグインを使用すると、Googleフォントライブラリからフォントをインポートすることができます。また、WordPressサイトにカスタマイザーを追加し、タイポグラフィーの設定を完全にコントロールすることができます。
3.ゼノフォントリサイザー
Zeno Font Resizerは、サイト訪問者がクリック数回でフォントサイズを変更できるオプションを提供します。これにより、より大きなテキストを好むユーザーエクスペリエンスを向上させることができます。
このプラグインを使えば、WordPressのサイドバーにフォントのサイズ変更オプションを簡単に追加することができます。また、jQueryを使用しているので、訪問者はページをリロードすることなくフォントを調整することができます。
4.ページタイトル・スプリッター
Page Title Splitterは、長い投稿タイトルを2行に分割できるユニークなプラグインです。これにより、読みやすさを保ちながら、より長く、より説明的な投稿タイトルを使用することができます。
これはすべての投稿、ページ、カスタム投稿タイプのタイトルで機能します。デスクトップとモバイル端末でのタイトルのレイアウトを完全にコントロールできます。
5.ブロックテーマ用ツールキット
Toolkit for Block Themeは、テーマのデザインやスタイルをカスタマイズするためのWordPressブロックエディタープラグインです。フォントを変更したり、Google Fontsを統合したり、追加のグローバルスタイルを使用してビジネスに最適なサイトを作ることができます。
Google Fontsをローカルにホスティングサービスするオプションがあるので、どんなフォントファミリーでもインポートしてサイトで使用することができる。プラグインは、WordPressのブロックテーマのためのいくつかの他のオプションを持っています。
6.エディター・プラス
エディタープラスは高度なWordPressカスタマイズプラグインです。タイポグラフィコントロールとフォントプロパティを管理するパネルが付属しています。
このプラグインを使用すると、フォントの太さ、フォントスタイル、フォントサイズ、文字間隔、行の高さ、および色を変更することができます。また、異なる画面サイズや端末でのフォント表示を簡単にコントロールできます。
7.カスタマイザーフォント
カスタマイザーでは、人気のAdobe(旧Typekit)フォントをサイトに追加できます。
プラグインは最も人気のあるページビルダーで動作するので、サイトをカスタマイズする際に選択できるフォントライブラリが増えます。
8.フォントオーサム
Font Awesomeを使えば、サイトにアイコンフォントを追加できます。アイコンフォントは、ボタン、機能ボックス、ナビゲーションメニューなどを改善するために使用できるシンプルな絵文字です。
詳しくは、WordPressテーマにアイコンフォントを簡単に追加する方法をご覧ください。
9.任意のフォントを使用する
Use Any Fontでは、WordPressにカスタムフォントをアップロードすることができます。コンピューターにダウンロードしたカスタマイザーフォントを使いたい場合に便利です。
また、23,871種類以上のフォントから選べるフォントライブラリのフォントも使用できます。
10.スタイルガイド
Styleguideでは、WordPressテーマカスタマイザーでテーマのフォントや色をカスタマイズすることができます。
これにより、サイトにカスタマイザーCSSを追加することなく、フォントの外観を変更することができます。ほとんどのWordPressテーマと互換性があります。
11.OMGF
オプティマイズはGoogleフォントを最適化するプラグインです。フォントをローカルにホスティングサービスすることで、読み込み時間を短縮することができます。
このプラグインは、DNSリクエストを最小限に抑え、レイアウトのずれを減らし、ブラウザーキャッシュを活用してパフォーマンスを向上させます。初心者にも優しく、バックグラウンドで静かに動作します。
12.WPフォントオーサム
WP Font Awesomeは無料のWordPressタイポグラフィープラグインです。ショートコードを使ってFont Awesomeアイコンを追加できます。
フォントアイコンをカスタマイズするためのショートコードテンプレートを入手できる。プラグインはまた、ウィジェットエリア、ページ、投稿にフォントを追加することができます。
13.テキスト大文字小文字変換
Text Case Converterは、ページや投稿のテキストを大文字、小文字、文章大文字などに変更できるプラグインです。
プラグインは、WordPressサイトにダミーコンテンツを追加するのにも役立ちます。さらに、WordPressページの文字数、単語数、行数をカウントすることもできます。
14.SeedProd
SeedProdは、市場で最高のWordPressテーマとサイトビルダーです。それはあなたがわずか数回のクリックであなたのサイトを起動するために使用できる既製のテンプレートキットが付属しています。
SeedProdはまた、最高のWordPressページビルダーです。このプラグインを使用すると、カスタムページを作成し、フォントの外観を完全にコントロールすることができます。
ダイナミックテキスト機能を使って、訪問者を惹きつけるアニメーションの見出しを作成できます。さらに、サイト上で使用できるGoogle Fontsの全ライブラリにアクセスできます。
強力なAIサイトビルダーもあり、コンテンツを自動生成したり、既存のコンテンツを読みやすくしたりすることができる。
15.スライブテーマ
Thrive Themeは人気のWordPressサイトビルダーで、オンラインビジネスを成長させるための強力なツール群を提供しています。それはビジネスサイトをセットアップし、一度にすべての成長ツールを追加するために初心者のための1ストップソリューションです。
さらに、クイズビルダー、A/Bテストツール、テスティモニアルプラグインなどが付属しています。すべてのツールはWordPressテーマとシームレスに動作します。
Thrive Builderでは、サイトビルダー設定内でフォントスタイル、フォントサイズ、フォントカラーをカスタマイズできます。また、WordPressサイトにフォントを追加するために、カスタマイザーフォントプラグインをThriveテーマと統合することもできます。
Thrive Builderでは、フォントをインポートする初期設定を変更することができ、お好みの新しいフォントを簡単に追加することができます。
さらに詳しく知りたい方は、Thrive Themesの詳細レビューをご覧ください。
16.WPロケット
WP Rocketは、市場で最高のWordPressキャッシュプラグインです。初心者に優しく、WordPressを高速化するのに役立つ。
Googleフォントを個別クリックで最適化するユニークなキャッシュ設定があります。サイトのスピードテストを実行すると、これはユーザーが報告する最も一般的な速度の問題の一つです。
詳しくは、WordPressにWP Rocketをインストール・設定する方法をご覧ください。
この投稿が、あなたのサイトに最適なWordPressタイポグラフィプラグインを見つける手助けになれば幸いです。あなたのサイトを改善し、ユーザーを惹きつけるサイトにする方法については、エキスパートガイドもご覧ください。
サイト改善のためのWordPressガイド
- WordPressでローカルフォントをホスティングサービスしてサイトを高速化する方法
- WordPressでフォントをオンライン販売する方法(ステップバイステップ)
- ウェブセーフフォントとは+ベストウェブセーフフォント(初心者ガイド)
- ドラッグ&ドロップWordPressページビルダーのベスト比較
- ユーザーの本音を探る簡単アンケートツール
- WordPressで見出しアナライザーを使ってSEOタイトルを改善する方法
- 最高のバーチャルビジネス電話番号アプリ(無料オプション付き)
- 無料メールドメインの取得方法(迅速かつ簡単な方法)
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Moinuddin Waheed
I have mostly used the fonts that came up with the premium theme I am using.
However coming across certain websites and seeing their typography attracts most and it feels like having those fonts on our own website.
is there a way to determine which fonts some websites using like having any chrome extension or something?
and second, is having fonts locally speeds up the website rather than using front Google server like Google fonts?
WPBeginner Support
To find the fonts a site is using, you would need to use Inspect element. Using local fonts can help a site load faster over using server side fonts from Google.
管理者
Moinuddin Waheed
Thanks for the guide, I have started using these tricks and tips to improve my website performance.
I have been attracted to many websites fonts, now I would be able to find what fonts they are using for their websites and I can use those fonts on my website locally.
Jiří Vaněk
I use Google Font and used to use Font Awesome. However, for website speed, I recommend downloading Google Font to the web hosting and using it locally. Loading fonts from third-party servers can ultimately slow down the website and this reflects in measurements.
Daan van den Bergh
Hi!
Thank you for including my plugin OMGF in this list!
I always try to pay attention to user friendliness, so I’m glad you experienced it as beginner friendly
WPBeginner Support
You’re welcome and thank you for having a user friendly plugin
管理者
Neal Umphred
In your description of the wp-Typography plugin: “eclipses”?
WPBeginner Support
Thank you for pointing out that typo, we’ll fix it as we go through to update the article
管理者
Lamine
Thank you for the article. Otherwise it need to be update.
WPBeginner Support
You’re welcome, we’ll certainly take a look at what needs to be updated.
管理者
shabanam
“Hi, i absolutely got tons of value from your post. Please i have 2 quick questions.
1. What is the number of plugins every blogger shouldn’t exceed? I currently have about 18 installed, would you consider that number outrageous. Please could you also check out my site and offer me a
2. Your font is really beautiful. would you suggest plugins that would give me beautiful fonts just like yours?
Finally, would you spare a few seconds to check this site and offer me your candid advice
WPBeginner Support
Hi Shabanam,
1. Please see our article on how many plugins you should install on your site.
2. Please see the Typography plugins mentioned above.
管理者
Ingrid Webster
You guys are life savers. Thank You so much!
Lynn
Thank you for the help, I need to change the color of the font on my new website.
Peter
I have installed Easy Google Fonts and most of it works fine as far as the styles and positioning go but strangely nothing happens to the main font color in appearances even though the background color works, which is something I don’t really need anyway. Changing the color of the paragraph works fine too.
I am using the Simple Catch Pro theme.
Could you please advise, I would like to move on from this.
Thanks
Peter
WPBeginner Support
Hi Peter,
We are not sure but it could be some other CSS rule in your theme’s stylesheet or settings overriding Easy Google Fonts settings.
管理者
Adi
You can remove Google Font Manager from list as it is not available to download
April
I am really struggling with a font issue. We have a digital magazine, and often need to use several different fonts per post. Is there any similar to tinymce but with more options for font family?
Logeshkumar Nandagopal
Hi Team
I am new to blogging and have recently created a wordpress blog and i would like to know whether is there any plugin to highlight the c/c++ codes in textbox on my post.
Amarjit Singh
Every wpbeginner article helpful… i am a great fan of wpbeginner, 15 to 20 times i visit wpbeginner.com daily, for finding the solutions for my website. Wpbeginner motivate and help me to create my own site on wordpress.
WPBeginner Support
Hi Amarjit,
Thanks for the feedback. We are glad you find WPBeginner helpful. You may also want to check out our YouTube Channel for WordPress video tutorials.
管理者