WordPress用の9つの最高のタイポグラフィプラグイン

公開: 2021-06-26

良いタイポグラフィはあなたのウェブサイトにとって非常に重要です。 タイポグラフィには、書体、レイアウト、ドロップキャップ、アイコンなどが含まれます。 これの多くは現在グーテンベルクで行うことができますが、書体は依然としてプラグインが大きな違いを生むことができる領域です。 この記事では、WordPressに最適なタイポグラフィプラグインを選択するのに役立ついくつかのオプションを見ていきます。

1. DiviBuilderプラグイン

Diviプラグイン

Divi Builderプラグインは、DiviBuilderを任意のWordPressテーマに追加します。 800個のGoogleフォントが含まれており、GoogleAPIキーを追加して新しいフォントを自動的に取得できます。 さらにアップロードすることもできます。 Diviプラグインはタイポグラフィ以上の機能を備えていますが、タイポグラフィ機能が多数あるため、DiviBuilderを十分に活用していない場合でも優れた選択肢です。 タイポグラフィオプションは、Diviテーマでも利用できます。

Diviプラグイン

テキストを含むモジュール内のフォントを検索し、各フォントのプレビューを表示します。 最近使用したフォントが一番上にあるので、簡単に見つけることができます。

Diviプラグイン

フォントは完全にスタイリング可能です。 インラインまたはモジュールの設定内でスタイルを設定します。 すべてのモジュールのすべての見出しサイズを個別にカスタマイズします。

Diviプラグイン

スタイルをグローバルとして設定し、数回クリックするだけで他のモジュールに拡張できます。

主な機能

  • フォントとテキストのスタイル。
  • グローバルスタイルを作成します。
  • デスクトップ、タブレット、電話のフォントを個別に調整します。
  • タイポグラフィの選択を分割テストします。
  • 適用する前にスタイルをプレビューします。
  • スタイルを拡張します。
  • スタイルをコピーして貼り付けます。
  • カラーマネージャー。
  • スタイルを見つけて置き換えます。
  • テキストの影。

価格:年間89ドル、生涯249ドル| 詳しくは

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

任意のフォントを使用

Use Any Fontは、新しいフォントをアップロードできるWordPress用のシンプルなタイポグラフィプラグインです。

任意のフォントを使用

設定画面で新しいフォントをアップロードします。 事前定義されたフォントを追加することもできます。

任意のフォントを使用

事前定義されたフォントを選択すると、必要なフォントを検索して選択できるモーダルが開きます。 プレビューが表示されるので、何が得られているかがわかります。 個人用および商用用に24,000近くのオプションがあります。

任意のフォントを使用

設定画面から任意の要素にフォントを割り当てます。 カスタム要素を追加することもできます。

主な機能

  • 任意の要素にフォントを割り当てます。
  • カスタム要素に割り当てます。
  • 新しいフォントをアップロードします。
  • ほぼ24,000の定義済みフォント。
  • Proバージョンでは、複数のフォントのアップロードが追加されます。

価格:無料、プロバージョンは9.99ドルから| 詳しくは

3.高度なエディターツール

高度なエディタツール

Advanced Editor Toolsは、GutenbergとClassicエディターの両方で機能します。 多くのタイポグラフィオプションが追加され、クラシックブロックとクラシックエディターの両方でクラシックエディターのツールバーをカスタマイズできます。 グーテンベルクに新しい段落ブロックを追加します。 必要に応じて、ブロックエディタをクラシックエディタに置き換えることもできます。

高度なエディタツール

グーテンベルクの設定には、ブロックエディタ用のツールバー、クラシック段落とクラシックブロック、ツールバー用の未使用のボタン、および多くのオプションが含まれています。 設定はタイポグラフィに焦点を合わせており、必要な機能を正確にカスタマイズできます。

高度なエディタツール

同じツールバー、未使用のボタン、およびオプションを使用してクラシックエディタをカスタマイズすることもできます。

