utility-font

u-font-(face)

フォントを変更する。オブジェクト・コンポーネントを可能な限り上書きする。
(face)は、フォントファミリーを参照。

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

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

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

ここは見出し用のフォントですが、ここからbody要素のフォントに変更しました

u-font-mono:等幅フォントに変更しました <p class="u-font-mono">hello world!</p>

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

u-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

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

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

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

ここは見出し用のフォントですが、ここからbody要素のフォントに変更しました

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