ElementorでWebフォントを使用したい場合、英字のWebフォントであれば以下の設定で使用できるのですが日本語フォントの場合は別の設定が必要となります。
使用したいフォントを探す
Google Fonts で9つの日本語Webフォントが無料で使用できるので、ここでは「Rounded M+ 1c」を利用してみます。
Google Fonts + 日本語 早期アクセス • Google Fonts + Japanese Early Access
https://googlefonts.github.io/japanese/
<head>部分にスタイルシートを読み込む
「Rounded M+ 1c」のHTMLをコピーして
<link href=”https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css” rel=”stylesheet” />
をWordPressの<head>~</head>の間に記述します。
ここではWordPressのSimplicityというテーマを使用しているので
外観>テーマの編集>header-insert.phpの中に上記HTMLを追加します。
スタイルシートの編集
続いて日本語フォントを利用したいタグのクラスを記述します。
外観>テーマの編集>スタイルシート(style.css)
.nihongo h2{
font-family: “Rounded Mplus 1c” !important;
font-weight:400 !important;
}
font-family: “Rounded Mplus 1c” !important;
font-weight:400 !important;
}
nihongoクラス名の中のh2に対して、日本語フォントを使用します。
ElementorのCSSクラスの指定
ウィジェットから「見出し」を右の「新しいセクションの追加」へドラッグ。
HTMLタグ:H2にします。
詳細タブのCSSクラスを nihongo とします。