_font.scss

$hk-grotesk-path: '../fonts/hkgrotesk-';
$weights: 300, 400, 500, 600, 700, 800, 900;

@each $weight in $weights {
  @font-face {
    font-family: 'hk grotesk';
    src: url('#{$hk-grotesk-path}#{$weight}-webfont.woff2') format('woff2'),
         url('#{$hk-grotesk-path}#{$weight}-webfont.woff') format('woff');
    font-weight: $weight;
    font-style: normal;
    font-display: swap;
  }
}