font-face.scss

/// @name Font Face
/// @description Loads woff/local type fonts
/// @version 1.0.2
/// @param {String} $font-family
/// @param {String} $fallback - fallback system font to use until main font is rendered [sans-serif]
/// @param {URL} $file - the URL of the font without extension, it will assume the woff type has the same file name
/// @param {String | Number} $weight [normal]
/// @param {String} $style [normal]

/*
@include font-face("grotesk", "hkgrotesk-regularlegacy", 400, "normal", "sans-serif");
@include font-face("grotesk", "hkgrotesk-regularlegacy");
*/

@mixin font-face($font-family, $file, $weight: "normal", $style: "normal", $fallback: 'sans-serif') {
  $path: "{{ 'placeholder.woff' | asset_url | split: 'placeholder.woff' | first }}";
  @font-face {
    font-family: "#{$font-family}";
    src: local("#{$font-family}"),
    local("#{$fallback}"),
    url("#{$path + $file}.woff2") format("woff2"),
    url("#{$path + $file}.woff") format("woff");
    font-weight: $weight;
    font-style: $style;
    font-display: swap;
  }
}