diff --git a/config.js b/config.js
index 686ca6a..6e7de8e 100644
--- a/config.js
+++ b/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'
               ],
diff --git a/docs/scss-concepts.md b/docs/scss-concepts.md
index 456f675..e417a72 100644
--- a/docs/scss-concepts.md
+++ b/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
diff --git a/docs/scss.md b/docs/scss.md
index 8285527..a113118 100644
--- a/docs/scss.md
+++ b/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`
 
diff --git a/src/fonts/.gitignore b/src/fonts/.gitignore
new file mode 100644
index 0000000..e69de29
diff --git a/src/scss/master.scss b/src/scss/master.scss
index 4ad1950..f3a6b46 100644
--- a/src/scss/master.scss
+++ b/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';
diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss
index a3f2bf9..392667b 100644
--- a/src/scss/mixins/_mixins.scss
+++ b/src/scss/mixins/_mixins.scss
@@ -11,4 +11,5 @@
 @import 'shapes';
 @import 'tables';
 @import 'tabs';
-@import 'typography';
\ No newline at end of file
+@import 'typography';
+@import 'webfonts';
\ No newline at end of file
diff --git a/src/scss/mixins/_webfonts.scss b/src/scss/mixins/_webfonts.scss
new file mode 100644
index 0000000..3cf6897
--- /dev/null
+++ b/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;
+	}
+}
\ No newline at end of file
diff --git a/src/scss/project/_fonts.scss b/src/scss/project/_fonts.scss
new file mode 100644
index 0000000..bed622e
--- /dev/null
+++ b/src/scss/project/_fonts.scss
@@ -0,0 +1,2 @@
+// FONTS
+// --------------------------------------------------------------------
\ No newline at end of file