font-(face)

フォントを変更する。オブジェクト・コンポーネントを可能な限り上書きする。.fontを付与する必要はない。

font-first_デザインフォント01に変更しました

font-second_デザインフォント02に変更しました

font-third_デザインフォント03に変更しました

ここはデザインフォント01ですが、font-root_ここからbody要素のフォントに変更しました

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

  <p class="text-xl font-first">font-first_デザインフォント01に変更しました</p>
  <p class="text-xl font-second">font-second_デザインフォント02に変更しました</p>
  <p class="text-xl font-third">font-third_デザインフォント03に変更しました</p>
  <p class="text-xl font-first">ここはデザインフォント01ですが、<span class="font-root">font-root_ここからbody要素のフォントに変更しました</span></p>
  <p class="text-xl font-mono">font-mono_等幅フォントに変更しました &lt;p class="font-mono"&gt;hello world!&lt;/p&gt;</p>