Font families

You can use Sailor config file to add your font families. This can be useful if you want to centralize your configuration or use the same configuration base for all projects.

Configuration

config.scss


   $s-font-families: (
      'ff-body': ('geomanist', arial, sans-serif),
      'ff-mono': ('silkamono', monospace),
      // etc.
   ),

Compiled output as CSS custom properties (CSS variables)

output.css


   :root {
      --ff-body: geomanist, arial, sans-serif;
      --ff-mono: silkamono, monospace;
   }

How to use it

_partial.scss


   .element {
      font-family: var(--ff-body);
   }