SPONAGO TOP TEAM

Elementorカスタムフォントの追加の方法

はじめに

このマニュアルでは、WordPressのページビルダー「Elementor」を使って、ウェブサイトにカスタムフォントを導入し、パフォーマンスを向上させるために不要なデフォルトフォントを削除する方法について説明します。フォントはウェブサイトのデザインで重要な要素ですが、無駄なフォントを読み込むとページの表示速度が遅くなることがあります。

このガイドを通じて、サイトの見た目と使いやすさを保ちながら、読み込み時間を最適化するための効率的なフォント管理方法を学びます。特に、カスタムフォントの導入と不要なデフォルトフォントの削除により、最大コンテンツ描画時間（LCP）の改善に役立つ方法を詳しく説明します。

この手順に従うことで、ユーザーにより快適でスピーディなウェブサイト体験を提供できるようになります。それでは、カスタムフォントのインストールとデフォルトフォントの削除手順を、わかりやすく解説していきます。

カスタムフォントの選定

フォントの選び方

ウェブサイトで使うフォントは、デザインの重要な要素です。適切なフォントを選ぶことで、ブランドの個性を強調し、読みやすく快適な体験を提供できます。フォント選びで注意すべきポイントは以下の通りです。

  • ブランドイメージに合うこと: フォントはブランドのトーンやスタイルと一致している必要があります。例えば、クラシックで伝統的なブランドにはセリフ体（Serif）が、モダンでシンプルなブランドにはサンセリフ体（Sans-Serif）が適しています。

  • 読みやすさ: 読みやすいフォントは、ユーザーの体験を向上させます。特に本文用のフォントは、視認性が高く、長時間読んでも疲れにくいものを選びましょう。

  • レスポンシブ対応: ウェブサイトは様々なデバイスで表示されるため、選んだフォントがモバイル、タブレット、デスクトップでもバランス良く表示されるか確認してください。

  • ウェブフォントのパフォーマンス: 一部のフォントはウェブ用に最適化されておらず、サイトのパフォーマンスを低下させることがあります。軽量で高速な読み込みが可能なフォントを選びましょう。

フォントファイル形式の説明

フォントファイルにはいくつかの形式があり、それぞれに特徴と用途があります。

  • TTF (TrueType Font):
    1980年代にAppleとMicrosoftが共同開発したフォント形式。広く使われ、ほぼすべてのプラットフォームで互換性があります。ただし、ファイルサイズが大きく、ウェブではやや重いです。

  • OTF (OpenType Font):
    TTFの後継で、AdobeとMicrosoftが開発。より多機能で、豊富な文字セットを含むことができます。デザイン作業に適していますが、ファイルサイズはやや大きめです。

  • WOFF (Web Open Font Format):
    特にウェブ向けに設計されたフォント形式で、TTFやOTFよりもファイルサイズが小さく、ウェブサイトの読み込み速度を向上させます。

  • WOFF2:
    WOFFの次世代版で、さらに圧縮され、ファイルサイズが小さいため、最もパフォーマンスに優れたウェブフォント形式です。

商用利用時のライセンス確認

フォントを商用利用する際は、ライセンスの確認が必要です。不正使用は法的な問題を引き起こす可能性があるため、以下の点を確認してください。

  • ライセンスの種類:
    無料フォントでも商用利用が許可されているか確認する必要があります。商用ライセンスフォントは購入が必要で、利用範囲の確認も大切です。

  • ライセンス条件の確認:
    フォントファイルの共有が禁止されている場合や、ウェブフォントのライセンスにサイトのトラフィックやドメイン数の制限があることがあります。

  • フォントベンダーの信頼性:
    信頼できるベンダーから購入・ダウンロードしましょう。

これらの点に注意して、ウェブサイトに最適なフォントを選び、デザインとパフォーマンスを向上させてください。

カスタムフォントのインストール

Elementor へのカスタムフォントのアップロード方法

