homepage/styles/_typography.scss

$normal-weight: 400;
$emphasized-weight: 600;

// This is the major third type scale.
$base-size: 1rem;
$title-size: 2.44rem;
$heading-size: 1.95rem;
$subheading-size: 1.56rem;

$base-line-height: 1.5;
$heading-line-height: 1.3;

$comfortaa-weights: (
  'Light': 300,
  'Regular': 400,
  'Medium': 500,
  'Semi-bold': 600,
  'Bold': 700,
);

@each $name, $weight in $comfortaa-weights {
  @font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: $weight;
    font-display: swap;
    src: url('/assets/fonts/Comfortaa-#{$name}.ttf') format('truetype');
  }
}

@font-face {
  font-family: 'Comfortaa Variable';
  font-style: normal;
  font-display: swap;
  src: url('/assets/fonts/Comfortaa-VariableFont_wght.ttf') format('truetype');
}

html {
  $fallback-fonts: Roboto, Arial, sans-serif;

  font-size: 125%; // Scale from 16px to 20px
  font-family: Comfortaa, $fallback-fonts;
  font-weight: $normal-weight;

  @supports (font-variation-settings: normal) {
    font-family: 'Comfortaa Variable', $fallback-fonts;
  }
}

body {
  font-size: $base-size;
  line-height: $base-line-height;
}