主な機能

  • グーテンベルクとクラシックのエディターにタイポグラフィオプションを追加します。
  • ツールバーをカスタマイズします。
  • テキストの色を調整します。
  • グーテンベルクに段落ブロックを追加します。
  • ブロックエディタをクラシックエディタに置き換えます。

価格:無料| 詳しくは

4. GoogleFontsのタイポグラフィ

GoogleFontsのタイポグラフィ

Google Fonts Typographyは、基本設定と詳細設定を備えた新しいメニューをテーマカスタマイザーに追加します。 998個のGoogleフォントから選択して、ウェブサイト全体の特定の要素に適用します。 フォントをプレビューできるので、公開する前にフォントがどのように見えるかを知ることができます。

GoogleFontsのタイポグラフィ

基本設定、詳細設定、フォントの読み込み、デバッグツールを含む新しいメニューがテーマカスタマイザーに追加されました。

GoogleFontsのタイポグラフィ

基本設定では、基本のタイポグラフィ、見出し、およびボタンのフォントファミリを選択できます。 フォントの太さやスタイルを選択することもできます。

GoogleFontsのタイポグラフィ

Advancedは、ブランディング、ナビゲーション、コンテンツ、サイドバー、フッター、およびフォントの読み込みのみのカスタム設定を追加します。 この例は、コンテンツ設定を示しています。

GoogleFontsのタイポグラフィ

APIキーがある場合は、Adobeフォントを追加することもできます。

主な機能

  • テーマカスタマイザを使用します。
  • 基本設定と詳細設定が含まれています。
  • 公開する前にプレビューします。
  • Proバージョンでは、フォントサイズと色を追加し、ローカルでホストし、読み込みを最適化し、カスタムフォントをアップロードします。
  • Adobeフォントを追加します。

価格:無料、プロバージョンは59ドルから| 詳しくは

5. Font Awesome

FontAwesome

Font Awesomeを使用すると、コンテンツにアイコンを簡単に追加できます。 無料またはプロのアイコンを使用して、SVGまたはWebフォントから選択できます。 アイコンは、CDNまたはWebキットからロードできます。 アイコンは、ショートコードまたはHTMLを使用してコンテンツに追加されます。 無料版には1600以上のアイコンが含まれており、プロ版ではさらに多くのアイコンを追加できます。

FontAwesome

設定画面では、キットまたはCDN、プロまたはフリーフォント、SVGまたはWebフォントのいずれかを使用できます。 使用するバージョンと互換性を選択することもできます。

FontAwesome

この例は、ショートコードを使用してコンテンツに追加されているFontAwesomeアイコンを示しています。

FontAwesome

追加したアイコンがフロントエンドのコンテンツに表示されます。

主な機能

  • ショートコードまたはHTMLを使用してFontAwesomeアイコンを追加します。
  • 無料版の1600以上のアイコン。
  • SVGまたはWebキットを使用します。
  • CDNまたはキットを選択します。
  • プロバージョンには、7800以上のアイコン、4つのスタイル、20のホストされたプロキット、250のアップロードされたアイコンなどが含まれています。

価格:無料、プロバージョンは99ドルです| 詳しくは

6.スタイルガイド

スタイルガイド

Styleguideは、テーマカスタマイザーからフォントと色を選択できるWordPress用のシンプルなタイポグラフィプラグインです。 上位45のGoogleフォントが含まれており、コードを使用してさらに追加できます。 テーマの互換性は制限されています。 デフォルトではDiviでは機能しません。 テーマで機能しない場合は、コードでテーマのサポートを追加する必要があります。 コードの例が含まれています。

スタイルガイド

フォントスタイリングオプションがテーマカスタマイザに追加されます。 設定には、ヘッダーフォント、本文フォント、背景色が含まれます。 また、ページの下部にボタンを追加するダークモードオプションもあります。

主な機能

  • テーマカスタマイザにフォントスタイルが追加されました。
  • ヘッダーと本文のフォントを個別に選択します。
  • ダークモード。
  • コードでフォントを追加します。
  • コードとのテーマの互換性を追加します。

