utility-font

echo-font-(face)

フォントを変更する。オブジェクト・コンポーネントを可能な限り上書きする。
(face)は root, first, second, third の4種類を使用できる。
フォントの詳細はドキュメントのフォントファミリーを参照。

echo-font-first:見出し用のフォントに変更しました

echo-font-second:英数字用のフォントに変更しました

echo-font-third:ディスプレイ用のフォントに変更しました

ここはディスプレイ用のフォントですが、ここからbody要素のフォントに変更しました

<p class="echo-text-xl echo-font-first">echo-font-first:見出し用のフォントに変更しました</p>
<p class="echo-text-xl echo-font-second">echo-font-second:英数字用のフォントに変更しました</p>
<p class="echo-text-xl echo-font-third">echo-font-third:ディスプレイ用のフォントに変更しました</p>
<p class="echo-text-xl echo-font-third">ここはディスプレイ用のフォントですが、<span class="echo-font-root">echo-font-root:ここからbody要素のフォントに変更しました</span></p>

echo-font-bold

ボールドフォントに変更する。

補足:日本語ウェブフォントの仕様

多くの日本語ウェブフォントサービスでは、 font-weight だけではウェイトの変更ができない。
このため、「フォントも含めて太字に変更するクラス」が必要となる。
参考: 太字指定が反映されません。 | FONTPLUS
https://webfont.fontplus.jp/faq/4125

Note: Web font in Japanese specification

When using the Japanese web font service, font weight is may not be change with only font-weight . Therefore, "class to change to bold including font" is required.
Reference: Boldface designation is not reflected. | FONTPLUS
https://webfont.fontplus.jp/faq/4125

echo-font-first_echo-font-bold:見出し用のフォントに変更しました

echo-font-second_echo-font-bold:英数字用のフォントに変更しました

echo-font-third_echo-font-bold:ディスプレイ用のフォントに変更しました

ここはディスプレイ用のフォントですが、echo-font-root_echo-font-bold:ここからbody要素のフォントに変更しました

<p class="echo-text-xl echo-font-first echo-font-bold">echo-font-first_echo-font-bold:見出し用のフォントに変更しました</p>
<p class="echo-text-xl echo-font-second echo-font-bold">echo-font-second_echo-font-bold:英数字用のフォントに変更しました</p>
<p class="echo-text-xl echo-font-third echo-font-bold">echo-font-third_echo-font-bold:ディスプレイ用のフォントに変更しました</p>
<p class="echo-text-xl echo-font-first echo-font-bold">ここはディスプレイ用のフォントですが、<span class="echo-font-root echo-font-bold">echo-font-root_echo-font-bold:ここからbody要素のフォントに変更しました</span></p>