Font fallbacks

assets/styles/settings/_config.scss

@@ -16,12 +16,25 @@ $assets-path: "../"  !default;
 
 $font-dir: "../fonts/";
 
+$font-fallback-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+$font-fallback-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
+$font-fallback-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
+
 $font-families: (
-    "sans": ("Webfont Sans", "Helvetica Neue", Arial, sans-serif),
-    // "serif": ("Webfont Serif", Georgia, serif)
+    "sans": ("Webfont Sans", $font-fallback-sans),
+    // "serif": ("Webfont Serif", $font-fallback-serif),
+    // "mono": ("Webfont Mono", $font-fallback-mono)
 );
 
+// Font faces list:
+//
+// 1. Font name used in $font-families
+// 2. Font filename
+// 3. Font weight
+// 4. Font style
+
 $font-faces: (
+    // [1] [2] [3] [4]
     // "Webfont Sans" "webfont-sans_regular" 400 normal,
     // "Webfont Sans" "webfont-sans_regular-italic" 400 italic,
     // "Webfont Serif" "webfont-sans_bold" 700 normal,