Add prep code for self-hosted webfonts

- Add placeholder directory for self-hosted webfonts
- Adapt config.js so that webfonts from that placholder directory
  are copied to dist/ in deploy task
- Add + include mixins for modern + legacy webfont code
- Add project-specific partial to include webfont SCSS in order to
  make sure that the webfonts SCSS gets included in the compiled
  CSS as early as possible
- Document mixin and project file

config.js

@@ -41,6 +41,7 @@ module.exports = {
                     'robots.txt',
                     'apple-touch-icon.png',
                     'favicon.ico',
+                    'fonts/**/*',
                     'scripts/jquery/dist/jquery.min.js',
                     'scripts/jquery/dist/jquery.min.map'
               ],

docs/scss-concepts.md

@@ -9,6 +9,7 @@ Most of the partials in `src/scss` and its subdirectories are **not** meant to b
 * `src/scss/master.scss` – see [Compiled CSS](#compiled-css)
 * `src/scss/project/_settings.scss` – see [Settings](#settings)
 * `src/scss/project/_variables.scss` – see [Overriding defaults](#overriding-defaults)
+* `src/scss/project/_fonts.scss` – see [SCSS docs](scss.md#project)
 * partials in `src/scss/modules` – add project-specific global styles to `_global.scss`, create new partials for project-specific modules
 
 ## Overriding defaults

docs/scss.md

@@ -8,6 +8,7 @@ Apart from the main SCSS file (`master.scss`), the `src/scss` directory contains
 
 * `_settings.scss` – enable or disable parts of the partials included in the boilerplate by setting certain variables to `true` or `false`, depending on whether that part of the SCSS is being used
 * `_variables.scss` – project-specific constants or overrides for existing variables
+* `_fonts.scss` – project-specific SCSS for (self-hosted) [webfonts](https://github.com/yellowled/yl-bp/blob/master/src/scss/mixins/_webfonts.scss) should be added here to make sure it is included as early as possible in the compiled CSS
 
 ## `mixins/_mixins.scss`
 
@@ -24,6 +25,7 @@ Apart from the main SCSS file (`master.scss`), the `src/scss` directory contains
 * `_tables.scss` – tables (simple, striped, responsive)
 * `_tabs.scss` – [tabs](http://frend.co/components/tabs/)
 * `_typography.scss` – ligatures, smart blockquotes
+* `_webfonts.scss` – self-hosted webfonts
 
 ## `base/_base.scss`
 

src/scss/master.scss

@@ -4,6 +4,7 @@
 // Project-specific settings
 @import 'project/settings';
 @import 'project/variables';
+@import 'project/fonts';
 
 // Framework
 @import '../../node_modules/node-normalize-scss/normalize';

src/scss/mixins/_mixins.scss

@@ -11,4 +11,5 @@
 @import 'shapes';
 @import 'tables';
 @import 'tabs';
-@import 'typography';
+@import 'typography';
+@import 'webfonts';

src/scss/mixins/_webfonts.scss

@@ -0,0 +1,32 @@
+// SELF-HOSTED WEBFONTS
+// --------------------------------------------------------------------
+// Defaults
+$font-path:     '../fonts' !default;
+
+
+// For modern browsers
+@mixin webfont($family, $src, $style: normal, $weight: normal, $path: $font-path) {
+	@font-face {
+		font-family: $family;
+		src: url('#{$path}/#{$src}.woff2') format('woff2'),                   // new standards
+		     url('#{$path}/#{$src}.woff') format('woff'),                     // standards
+             url('#{$path}/#{$src}.ttf') format('truetype');                  // Safari, Android, iOS
+		font-style: $style;
+		font-weight: $weight;
+	}
+}
+
+// For legacy browsers
+@mixin legacy-webfont($family, $src, $style: normal, $weight: normal, $path: $font-path) {
+	@font-face {
+		font-family: $family;
+		src: url('#{$path}/#{$src}.eot');                                     // IE9 compat
+		src: url('#{$path}/#{$src}.eot?#iefix') format('embedded-opentype'),  // IE8 and below
+             url('#{$path}/#{$src}.woff2') format('woff2'),                   // new standards
+		     url('#{$path}/#{$src}.woff') format('woff'),                     // standards
+             url('#{$path}/#{$src}.ttf') format('truetype'),                  // Safari, Android, iOS
+             url('#{$path}/#{$src}.svg##{$family}') format('svg');            // legacy iOS
+		font-style: $style;
+		font-weight: $weight;
+	}
+}

src/scss/project/_fonts.scss

@@ -0,0 +1,2 @@
+// FONTS
+// --------------------------------------------------------------------