WEBサイトを構築する際に全体に適用されるフォントの設定をCSSで宣言することが最初にあります。ワードプレスでのサイト構築にElementorを使用している場合は、CSSでの宣言ではなく、エレメンターの設定画面から簡単に設定することが可能です。
グローバルフォントを設定
Elementorで固定ページやテンプレートなど、なんでもいいので開き、左側にあるメニューの左上のハンバーガーメニューを選択します。
設定の中にある「サイト設定」を選択します。
デザインシステムから「グローバルフォント」を選択します。
「Style Guide Previe」を「オン」にすると画面の右側にプレビューが表示されますので便利です。
「System Fonts」から「メイン」「サブ」「テキスト」「アクセント」の右側にある編集マークでそれぞれの設定をしていきます。
編集ボタンを押すと「タイポグラフィ」の設定ができますので、フォントやサイズ、太さなど細かく設定が可能です。
図の丸の部分にあるマークを選択すると、デスクトップ、タブレット、スマートフォンでの設定も一括で行うことが可能です。
設定が完了したら、右下の「更新」を選択し保存をします。
さいごに
Elementorでサイト構築をしていく場合、それぞれの記事・固定ページでのフォント設定も可能ですが、1箇所ずつ変更していくと手間がかかりますし、たまに設定し忘れてしまい他と体裁が変わってしまうことがありますので、グローバルフォントの設定は最初に必ずするようにしましょう。
見出しについても、統一設定をすることが可能です。今回はグローバルフォントの紹介までになりますので、また別記事でご案内できればと思います。