✍️ Font

The font foundation allows you to define reusable, consistent typographic styles across your design system. Each font class is generated using a corresponding mixin, and mapped to a specific font family, size, weight, and line height.

All font foundations follow the naming convention:

.f--font-{variation}

🅰️ Font imports

Your project includes custom font families declared using @font-face, allowing the foundation classes to reference real fonts:

@font-face {
  font-family: 'Fustat';
  src: url('#{$base-path}/fonts/Fustat-Regular.woff2') format('woff2'),
       url('#{$base-path}/fonts/Fustat-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

This setup ensures proper fallback, loading behavior, and style consistency across browsers.

🔧 How to use it

In HTML

<p class="f--font-a">This text uses font style A</p>

In SCSS

Extending the generated foundation class — preferred method:

.c--component-a {
    @extend .f--font-a;
}

Using the mixin directly — only if strictly necessary:

.c--component-a {
   @include make-font-a();
}