Elementorの中に日本語Webフォントを使用したい場合

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;
}

nihongoクラス名の中のh2に対して、日本語フォントを使用します。

ElementorのCSSクラスの指定

ウィジェットから「見出し」を右の「新しいセクションの追加」へドラッグ。

HTMLタグ:H2にします。

詳細タブのCSSクラスを nihongo とします。

DEMO

Elementorカテゴリ

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.

Announce

New
arrival

2019 collection

Let’s face it, no look is really complete without the right finishes. Not to the best of standards, anyway (just tellin’ it like it is, babe). Upgrading your shoe game. Platforms, stilettos, wedges, mules, boots—stretch those legs next time you head out, then rock sliders, sneakers, and flats when it’s time to chill.