<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.