Font Configuration

Related

Accoutrement Type [external]

$system-font

scss
$system-font: (
  'name': 'system',
  'stack': (
    'system-ui',
    'sans-serif',
  ),
  '300': (
    'local': $_system-local,
  ),
);

Font Preview system

css
font-family: system, system-ui, sans-serif;

$lato-font

scss
$lato-font: (
  'name': 'lato',
  'stack': (
    'system',
    'system-ui',
    'sans-serif',
  ),
  'formats': (
    'woff2',
    'woff',
  ),
  '300': 'lato-light-webfont',
  'normal': 'lato-regular-webfont',
  'italic': 'lato-italic-webfont',
  'bold': 'lato-bold-webfont',
  'bold' 'italic': 'lato-bolditalic-webfont',
);

Font Preview lato

css
font-family: lato, system, system-ui, sans-serif;

$open-font

scss
$open-font: (
  'name': 'open',
  'stack': (
    'system',
    'system-ui',
    'sans-serif',
  ),
  'formats': (
    'woff2',
    'woff',
  ),
  '300': 'opensans-light-webfont',
  'normal': 'opensans-regular-webfont',
  'italic': 'opensans-italic-webfont',
  'bold': 'opensans-bold-webfont',
  'bold' 'italic': 'opensans-bolditalic-webfont',
);

Font Preview open

css
font-family: open, system, system-ui, sans-serif;

$slab-font

scss
$slab-font: (
  'name': 'slab',
  'stack': (
    'serif',
  ),
  'formats': (
    'woff2',
    'woff',
  ),
  'normal': 'enriqueta-regular-webfont',
  'bold': 'enriqueta-bold-webfont',
);

Font Preview slab

css
font-family: slab, serif;

$script-font

scss
$script-font: (
  'name': 'script',
  'stack': (
    'cursive',
  ),
  'formats': (
    'woff2',
    'woff',
  ),
  'normal': 'kaushanscript-regular-webfont',
);

Font Preview script

css
font-family: script, cursive;