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

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

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

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

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フォントを探しそれを選びます。

日本語を選ぶ

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

フォントの太さを選ぶ

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

例えばSawarabiです。

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

ダウンロードする

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

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

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

フォントの名前を決める

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

ADD FONT VARIATION

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

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

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

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

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

カスタムフォントを公開

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

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

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

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

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

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

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

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

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

Google Fontsの設定

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

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

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

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

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

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

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

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

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

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

＞＞ElementorとElementor Proの12個の違いを徹底解説！

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

結論

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

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

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

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

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