Elementorで日本語フォントを使う方法

Elementorで日本語フォントを使う方法【サイトを遅くせずに】

『Elementorで日本語のフォントを使いたい!でもどうするんだろ?』
『使ったのはいいけど重くなっちゃった。』

やはり個性を出すにはフォントも大事です。
この記事では、Elementorで日本語フォントを使う方法とそれを使っても遅くならない方法を紹介します。

こちらは実際の不動産サイトで使用したGoogleのFonts Pluginのフォントの種類や、サイト速度を上げるために日本語フォントを読み込ませないようにする設定方法をTOFUラボのメンバーさんに説明していただいたときの動画です。

Google Fontで使える日本語のフォント

Google Fontの日本語フォント

まずこのリンクから日本語のGoogle フォントにを見てください。
ここにあるフォントをElementor Proで使えるようにします。
上の画像で見えると思いますが、使える日本語のフォントのリストです。

  • Noto Sans JP
  • Noto Serif JP
  • M PLUS 1p
  • M PLUS Rounded 1c
  • Sawarabi Mincho
  • Sawarabi gothic
  • Kosugi Maru
  • Kosugi

Elementor Proのカスタムフォント機能を使う方法(時に最善策ではない)

これはElementor Proでカスタムフォントを使う正攻法ですが、最初に言っておきますと日本語のによってはかなり重くなることがあります
ですがこの方法だとElementorと連携して使えるようになるので、その面では使いやすいです。
そしてこれはElementor Pro限定の機能です。

GoogleフォントをGoogle Webfonts Helperからダウンロードする

Google フォントの公式サイトからもダウンロードは可能ですが、一番軽いフォントフォーマットのWOFF2はダウンロードできません。
ですがこのページからダウンロードします。
https://google-webfonts-helper.herokuapp.com/fonts

Google フォントをダウンロードするステップ

このように左上のサーチボックスから、Googleフォントを探しそれを選びます。

日本語を選ぶ

『Select charsets』から『Japanese』を選びます。
そうしないと日本語がダウンロードされません。

フォントの太さを選ぶ

ここはフォントによるのですが、フォントによっては色々と選択肢が出てきます。
フォントによっては選択技がない場合もあります。

例えばSawarabiです。

Sawarabiは太さの種類がない

このように一つしかありません。

ダウンロードする

Googleのウェブフォントをダウンロード

画面のしたの方にあるこのボタンを押します。
ダウンロードしたZipファイルの中身を取り出します。

フォントファイルのリスト

Elementor Proでフォントをインストール

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

ダッシュボードから、『Elementor → Custom Fonts』にいきます。
そして『Add New』を押します。

Elementorでカスタムフォントを追加

フォントの名前を決める

この上のインプットボックスにはElementor内でフォントを選ぶ時にどう表示されるかを入力します。
上の画像ではSawarabiと入ってますが、何でもいいんです。

ADD FONT VARIATION

下ののボタンをクリックします。

ElementorにGoogle fontをいれる

まず左上にある『太さ』が普通になってることを確認して、先ほどダウンロードしたファイルのうちのファイル名の最後が『.woff2』になってるものをアップロードします。
TTFなどもアップロードしてもいいのですが、IE以外のブラウザは軽いWOFF2が使えるのでIEをサポートしていないなら必要ありません。

フォントのバリエーションを追加

もう一度ADD FONT VARIATIONを押してみます。

フォントのバリエーションを追加

するとこのように新しい太さやスタイルのフォントをアップロードでるようになります。
ファイル名にnoto-sans-jp-v25-latin_japanese-700.woff2のように数字が入ると思いますので、それに見合ったものをアップロードします。
フォントをダウンロードする際に他の太さを選択しなかった人はアップロードする必要があるファイルは一つだけです。

カスタムフォントを公開

Elementorでカスタムフォントを公開

この右上の『公開』ボタンを押して完了です。

Elementorにフォントのインストール完了

新しいフォントがElementorにインストールされました。
フォントの削除も編集も右のボタンから簡単にできます。

これでElementor内でこのフォントが使えるようになります。

Elementor Proで実際にインストールしたカスタムフォントを使ってみる

インストールしたフォントをElementorで使う

このようにElementor Proのテキストエディターの書体からフォントを変えようとすると、先ほどインストールした『Sawarabi』が出てきます。
これでSawarabiを選択すればこのフォントが反映されます。

尚、書体の『タイポグラフィ』の詳しい編集の仕方については【Elementorの『テキストエディター』ウィジェットの使い方】の記事をご覧ください。

『Google Fonts Typography』プラグインを使ってフォントをロードする方法(正攻法より速い)

Google Fonts Typographyをインストール

この『Google Fonts Typography』とプラグインをインストールします。

プラグインをインストールする方法など、WordPressの初歩的な操作で迷うことがあれば【WordPressのプラグインをインストールする方法】の記事をご覧ください。

Google Fontsの設定

Google Font Typographyの設定画面へ

まずどちらかをクリックします。どちらをクリックしてもWordPressのカスタマイザーが開きます。

Google Font Typographyのプラグイン

このようにカスタマイズのオプションに『Google フォント』が追加されます。

Google フォントのメニュー

『基本設定』を選びます。

ベースタイポグラフィ(サイト全体のベースになるフォント)

Google Fontを選ぶ

ベースタイポグラフィを設定します。
このようにGoogleの日本語フォントを検索するとでてきますので、好きなものを選びます。

『見出しタイポグラフィ』と『ボタンや入力のタイポグラフィ』がありますが、これは見出しやボタンでフォントを変えたい時に使います。

更に細かくフォントを設定(デザイン的にもスピード的にもオススメしません)

Googleフォントの高度な設定

高度な設定にいくと、それぞれのセクションで違うフォントを設定することが可能です。
ですが違うフォントを使うということは、違うファイルをロードするということなので、少なからずサイトが遅くなります。
本当に必要な理由がない限りはオススメしません

プロ版にするとフォントの色を変えたり、ダウンロードするフォントの太さまで設定できるので、多少軽くできます。

この他にも、ElementorとElementor Proの違いを解説した記事

>>ElementorとElementor Proの12個の違いを徹底解説!

もありますので、Elementor Proにしようかどうか迷っている方は違いを見比べてみてくださいね!

結論

Elementor Proのカスタムフォント機能は、一度フォントをインストールしてしまえば使い易いが、そこまでの手順がめんどくさいのとサイトがかなり遅くなるリスクがある。


Google Font Typographyのプラグインの方法は、本来のElementorのやり方を無視するものですが、その使いやすさと速さを考えるとこちらの方がオススメです。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

第三の方法【一番速いが、ちょっと複雑】

実はもう一つあるんです。これはこの動画で説明しています。

Naomi Suzuki

このサイトを運営してるナオミです。エンジニア歴13年、海外在住歴20年。
WordPressの情報やハッキングを防ぐ脆弱性の情報と自分の海外での生活の一部を無料のメルマガで配信しています。

目次

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Elementorの無料テンプレートサイト
新規追加されました。

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。 

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通