FontStack Mixin

fontStack.sass

$font-stack:
  (group: brandon, id: light, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: normal),
  (group: brandon, id: light-italic, font: ('Brandon Grot W01 Light', san-serif ), weight: 200, style: italic),
  (group: brandon, id: regular, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: normal),
  (group: brandon, id: regular-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
  (group: brandon, id: bold, font: ('Brandon Grot W01 Black', san-serif), weight: 700, style: normal),
  (group: brandon, id: bold-italic, font: ('Brandon Grot W01-Regular', san-serif), weight: 400, style: italic),
  (group: clarendon, id: regular, font: ('Clarendon LT W01', serif), weight: 200, style: normal),
  (group: code, id: regular, font: (monospace), weight: 400, style: normal);

// Breakpoint Mixin
@mixin font($group, $id:regular){
  @each $font in $font-stack{
    @if($group == map-get($font, group) and $id == map-get($font, id)){
      font-family: map-get($font, font);
      font-weight: map-get($font, weight);
      font-style: map-get($font, style);
    }
  }
}

// Usage

h1{
  @include font(brandon, light-italic);
}

p{
  @include font(brandon);
}

p i{
  @include font(brandon, regular-italic);
}

p b{
  @include font(brandon, bold);
}

blockquote{
  @include font(clarendon);
}

code{
  @include font(code);
}

Notes

Group: This is the group name for the font. This is value is shared by fonts. Examples are brandon, clarendon, or even just serif.

ID: Font unique identifier. This should be unique among the group. Examples are bold, light-italic, regular. Regular is the default value.

Font: This is the actual font you want. Include it's stack in a (map) or a variable.

Weight: CSS font-weight of the font you want.

Style: CSS font-style you want.