Add variable fonts

src/base/_fonts.scss

@@ -0,0 +1,49 @@
+@mixin _non-variable-font-face($name, $path, $parameter) {
+  @font-face {
+    font-family: $name;
+    src: url('../src/fonts/#{$path}/#{$parameter}.woff2') format('woff2'),
+      url('../src/fonts/#{$path}/#{$parameter}.woff') format('woff');
+    @if (type-of($parameter) == 'number') {
+      font-weight: $parameter;
+    } @else {
+      font-style: $parameter;
+    }
+  }
+}
+
+@mixin _variable-font-face($name, $path, $style) {
+  @font-face {
+    font-family: 'Source Sans Pro Variable';
+    src: url('../src/fonts/#{$path}.woff2') format('woff2-variations'),
+      url('../src/fonts/#{$path}.woff2') format('woff2');
+    font-weight: 100 900;
+    font-style: $style;
+  }
+}
+
+@include _variable-font-face(
+  'Source Sans Pro Variable',
+  'source-sans-pro-latin-extended/variable-regular',
+  normal
+);
+@include _variable-font-face(
+  'Source Sans Pro Variable',
+  'source-sans-pro-latin-extended/variable-italic',
+  italic
+);
+
+// Fallback for browsers that don't support variable fonts
+
+@each $style in 400, 600, 700, italic {
+  @include _non-variable-font-face(
+    'Source Sans Pro',
+    'source-sans-pro-latin-extended',
+    $style
+  );
+}
+
+@include _non-variable-font-face(
+  'Source Code Pro',
+  'source-code-pro-latin',
+  400
+);

src/base/_typography.scss

@@ -1,3 +1,5 @@
+@use '_fonts';
+
 /**
  * Promote consistent line spacing.
  *
@@ -14,4 +16,9 @@ html {
 body {
   text-size-adjust: none; /* 1 */
   word-wrap: break-word; /* 2 */
+  font-family: 'Source Sans Pro', sans-serif;
+
+  @supports (font-variation-settings: normal) {
+    font-family: 'Source Sans Pro Variable', sans-serif;
+  }
 }

src/demo/button/button.scss

@@ -4,6 +4,10 @@
 .demo-button {
   color: colors.$primary-brand;
   transition: transform motion.$speed-quick motion.$ease-out;
+
+  // TODO: These font styles are temporary, for demo purposes
+  font-family: inherit;
+  font-size: 18px;
 }
 
 .demo-button:hover {