価格:無料| 詳しくは

7.ページタイトルスプリッター

ページタイトルスプリッター

ページタイトルスプリッターを使用すると、タイトルにブレークポイントを設定して、タイトルを分割する場所を決定できます。 これは、画面が小さい場合に特に役立ちます。 クラシックエディタで動作し、ブレークポイントを配置するためのシンプルなバーを提供します。 アイコンをクリックすると、バーが開きます。 次に、タイトル内でクリックした場所にブレークポイントが配置されます。

ページタイトルスプリッター

設定により、CSSクラスとスタイルを追加し、タイトル、メニュータイトル、ウィジェットタイトルなどを変更することを選択できます。 それはそれを使用する方法についての詳細な指示を提供します。

ページタイトルスプリッター

これが私が作成したサンプル記事のブレークポイントです。 1つ設定しましたが、複数のマーカーを設定して、タイトルを複数の場所で分割することができます。

ページタイトルスプリッター

ブレークポイントは、フロントエンドでタイトルを分割します。 これは、通常は利用できない独自のレイアウトでタイトルをデザインするために使用できます。

主な機能

  • タイトルのブレークポイントを作成します。
  • クラシックエディタで動作します。
  • 複数のマーカーを設定します。
  • CSSでブレークポイントを調整します。

価格:無料| 詳しくは

8.セカンダリタイトル

二次タイトル

セカンダリタイトルは、WordPress用のシンプルなタイポグラフィプラグインで、クラシックエディタと連携して、通常のタイトルと一緒に別のタイトルを表示します。 タイトルフィールドの上に新しいフィールドを追加し、外観とその動作をカスタマイズできる設定を提供します。 投稿の種類、カテゴリ、特定の投稿IDと互換性があります。

二次タイトル

設定により、セカンダリタイトルの形式を設定し、表示ルールを設定できます。 投稿の種類とカテゴリのルールを設定します。 セカンダリタイトルのプレビューが表示されるので、調整できます。

二次タイトル

タイトルの上に新しいフィールドが追加され、セカンダリタイトルを入力できます。

二次タイトル

タイトルは、設定画面で選択したオプションに従って表示されます。 これらはデフォルト設定です。

主な機能

  • クラシックエディタに新しいタイトルフィールドを追加します。
  • タイトルのデザインを好きなように調整します。
  • セカンダリタイトルを使用する投稿の種類とカテゴリを選択します。

価格:無料| 詳しくは

9. Zeno Font Resizer

Zeno Font Resizer

Zeno Font Resizerを使用すると、訪問者はWebサイトを表示するときにフォントのサイズを変更できます。 Cookieは設定を保持するため、アクセスするたびに設定を変更する必要はありません。 あなたは彼らが行うことができる選択、表示されるアイコン、クッキーが機能する日数などを制御することができます。

Zeno Font Resizer

設定画面では、HTML、サイズ変更手順、最小サイズと最大サイズ、サイズ変更アイコンに表示される文字、およびCookie設定を調整できます。 HTMLを使用すると、サイズ変更の仕組みを選択できます。

Zeno Font Resizer

ウィジェットを使用してサイドバーにリサイザーを追加しました。

主な機能

  • サイズ変更の手順を調整します。
  • 最小サイズと最大サイズを設定します。
  • キャラクターを選択してください。
  • Cookieは、訪問者の設定を保持します。
  • コードまたはウィジェットで追加します。

価格:無料| 詳しくは

終わりの考え

これが、WordPressに最適なタイポグラフィプラグインです。 あなたのタイポグラフィを際立たせ、読者の目を引くことができる良いオプションがたくさんあります。 WordPressのタイポグラフィプラグインをお探しの場合は、このリストでニーズに合ったものを見つけることができます。

我々はあなたから聞きたい。 WordPress用のお気に入りのタイポグラフィプラグインは何ですか?

ANTSTUDIO /shutterstock.com経由の注目の画像