fix: font family tools and settings

Author: mikemai2awesome

packages/core/styles/01-settings/settings-font-family/_settings-font-family.scss

@@ -20,7 +20,7 @@ $bolt-font-family--sans-fallback:
   'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', /* [2] */
   'Helvetica Neue', sans-serif !default;
 $bolt-font-family--serif: 'Georgia', serif;
-$bolt-font-family--mono-fallback: monospace;
+$bolt-font-family--mono-fallback: monospace, monospace;
 
 
 /*
@@ -29,7 +29,7 @@ $bolt-font-family--mono-fallback: monospace;
 $bolt-font-family--sans:  'Open Sans', 'Helvetica Neue', sans-serif !default;
 $bolt-font-family--sans-subset: 'OpenSansSubset', 'Helvetica Neue', sans-serif !default;
 $bolt-font-family--serif: 'Georgia', serif;
-$bolt-font-family--mono:  'Courier New', monospace;
+$bolt-font-family--mono:  monospace, monospace;
 
 
 /*
@@ -63,4 +63,4 @@ $bolt-font-families: (
   )
 );
 
-@include export-data('typography/font-families.bolt.json', $bolt-font-families);
+@include export-data('typography/font-families.bolt.json', $bolt-font-families);

packages/core/styles/02-tools/tools-font-family/_tools-font-family.scss

@@ -17,20 +17,28 @@
   $custom-font-family: map-get-deep($bolt-font-families, 'font-families', $type, 'custom-font');
   $fonts-loaded-class: map-get-deep($bolt-font-families, 'font-families', $type, 'loaded-class');
 
+  $fontFamilyNames: map-keys(map-get($bolt-font-families, 'font-families')); // get the names of all available font families (custom and fallback)
+
   font-family: $fallback-font-family;
-  font-family: var(--bolt-font-family);
+  font-family: var(--bolt-font-family-#{$type});
 
   @if $is_root == false {
     .#{$fonts-loaded-class} & {
       font-family: $custom-font-family;
-      font-family: var(--bolt-font-family);
+      font-family: var(--bolt-font-family-#{$type});
     }
   }
   @else {
-    --bolt-font-family: #{$fallback-font-family};
+
+    @each $fontFamilyName in $fontFamilyNames {
+      --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'fallback-font') ;};
+    }
 
     &.#{$fonts-loaded-class} {
-      --bolt-font-family: #{$custom-font-family};
+      @each $fontFamilyName in $fontFamilyNames {
+        --bolt-font-family-#{$fontFamilyName}: #{map-get-deep($bolt-font-families, 'font-families', $fontFamilyName, 'custom-font') ;};
+      }
+
       font-family: $custom-font-family;
     }
   }