ElementorホームページでGoogle Fontsを追加する方法

/ 未分類 / By

WordPressのページビルダー「Elementor」を使用して、Google Fontsを簡単に追加し、ウェブサイトのデザインをより魅力的にカスタマイズすることができます。この記事では、Google FontsをElementorで使用する方法を初心者にもわかりやすく説明します。

Google Fontsとは？

Google Fontsは、Googleが提供する無料のフォントライブラリで、ウェブデザインに使用できるフォントを多数揃えています。ウェブサイトのフォントを選ぶ際に、デザイン性だけでなく、ユーザーの視認性にも配慮したフォントを選ぶことが大切です。Google Fontsは、あらかじめウェブ用に最適化されているため、パフォーマンスにも優れています。

Elementorでは、デフォルトで多くのGoogle Fontsが組み込まれており、簡単にウェブサイトに適用できます。

ElementorでGoogle Fontsを追加する方法

方法1: Elementorの標準機能を使用してGoogle Fontsを適用

Elementorでは、ページビルダーを使って簡単にGoogle Fontsを適用できます。以下の手順で、テキストウィジェットにGoogle Fontsを設定しましょう。

  1. Elementorエディタを開く
    • WordPressダッシュボードから「ページ」→「編集」→「Elementor」で、作成中のページを開きます。
  2. テキストウィジェットを追加
    • 左側のパネルから「見出し」や「テキストエディタ」ウィジェットを選択し、ページにドラッグ＆ドロップします。
  3. フォント設定を変更する
    • ウィジェットを選択した状態で、左側パネルの「スタイル」タブをクリックします。
    • 「タイポグラフィ」セクションにある「フォントファミリー」のドロップダウンメニューを開きます。
    • ここに表示されるGoogle Fontsのリストから、好みのフォントを選びます。選択すると、すぐにページに反映されます。
  4. 設定を保存
    • 設定が完了したら、右下の「公開」ボタンをクリックして変更を保存します。

方法2: Google FontsをカスタムCSSで追加

Elementorに標準でないGoogle Fontを使用したい場合、カスタムCSSを利用してGoogle Fontsを追加できます。以下の手順で、カスタムCSSを使ってGoogle Fontsをページに適用しましょう。

  1. Google Fontsを取得
    • Google Fontsにアクセスし、使用したいフォントを選びます。
    • フォントを選択したら、「埋め込む」セクションから、<link>タグをコピーします。
  2. ElementorのカスタムCSSに追加
    • Elementorエディタで、ページ左下の「設定」ボタン（歯車アイコン）をクリックし、「高度な設定」→「カスタムCSS」を選択します。
    • コピーしたGoogle Fontsのリンクコードを、カスタムCSS内に以下のように貼り付けます。 （参考CSSコード①）
    • ※「YourFontFamily」部分には、選択したフォントの名前を入力します。
  3. フォントを適用する
    • カスタムCSS内で、特定のクラスやIDに対して、Google Fontを適用するスタイルを追加します。例えば、全体のテキストにGoogle Fontを適用する場合は、次のように記述します。 （参考CSSコード②）
  4. 変更を保存
    • 「公開」ボタンをクリックして、変更を保存します。

参考コード①

@import url('https://fonts.googleapis.com/css2?family=YourFontFamily&display=swap');

参考コード②

body {
  font-family: 'YourFontFamily', sans-serif;
}

ElementorでGoogle Fontsを活用するメリット

Google Fontsを活用することで、ウェブサイトのデザインをより魅力的にし、訪問者にとって見やすいフォントを使用できます。さらに、Google Fontsは無料で利用でき、フォントの追加や変更も簡単に行えるため、デザインのカスタマイズが非常に柔軟です。

また、Elementorを使うことで、コードを直接書かずに直感的にフォントの変更ができるため、初心者でも簡単にウェブサイトをカスタマイズできます。

まとめ

ElementorでGoogle Fontsを追加する方法は、非常にシンプルで、誰でも簡単に自分のウェブサイトに美しいフォントを取り入れることができます。デフォルトのフォントに満足できない場合や、特定のフォントを使用したい場合でも、カスタムCSSを使うことで自由に追加できます。

自分のウェブサイトにぴったりなフォントを選んで、より魅力的で視認性の高いページを作成しましょう。ElementorとGoogle Fontsをうまく活用して、プロフェッショナルなデザインを実現してください！