<h1 class="entry-title">Hello World</h1>
// ------------------------------------------------------------
// Font Stacks
// ------------------------------------------------------------

// Example Font Stack Usage
// @include font(light);
// @include font(body);
// @include font(medium);
// @include font(semibold);
// @include font(bold);
// @include font(black);

@mixin main-font($fontstack) {

  $freight: (
    regular: "Verdana",
    semibold: "Verdana",
    bold: "Verdana"
  );

  $weights: (
    regular: 300,
    semibold: 700,
    bold: 900
  );

  $fallback: (
    regular: normal,
    semibold: bold,
    bold: bold
  );

  font-family: map-get($freight, $fontstack), sans-serif;
  font-weight: map-get($weights, $fontstack);
}

@mixin alt-font($fontstack) {

  $freight: (
    regular: "Courier New",
    semibold: "Courier New",
    bold: "Courier New"
  );

  $weights: (
    regular: 300,
    semibold: 600,
    bold: 700
  );

  $fallback: (
    regular: normal,
    semibold: bold,
    bold: bold
  );

  font-family: map-get($freight, $fontstack), sans-serif;
  font-weight: map-get($weights, $fontstack);
}

.entry-title {
  @include main-font(bold);
  
  font-size: 44px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.