SiteWebAstrolabe/src/scss/_typography.scss

/* varela-round-regular - latin */
@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Varela Round Regular'), local('VarelaRound-Regular'),
    url('/fonts/varela-round-v12-latin-regular.woff') format('woff');
}

/* varela-regular - latin */
@font-face {
  font-family: 'Varela';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Varela'),
    url('/fonts/varela-v10-latin-regular.woff') format('woff'), /* Modern Browsers */
}

/* open-sans-300 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Open Sans Light'), local('OpenSans-Light'),
    url('/fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */
}

/* open-sans-regular - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
    url('/fonts/open-sans-v17-latin-regular.woff') format('woff'), /* Modern Browsers */
}
/* open-sans-600 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
    url('/fonts/open-sans-v17-latin-600.woff') format('woff'), /* Modern Browsers */
}
/* open-sans-700 - latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Open Sans Bold'), local('OpenSans-Bold'),
    url('/fonts/open-sans-v17-latin-700.woff') format('woff'), /* Modern Browsers */
}

body {
  $line-height: get-size(600);
  @include apply-utility('font', 'base');

  // Strip the unit off the size ratio to generate a line height
  line-height: calc($line-height / 1);
}

h1,
h2 {
  @include apply-utility('font', 'brand');
}

h1 {
  font-size: 2.125rem;
  line-height: 1.4;
  font-weight: 400;
}

h2 {
  font-size: 1.5rem;
  font-weight: 400;
}

h3 {
  font-size: get-size(500);
}

@media (max-width: 575.98px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  // h3 {
  //   font-size: get-size(700);
  // }
}