SCSS mixin to load fonts.

fonts.scss

@mixin font($font-family, $font-file, $font-weight) {
  @font-face {
    font-family: $font-family;
    // Add font types here
    src: url($font-file+'.ttf') format('truetype');
    font-weight: $font-weight;
    font-style: normal;
    font-display: swap;
  }
}

// Alias import with gatsby-plugin-alias-import
@include font('Open Sauce Sans', '@fonts/OpenSauceSans-Bold', 700);
@include font('Open Sauce Sans', '@fonts/OpenSauceSans-Medium', 500);
@include font('Open Sauce Sans', '@fonts/OpenSauceSans-Regular', 400);
@include font('Open Sauce Sans', '@fonts/OpenSauceSans-SemiBold', 600);