Elementorでは、カスタムフォントを簡単にアップロードして使用できます。以下の手順に従って、カスタムフォントをElementorにアップロードしてください。

  1. WordPress ダッシュボードにアクセス:

    • WordPressにログインし、左側のメニューから「Elementor」を選択します。

  2. Elementorのカスタムフォントメニューを開く:

    • メニューから「Custom Fonts（カスタムフォント）」を選択します。これにより、カスタムフォントを管理する画面が表示されます。

  1. 新しいフォントを追加:

    • 画面右上にある「Add New（新規追加）」ボタンをクリックします。これにより、新しいフォントを追加するためのフォームが開きます。

  1. フォントの名前を入力:

    • フォントに分かりやすい名前を付けます。例えば、フォント名や使用目的に応じた名前を設定してください。

  3. フォントファイルのアップロード:

    • 「Add Font Variation（フォントバリエーションを追加）」ボタンをクリックし、必要なフォントファイルをアップロードします。ファイル形式（WOFF, WOFF2, TTF, OTF）ごとにアップロードが可能です。通常、WOFF2が最適ですが、必要に応じて他の形式もアップロードできます。
    • ダウンロードしたファイルの拡張子を確認してアップロードして下さい。

  4. スタイルとウェイトの設定:

    • アップロードしたフォントファイルに対応するスタイル（Regular, Italic, Bold など）とウェイト（太さ）を設定します。これにより、フォントの適切なバリエーションが利用できるようになります。

    • 通常、フォントウェイトやフォントスタイルは以下のように数値またはキーワードで指定します。

      数値での指定

      • 100 – Thin（非常に細い）
      • 200 – Extra Light（極細）
      • 300 – Light（細い）
      • 400 – Normal（標準、通常の太さ）
      • 500 – Medium（中くらいの太さ）
      • 600 – Semi Bold（やや太め）
      • 700 – Bold（太字）
      • 800 – Extra Bold（かなり太い）
      • 900 – Black（最も太い）
      • normal – 通常のテキストスタイル（デフォルト）。斜体やその他のスタイルが適用されていない状態。
      • italic – 斜体（Italic）スタイル。通常、文字が右に傾いたスタイルを適用します。
      • oblique – 斜体（Oblique）スタイル。Italicに似ていますが、単に文字を斜めに変形させるだけです。Italicと比べると、フォントデザインの違いによっては異なる見た目になります。

    • さらに追加するには、「ADD FONT VARIATION」を押します。

  7. フォントの保存:

    • すべての設定が完了したら、「Publish（公開）」ボタンをクリックして、フォントのアップロードと設定を保存します。

フォントの設定と適用

アップロードしたカスタムフォントを実際にサイト内で使用するには、次の手順を行います。

  1. Elementor エディターを開く:

    • 編集したいページやテンプレートを開き、「Edit with Elementor（Elementor で編集）」ボタンをクリックします。

  2. テキストウィジェットの選択:

    • カスタムフォントを適用したいテキスト部分をクリックし、対応するテキストウィジェットを選択します。

  3. スタイルタブを開く:

    • 右側の「スタイル」タブをクリックして、テキストのスタイル設定を開きます。

  4. フォントファミリの選択:

    • 「Typography（タイポグラフィ）」セクション内で「Font Family（フォントファミリ）」を選択し、ドロップダウンメニューから先ほどアップロードしたカスタムフォントを選びます。

  5. 追加のスタイル設定:

    • 必要に応じて、フォントサイズ、ラインハイト、レター間隔などの追加のタイポグラフィ設定を行います。

  6. 変更の保存:

    • 設定が完了したら、ページを更新して変更を保存します。これにより、選択したカスタムフォントがサイトに適用されます。

Google FontsからカスタムフォントをElementorにインストールする手順

1. Google Fontsからフォントをダウンロードする

  1. Google Fontsサイトにアクセス:

  2. フォントを選ぶ:

    • ページ上部の検索バーやカテゴリを使って、使用したいフォントを探します。フォントを見つけたら、クリックして詳細ページを開きます。
    • 「GET FONT」を押します

  3. ダウンロードする:

    • 画面右上に「Selected family（選択されたファミリ）」というボックスが表示されるので、その中にある「Download all（すべてダウンロード）」アイコン（下向きの矢印）をクリックします。
    • フォントファイルがZIP形式でダウンロードされます。

  4. ZIPファイルを解凍する:

    • ダウンロードしたZIPファイルを解凍し、フォントファイル（.ttf や .woff など）が含まれていることを確認します。

2. Elementorにカスタムフォントをアップロードする

  1. WordPressにログイン:

    • WordPressダッシュボードにログインします。

  2. Elementorのカスタムフォントメニューにアクセス:

    • 左側のメニューから「Elementor」 > 「Custom Fonts（カスタムフォント）」を選択します。

  3. 新しいフォントを追加:

    • 画面右上にある「Add New（新規追加）」ボタンをクリックします。

  4. フォントの名前を設定:

    • フォントの名前を入力します。例: Roboto Regular。

  5. フォントファイルのアップロード:

    • 「Add Font Variation（フォントバリエーションを追加）」をクリックし、解凍したフォントファイルから適切な形式（.woff, .woff2, .ttf など）のファイルを選択してアップロードします。
    • フォントファイルごとに対応するスタイル（Regular、Italic、Boldなど）とウェイト（400、700など）を設定します。

  6. フォントの保存:

    • すべてのスタイルとウェイトを設定したら、「Publish（公開）」ボタンをクリックして、フォントのアップロードを完了します。

3. カスタムフォントをサイトに適用する

  1. Elementorエディターを開く:

    • 編集したいページやテンプレートを開き、「Edit with Elementor（Elementor で編集）」ボタンをクリックします。

  2. テキストウィジェットの選択:

    • カスタムフォントを適用したいテキスト部分をクリックし、テキストウィジェットを選択します。

  3. フォントファミリの選択:

    • 右側の「スタイル」タブをクリックして、「Typography（タイポグラフィ）」セクション内の「Font Family（フォントファミリ）」をクリックします。
    • ドロップダウンメニューから、アップロードしたカスタムフォント（例: Roboto Regular）を選択します。

  4. その他のスタイル設定:

    • 必要に応じて、フォントサイズ、ラインハイト、レター間隔などを調整します。

  5. 変更を保存:

    • ページやテンプレートの編集が完了したら、変更を保存してサイトに反映させます。
  1.