Cleanup font configuration and fix some inconsistencies (#5028)

- Avoid manually specifying fonts when we have a SCSS variable
- Avoid duplicate specifying of font configuration variables
- Use Google Sans consistently in footer
- Use `$site-font-family-base` over `$site-font-family-roboto` to allow
for easier future changes away from Roboto

Author: parlough

src/_sass/_dash.scss

@@ -22,7 +22,7 @@ $dash-max-width: 1330px;
 }
 
 .dash-header-callout {
-  font-family: "Google Sans", "Roboto", sans-serif;
+  font-family: $site-font-family-alt;
   background-color: $dash-callout;
   text-align: center;
   padding: 64px 0 64px 0 !important;
@@ -108,7 +108,7 @@ $dash-max-width: 1330px;
 }
 
 .dash-dart-features {
-  font-family: "Google Sans", "Roboto", sans-serif;
+  font-family: $site-font-family-alt;
   padding-bottom: 80px !important;
   background-color: $dark-darker-black;
 
@@ -207,7 +207,7 @@ $dash-max-width: 1330px;
     }
 
     .content-desc {
-      font-family: Roboto, Arial, sans-serif;
+      font-family: $site-font-family-base;
       font-weight: lighter;
       font-size: 17px;
       line-height: 24px;
@@ -372,7 +372,7 @@ $dash-max-width: 1330px;
 }
 
 .dart-dash-details {
-  font-family: "Google Sans", "Roboto", sans-serif;
+  font-family: $site-font-family-alt;
 
   a {
     text-decoration: underline;

src/_sass/components/_banner.scss

@@ -8,7 +8,7 @@
   z-index: 1000;
 
   &__text {
-    font-family: $site-font-family-roboto;
+    font-family: $site-font-family-base;
     font-size: 16px;
     font-weight: 300;
 

src/_sass/components/_sidebar.scss

@@ -136,7 +136,7 @@
     }
 
     .nav-link {
-      font-family: $site-font-family-roboto;
+      font-family: $site-font-family-base;
       font-weight: 400;
       color: $site-color-body;
       font-size: $font-size-small;

src/_sass/core/_base.scss

@@ -3,7 +3,7 @@
 @use '../core/bootstrap';
 
 body {
-  font-family: $font-family-base;
+  font-family: $site-font-family-base;
   font-size: $font-size-base;
   font-weight: 400;
   color: $site-color-body;
@@ -56,7 +56,7 @@ dt {
 a, button {
   text-decoration: none;
   color: $brand-primary;
-  font-family: $site-font-family-roboto;
+  font-family: $site-font-family-base;
   font-weight: 400;
 
   &:visited {

src/_sass/core/_bootstrap.scss

@@ -1,4 +1,5 @@
 @use '../core/variables' as *;
+@use '../core/colors';
 
 // Import from NPM library directly
 @forward '../../../node_modules/bootstrap-scss/bootstrap' with (
@@ -82,7 +83,7 @@
   $nav-tabs-link-active-color: $site-color-body,
   $nav-tabs-link-active-border-color: transparent transparent $site-color-primary,
 
-  $tooltip-bg: #343a40, // $gray-800; // So we can see against black terminal bg
+  $tooltip-bg: colors.$grey-800,
 
   $enable-shadows: true,
 

src/_sass/core/_colors.scss

@@ -64,6 +64,7 @@ $cyan-A700: #00B8D4;
 
 $grey-400: #BDBDBD;
 $grey-500: #9E9E9E;
+$grey-800: #343a40;
 $grey-900: #212121;
 
 $green-50: #E8F5E9;

src/_sass/core/_variables.scss

@@ -62,13 +62,6 @@ $site-font-size-header: 16px;
 $site-color-primary: $brand-primary;
 $site-color-sidebar-active: #1389FD;
 
-// Typography
-$font-size-base:            1.0rem; // 16px
-$font-size-base-weight:     400;
-$font-family-base:          Roboto, sans-serif;
-$font-family-monospace:     "Google Sans Mono", "Roboto Mono", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
-$google-font-family:        "Product Sans", $font-family-base;
-
 // Sidenav, toc, and footer
 $font-size-small:         14px;
 
@@ -84,9 +77,15 @@ $site-font-family-gsans-display: 'Google Sans Display', 'Google Sans', 'Roboto',
 $site-font-family-base: $site-font-family-roboto;
 $site-font-family-alt: $site-font-family-gsans;
 $site-font-family-icon: 'Material Icons';
-$site-font-family-monospace: 'Google Sans Mono', 'Roboto Mono', monospace;
+$site-font-family-monospace: 'Google Sans Mono', 'Roboto Mono', Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
 $site-font-icon: 24px/1 $site-font-family-icon;
 
+// Typography
+$font-size-base: 1.0rem; // 16px
+$font-size-base-weight: 400;
+$font-family-base: $site-font-family-base;
+$font-family-monospace: $site-font-family-monospace;
+
 // Layout
 $site-header-height: 50px;
 $site-header-with-banner-height: 98px; // 50 + 48

src/_sass/site.scss

@@ -100,7 +100,7 @@ i.fa-external-link-alt {
 
   color: $site-color-light-grey;
   font-weight: 400;
-  font-family: $site-font-family-gsans;
+  font-family: $site-font-family-alt;
   font-size: $font-size-small;
 
   .footer-section {
@@ -173,6 +173,7 @@ i.fa-external-link-alt {
 
   a {
     color: $site-color-light-grey;
+    font-family: $site-font-family-alt;
 
     &:hover, &:focus, &:active {
       color: $site-color-white;
@@ -220,6 +221,7 @@ i.fa-external-link-alt {
         padding: 0 6px;
         font-size: $site-font-size-header;
         font-weight: 400;
+        font-family: $site-font-family-alt;
 
         &:hover, &:active {
           color: $site-color-card-link;