When you need to add custom font styles in specific places, rely on these utility classes to handle it.
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 style!
I'm in serif style!
<p class="has-sans-font">I'm in sans-serif style!</p>
<p class="has-serif-font">I'm in serif style!</p>
Align text left, right, or center.
I'm aligned left!
I'm aligned center!
I'm aligned right!
<p class="has-sans-font">I'm in sans-serif style!</p>
<p class="has-serif-font">I'm in serif style!</p>
Make your font bold or italic.
I'm bold!
I'm italic!
<p class="is-bold">I'm bold!</p>
<p class="is-italic">I'm italic!</p>
.is-bold { font-weight: $global-font-weight-bold !important; } .is-italic { font-weight: $global-font-style-italic !important;
Is this article inaccurate? Edit this page on Github!