Update fontface system with scss lists, function and mixin

assets/styles/elements/_fonts.scss

@@ -2,35 +2,9 @@
 // Base / Fonts
 // ==========================================================================
 
-// @include font-face(
-//     $font-foobar,
-//     "fonts/Foobar/Regular"
-// ) {
-//     font-style:  normal;
-//     font-weight: 400;
-// }
+@include fontfaces($fontfaces, $font-dir);
 
-// @include font-face(
-//     $font-foobar,
-//     "fonts/Foobar/Medium"
-// ) {
-//     font-style:  normal;
-//     font-weight: 500;
-// }
-
-// @include font-face(
-//     $font-foobar,
-//     "fonts/Foobar/Semibold"
-// ) {
-//     font-style:  normal;
-//     font-weight: 600;
-// }
-
-// @include font-face(
-//     $font-bazqux,
-//     "fonts/Bazqux/Regular",
-//     ("eot", "woff2", "woff", "ttf")
-// ) {
-//     font-style:  normal;
-//     font-weight: 400;
-// }
+body {
+    line-height: $line-height;
+    font-family: ff("sans");
+}

assets/styles/elements/_page.scss

@@ -12,7 +12,6 @@
 html {
     min-height: 100%; /* [2] */
     color: $color;
-    font-family: $font-family;
     line-height: $line-height; /* [1] */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

assets/styles/settings/_config.scss

@@ -12,14 +12,25 @@ $assets-path: "../"  !default;
 
 // Typefaces
 // =============================================================================
-$font-sans-serif: sans-serif;
+
+$font-dir: "../fonts/";
+
+$font-families: (
+    "sans": ("Webfont Sans", "Helvetica Neue", Arial, sans-serif),
+    // "serif": ("Webfont Serif", Georgia, serif)
+);
+
+$fontfaces: (
+    // "Webfont Sans" "webfont-sans_regular" 400 normal,
+    // "Webfont Sans" "webfont-sans_regular-italic" 400 italic,
+    // "Webfont Serif" "webfont-sans_bold" 700 normal,
+);
 
 // Typography
 // =============================================================================
 // Base
 $font-size:   16px;
 $line-height: 24px / $font-size;
-$font-family: $font-sans-serif;
 $color:       #222222;
 // Headings
 $font-size-h1:  36px  !default;

assets/styles/tools/_fonts.scss

@@ -2,97 +2,26 @@
 // Tools / Font Faces
 // ==========================================================================
 
-$global-font-file-formats: "woff2", "woff" !default;
-
-//
-// Builds the `src` list for an `@font-face` declaration.
-//
-// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
-// @link http://goo.gl/Ru1bKP
-//
-// @param  {String} $font-family  - The font family name.
-// @param  {String} $file-path    - The path to the font family.
-// @param  {List}   $file-formats - The file formats to request.
-// @return {List}
-//
-// @require {function} list-contains
-//
-// @access private
-//
-@function font-source-declaration(
-    $font-family,
-    $file-path,
-    $file-formats
-) {
-    $src: ();
-    $formats-map: (
-        eot:   "#{$file-path}.eot?#iefix" format("embedded-opentype"),
-        woff2: "#{$file-path}.woff2" format("woff2"),
-        woff:  "#{$file-path}.woff" format("woff"),
-        ttf:   "#{$file-path}.ttf" format("truetype"),
-        svg:   "#{$file-path}.svg##{$font-family}" format("svg"),
-    );
-
-    @each $key, $values in $formats-map {
-        @if list-contains($file-formats, $key) {
-            $file-path: nth($values, 1);
-            $font-format: nth($values, 2);
-            $src: append($src, url("#{$assets-path}#{$file-path}") $font-format, comma);
+// Mixin
+@mixin fontfaces($webfonts, $dir) {
+    @each $webfont in $webfonts {
+        @font-face {
+            font-display: swap;
+            font-family: nth($webfont, 1);
+            src: url("#{$dir}#{nth($webfont, 2)}.woff2") format("woff2"),
+                 url("#{$dir}#{nth($webfont, 2)}.woff") format("woff");
+            font-weight: #{nth($webfont, 3)};
+            font-style: #{nth($webfont, 4)};
         }
     }
-
-    @return $src;
 }
 
-//
-// Generates an `@font-face` declaration.
-//
-// You can choose the specific file formats you need to output; the mixin supports
-// `eot`, `ttf`, `svg`, `woff2` and `woff`.
-//
-// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-face.scss
-//
-// @param {String}      $font-family - The font family name.
-// @param {String}      $file-path   - The path to the font family.
-// @param {String|List} $file-formats [("ttf", "woff2", "woff")]
-//     A list of file formats to support,
-//     for example ("eot", "ttf", "svg", "woff2", "woff").
-//
-// @content
-//     Any additional CSS properties that are included in the `@include`
-//     directive will be output within the `@font-face` declaration, e.g.
-//     you can pass in `font-weight`, `font-style` and/or `unicode-range`.
-//
-// @example scss
-//   @include font-face(
-//       "source-sans-pro",
-//       "fonts/source-sans-pro-regular",
-//       ("woff2", "woff")
-//     ) {
-//     font-style: normal;
-//     font-weight: 400;
-//   }
-//
-//   // CSS Output
-//   @font-face {
-//     font-family: "source-sans-pro";
-//     src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
-//          url("fonts/source-sans-pro-regular.woff") format("woff");
-//     font-style: normal;
-//     font-weight: 400;
-//   }
-//
-// @require {function} _font-source-declaration
-// @require {function} _retrieve-bourbon-setting
-//
-@mixin font-face(
-    $font-family,
-    $file-path,
-    $file-formats: $global-font-file-formats
-) {
-    @font-face {
-        font-family: $font-family;
-        src: font-source-declaration( $font-family, $file-path, $file-formats);
-        @content;
-    }
+// Function
+@function ff($font-family) {
+    @if not map-has-key($font-families, $font-family) {
+       @error "No font-family found in $font-families map for `#{$font-family}`. Property omitted.";
+   }
+
+    $value: map-get($font-families, $font-family);
+    @return $value;
 }