Merge pull request #111 from locomotivemtl/feature/font-face

Update fontface system with scss lists, function and mixin

assets/styles/elements/_document.scss

@@ -5,15 +5,19 @@
 //
 // Simple page-level setup.
 //
-// 1. Set the default `font-size` and `line-height` for the entire project,
-//    sourced from our default variables.
+// 1. Include web fonts
 // 2. Ensure the page always fills at least the entire height of the viewport.
-//
+// 3. Set the default `font-size` and `line-height` for the entire project,
+//    sourced from our default variables.
+
+@include font-faces($font-faces, $font-dir); // [1]
+
 html {
-    min-height: 100%; /* [2] */
+    min-height: 100%; // [2]
+    line-height: $line-height;
+    font-family: ff("sans");
     color: $color;
-    font-family: $font-family;
-    line-height: $line-height; /* [1] */
+    line-height: $line-height; // [3]
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 
@@ -30,7 +34,7 @@ html {
     }
 
     @media (min-width: $from-large) and (max-width: $to-huge) {
-        font-size: $font-size; /* [1] */
+        font-size: $font-size; // [1]
     }
 
     @media (min-width: $from-huge) and (max-width: $to-gigantic) {

assets/styles/elements/_fonts.scss

@@ -1,36 +0,0 @@
-// ==========================================================================
-// Base / Fonts
-// ==========================================================================
-
-// @include font-face(
-//     $font-foobar,
-//     "fonts/Foobar/Regular"
-// ) {
-//     font-style:  normal;
-//     font-weight: 400;
-// }
-
-// @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;
-// }

assets/styles/main.scss

@@ -28,8 +28,7 @@
 
 // Elements
 // ==========================================================================
-@import "elements/fonts";
-@import "elements/page";
+@import "elements/document";
 
 // Objects
 // ==========================================================================

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)
+);
+
+$font-faces: (
+    // "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,48 @@
 // Tools / Font Faces
 // ==========================================================================
 
-$global-font-file-formats: "woff2", "woff" !default;
-
 //
-// Builds the `src` list for an `@font-face` declaration.
+// Import the webfont with font-face as woff and woff2
 //
-// @link https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
-// @link http://goo.gl/Ru1bKP
+// @param  {List} $webfont (font name, filename, font-weight, font-style) - Each webfont to import.
+// @param  {String} $dir                                                  - The webfont directory path
+// @output void
 //
-// @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);
-        }
-    }
-
-    @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
-) {
+@mixin font-face($webfont, $dir) {
     @font-face {
-        font-family: $font-family;
-        src: font-source-declaration( $font-family, $file-path, $file-formats);
-        @content;
+        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)};
     }
 }
+
+//
+// Loops through a list of local fonts and import each font-face as woff and woff2
+//
+// @param  {List} $webfonts [(font name, filename, font-weight, font-style)] - Each webfont to import.
+// @param  {String} $dir                                                     - The webfont directory path
+// @output void
+//
+@mixin font-faces($webfonts, $dir) {
+    @each $webfont in $webfonts {
+        @include font-face($webfont, $dir);
+    }
+}
+
+//
+// Map the font-family requires with the existing imported font-families
+//
+// @param  {String} $font-family - The name of the webfont.
+// @return {String} The webfont and it's fallbacks.
+//
+@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;
+}

assets/styles/tools/_mixins.scss

@@ -62,7 +62,7 @@
             line-height: $line-height $important;
         }
         @elseif ($line-height != "none" and $line-height != false) {
-            @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`."
+            @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`.";
         }
     }
 }