When you need to add custom font styles in specific places, rely on these utility classes to handle it.

Font Family

Change an element and/or it’s children to use sans or sans-serif font family as defined in your _config.scss.

I'm in sans-serif font!

I'm in serif font!

<p class="has-font-sans">I'm in sans-serif font!</p>
<p class="has-font-serif">I'm in serif font!</p>

Text Align

Align text left, right, or center.

I'm aligned left!

I'm aligned center!

I'm aligned right!

<p class="has-text-start">I'm aligned left!</p>
<p class="has-text-center">I'm aligned center!</p>
<p class="has-text-end">I'm aligned right!</p>

Font Weight

Make your font bold or italic.

I'm bold!

I'm italic!

<p class="has-font-bold">I'm bold!</p>
<p class="has-font-italic">I'm italic!</p>

Is there information missing? Edit this page on Github!