Font Loading Strategy

Gruntfile.js

@@ -36,7 +36,7 @@ module.exports = function(grunt) {
         sourceMap: true,
         // This controls the compiled css and can be changed to nested, compact or compressed.
         outputStyle: 'expanded',
-        precision: 10
+        precision: 10,
       },
       dist: {
         files: {

core/base/_fonts.scss

@@ -5,19 +5,19 @@
 /// @group base
 ////
 
-// @import '../utilities/settings/settings';
+/// Default fonts
+///
+$decanter-default-fonts: (
+  'mono': (
+    $monospace-source,
+  ),
+  'sans': (
+    $sans-serif-source,
+  ),
+  'serif': (
+    $serif-source,
+  )
+) !default;
 
-/// Import declared monospace font
-@if(global-variable-exists(monospace-source)) {
-  @import url($monospace-source);
-}
-
-/// Import declared Sans Serif font
-@if(global-variable-exists(sans-serif-source)) {
-  @import url($sans-serif-source);
-}
-
-/// Import declared Serif font
-@if(global-variable-exists(serif-source)) {
-  @import url($serif-source);
-}
+//// Load the font-face declarations.
+@include load-fonts($decanter-default-fonts);

core/utilities/functions/_decanter-functions.scss

@@ -7,5 +7,5 @@
 @import
   'color',
   'unitconversion',
-'layout/set-container-padding',
-'layout/adjust-container-margin';
+  'layout/set-container-padding',
+  'layout/adjust-container-margin';

core/utilities/mixins/_decanter-mixins.scss

@@ -20,4 +20,5 @@
 , 'material-shadow'
 , 'font-size'
 , 'on-event'
+, 'load-fonts'
 ;

core/utilities/mixins/_load-fonts.scss

@@ -0,0 +1,72 @@
+@charset 'UTF-8';
+
+////
+/// Font loading function.
+/// @group functions
+////
+
+/// Global default fonts.
+$fonts: () !default;
+
+/// Keeps track of already loaded fonts.
+$loaded-fonts: ();
+
+/// Load a collection of @font-face fonts
+///
+@mixin load-fonts($load: $fonts) {
+
+  // Lists.
+  @if type-of($load) == list {
+    // Loop through each item in the passed in list.
+    @each $_item in $load {
+      // Cast the item to a string to be sure we don't pass
+      // strange variables to the loader.
+      $_item_string: #{$_item};
+      @if (_is-loaded_font($_item_string) == false) {
+        $_tmp: _log-loaded-font($_item_string);
+        $_item_string: quote($_item_string);
+        @import url($_item_string);
+      }
+      @else {
+        @debug "Font: #{$_item_string} already loaded.";
+      }
+    }
+  }
+
+  // Maps.
+  @if type-of($load) == map {
+    // Loop through each item in the passed in map.
+    @each $_index, $_item in $load {
+      @each $_font in $_item {
+        // Cast the item to a string to be sure we don't pass
+        // strange variables to the loader.
+        $_item_string: #{$_font};
+        @if (_is-loaded_font($_item_string) == false) {
+          $_tmp: _log-loaded-font($_item_string);
+          $_item_string: quote($_item_string);
+          @import url($_item_string);
+        }
+        @else {
+          @debug "Font: #{$_item_string} already loaded.";
+        }
+      }
+    }
+  }
+}
+
+/// Internal function to keep track of loaded fonts
+/// so we don't duplicate calls.
+@function _log-loaded-font($url) {
+  $loaded-fonts: append($loaded-fonts, $url, comma) !global;
+  @return true;
+}
+
+
+/// Checks the global variable for loaded fonts
+@function _is-loaded_font($url) {
+  $_value: index($loaded-fonts, $url);
+  @if type-of($_value) == number {
+    @return true;
+  }
+  @return false;
+}