diff --git a/package-lock.json b/package-lock.json
index 34dda66fb..e02a8d360 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7880,7 +7880,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7901,12 +7902,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7921,17 +7924,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -8048,7 +8054,8 @@
         "inherits": {
           "version": "2.0.4",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -8060,6 +8067,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -8074,6 +8082,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -8081,12 +8090,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.9.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -8105,6 +8116,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -8194,7 +8206,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8206,6 +8219,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8291,7 +8305,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -8327,6 +8342,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8346,6 +8362,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -8389,12 +8406,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/src/base/_fonts.scss b/src/base/_fonts.scss
new file mode 100644
index 000000000..ebf828d28
--- /dev/null
+++ b/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
+);
diff --git a/src/base/_typography.scss b/src/base/_typography.scss
index 53bf34fdd..e9af27d6e 100644
--- a/src/base/_typography.scss
+++ b/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;
+  }
 }
diff --git a/src/demo/button/button.scss b/src/demo/button/button.scss
index 6301d1579..08f74cd63 100644
--- a/src/demo/button/button.scss
+++ b/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 {
diff --git a/src/fonts/source-code-pro-latin/400.woff b/src/fonts/source-code-pro-latin/400.woff
new file mode 100644
index 000000000..7daeecc8a
Binary files /dev/null and b/src/fonts/source-code-pro-latin/400.woff differ
diff --git a/src/fonts/source-code-pro-latin/400.woff2 b/src/fonts/source-code-pro-latin/400.woff2
new file mode 100644
index 000000000..ea28ed1c9
Binary files /dev/null and b/src/fonts/source-code-pro-latin/400.woff2 differ
diff --git a/src/fonts/source-sans-pro-latin-extended/400.woff b/src/fonts/source-sans-pro-latin-extended/400.woff
new file mode 100644
index 000000000..cbe77cdd1
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/400.woff differ
diff --git a/src/fonts/source-sans-pro-latin-extended/400.woff2 b/src/fonts/source-sans-pro-latin-extended/400.woff2
new file mode 100644
index 000000000..f9e23dfd6
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/400.woff2 differ
diff --git a/src/fonts/source-sans-pro-latin-extended/600.woff b/src/fonts/source-sans-pro-latin-extended/600.woff
new file mode 100644
index 000000000..084417a7a
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/600.woff differ
diff --git a/src/fonts/source-sans-pro-latin-extended/600.woff2 b/src/fonts/source-sans-pro-latin-extended/600.woff2
new file mode 100644
index 000000000..3a25d7fca
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/600.woff2 differ
diff --git a/src/fonts/source-sans-pro-latin-extended/700.woff b/src/fonts/source-sans-pro-latin-extended/700.woff
new file mode 100644
index 000000000..37363a431
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/700.woff differ
diff --git a/src/fonts/source-sans-pro-latin-extended/700.woff2 b/src/fonts/source-sans-pro-latin-extended/700.woff2
new file mode 100644
index 000000000..3a11398a1
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/700.woff2 differ
diff --git a/src/fonts/source-sans-pro-latin-extended/italic.woff b/src/fonts/source-sans-pro-latin-extended/italic.woff
new file mode 100644
index 000000000..4ff4c6400
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/italic.woff differ
diff --git a/src/fonts/source-sans-pro-latin-extended/italic.woff2 b/src/fonts/source-sans-pro-latin-extended/italic.woff2
new file mode 100644
index 000000000..ed79c1c71
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/italic.woff2 differ
diff --git a/src/fonts/source-sans-pro-latin-extended/variable-italic.woff2 b/src/fonts/source-sans-pro-latin-extended/variable-italic.woff2
new file mode 100644
index 000000000..0e92eff73
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/variable-italic.woff2 differ
diff --git a/src/fonts/source-sans-pro-latin-extended/variable-regular.woff2 b/src/fonts/source-sans-pro-latin-extended/variable-regular.woff2
new file mode 100644
index 000000000..e2e87e2fe
Binary files /dev/null and b/src/fonts/source-sans-pro-latin-extended/variable-regular.woff2 differ