Elementorでカスタムフォントを簡単に追加して使用する方法

Elementorのカスタムフォントとは何ですか？

Elementorのカスタムフォントでは、セルフホストやAdobeのフォントをページビルダーに追加し、ウェブサイトのコンテンツに使用することができます。カスタムフォントを使用すると、任意のフォントをアップロードし、その特性を変更することで、Webサイト用に独自ブランドのフォントスタイルを簡単に作成できます。

また、Adobe Typekitの統合により、ElementorにAdobeフォントを追加し、すべてのTypekitフォントを同期して使用することも可能です。

対応カスタムフォントフォーマット

Elementorは以下の5つのカスタムフォントフォーマットをサポートしています：

1. ウェブオープンフォントフォーマット（WOFF）ほとんどのモダンブラウザでサポートされています。
2. ウェブオープンフォントフォーマット（WOFF 2.0）このファイルは、OpenTypeおよびTrueTypeフォントをサポートし、WOFFよりも優れた圧縮を提供します。
3. SVGフォントSVG (Scalable Vector Graphics) は、2D グラフィックファイルを定義するための XML ベースのベクトル画像フォーマットです。このフォーマットは、特に古い iPhone で SVG グリフをテキストで表示するのに便利です。
4. TrueTypeフォント（TTF）1980年代にマイクロソフトとアップルが開発したフォントフォーマット。
5. 埋め込み OpenType フォント (EOT)IEをサポートするためにマイクロソフトによって設計されました。

Elementor用の無料のカスタムフォントはどこでダウンロードできますか？

• グーグルフォント
• ダフォント
• フォント・リス
• アーバンフォント
• フォントスペース

これらのフォントをダウンロードするには、お気に入りのフォントのダウンロードボタンをクリックし、フォルダを解凍し、適切なフォントフォーマットを選択するだけです。完了したら、WordPressにフォントをアップロードし、Elementorで使用することができます。

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

カスタムフォントをウェブサイトに追加するのは、Elementorの無料版でもプレミアム版でも簡単です。ただし、Elementorに組み込まれているカスタムフォントはElementor Proでのみ利用可能です。 無料版を使用している場合は、WordPressプラグインを使用するか、または ネクスターテーマそれを実現するために

WordPress Elementorにカスタムフォントを追加する詳しい手順は以下の通りです。

ステップ1: Elementor Proにカスタムフォントを追加します。

Elementor Proを使用している場合は、組み込みのカスタムフォント機能を利用できます。以下がその手順です：

1. カスタムフォント設定
   • WordPressのダッシュボードで エレメンタ > カスタムフォント.
   • クリック "新しいフォントの追加"ボタンをクリックして、新しいカスタムフォントの追加を開始します。

フォントファミリーの名前を入力します。任意のカスタム名を選択できます。

ステップ 2: フォントバリアントの追加とフォントのアップロード

1. カスタムフォントページで、「フォントバリエーションを追加」をクリックします。
2. フォント名を追加し、WOFF、WOFF2、TTF、SVG、EOTなどのさまざまな形式のフォントファイルをアップロードします。
3. 必要なフォントファイルは、インターネット上のさまざまなフォントカタログからダウンロードできます。

4. カスタムフォントの太さとスタイルを設定することで、1つのフォントに複数のバリエーションを追加できます。
5. 追加したフォントフォーマットとバリアントごとに、適切なフォントファイルを個別にアップロードしてください。

ステップ3：最終フォントの発行

メディアライブラリからフォントファイルをアップロードしたら"リリース"ボタンをクリックします。フォントはElementorで利用できるようになりました。

ステップ4：Elementorウェブサイトでカスタムフォントを使う

1. Elementorページビルダーで、テキストを含む任意のウィジェットを開きます。
2. テキストウィジェットのスタイルセクションに移動します。
3. 組版設定]で、アップロードしたカスタムフォントを選択します。
4. 必要に応じてフォントのサイズ、スタイル、太さ、装飾などを調整し、ウェブサイトのデザインとの一貫性を保ちます。

方法2：Elementorにカスタムフォントを無料で追加するには？

Elementorの無料版にカスタムフォントを追加するには、カスタムフォント機能が組み込まれていないため、余分な作業が必要です。これを行うには、カスタムフォントファイルをサポートするプラグインまたはWordPressテーマが必要です.POSIMYTH Innovationsの ネクスターテーマカスタムフォント機能とElementorとのシームレスな統合が含まれています。

Nexterテーマを使ってElementorにカスタムフォントを追加する方法を紹介します。

ステップ1：Nexterテーマと拡張機能のインストール

1. WordPressのダッシュボードで外装状態 > ごかんけいせいぼおん > 新しいトピックの追加.
2. Nexterテーマを検索してインストールします。
3. Install Nexter Extension」をクリックし、プラグインを有効化します。

ステップ2：カスタムフォントを有効にする

1. テーマを有効化した後、WordPressのダッシュボードで外装状態 > ネクスター設定 > 追加オプション.
2. カスタムフォントアップロードオプションを見つけて有効にします。

ステップ 3: カスタマイズしたフォントファイルをダウンロード

1. フリーフォントカタログサイト（例：dafont.com）からカスタムフォントファイルをダウンロードします。
2. あなたのデザインやブランド・アイデンティティに合ったフォントを見つけて、ダウンロードをクリックし、ダウンロードしたzipファイルを解凍してください。

ステップ4：カスタムフォントのアップロード

1. Nexterの設定ページに移動し、カスタムフォントアップロードオプションの下にある設定アイコンをクリックしてフォントをインポートします。
2. 一度に1つのフォントファイルをアップロードする場合は「Simple Font Upload」を、複数のフォントバリエーション（太字、斜体など）をアップロードする場合は「Variable Font Upload」を選択してください。

3. フォント名を入力し、システムからフォントファイルをアップロードし、バリアントを選択し、フォントを保存をクリックします。

ステップ5：Elementorウェブサイトでカスタムフォントを使う

1. Elementorページビルダーを開き、編集中のページに移動します。
2. に移動します。タイプ > タイポグラフィアップロードされたカスタムフォントを選択します。
3. サイズ、間隔、スタイル、文字の高さなど、フォントの設定をカスタマイズして、ウェブサイトのデザインと一致させることができます。

概要

この記事では、Elementor Proまたは無料版のどちらを使用しているかにかかわらず、この記事で提供されるステップバイステップのガイドを使用して、カスタムフォントを統合して適用することがいかに簡単であるかを詳しく説明します。Proユーザーの場合は内蔵のカスタムフォント機能を、無料ユーザーの場合はNexterテーマを使って同じ効果を得ることができます。これらの方法を使えば、デザインやブランドイメージに合った、独自ブランドのフォントスタイルをウェブサイトに作成することができます。