Applying the Saira SuperflyCSS Font Utility to an Element and its Children

Image by DavidRockDesign from Pixabay

Scenario

We have the following markup

<main>
   <h1>Hello</h1>
   <section>
      <p>This should be styled with the Sara Font Utility</p>
   </section>
</main>

And we want both the h1 and p element to be styled with the SuperflyCSS u-font-saira-400 utility.

Approach

The font-family property gets inherited by child elements, so all we need to do is apply the font utility u-font-saira-400 to the main element like this:

<main class="u-font-saira-400">
   <h1>Hello</h1>
   <section>
      <p>This should be styled with the Sara Font Utility</p>
   </section>
</main>

Prototype

To test this out first install the SuperflyCSS CLI:

npm i @superflycss/cli

Create a new project:

sfc new p
cd p

Then install the font utilities:

npm i @superflycss/utilities-fonts

Update src/test/css/index.css so that it looks like this:

@import "../../main/css/";
@import "@superflycss/utilities-fonts/google/saira";

And src/test/html/index.html with the html markup.

Then run the live server :

sfc s