diff --git a/src/base/_fonts.scss b/src/base/_fonts.scss
index ebf828d28..6cfdb2483 100644
--- a/src/base/_fonts.scss
+++ b/src/base/_fonts.scss
@@ -1,49 +1,57 @@
 @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') {
+    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 {
+    }
+
+    @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-family: "Source Sans Pro Variable";
     font-style: $style;
+    font-weight: 100 900;
+    src:
+      url("../src/fonts/#{$path}.woff2") format("woff2-variations"),
+      url("../src/fonts/#{$path}.woff2") format("woff2");
   }
 }
 
 @include _variable-font-face(
-  'Source Sans Pro Variable',
-  'source-sans-pro-latin-extended/variable-regular',
+  "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',
+  "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',
+    "Source Sans Pro",
+    "source-sans-pro-latin-extended",
     $style
   );
 }
 
 @include _non-variable-font-face(
-  'Source Code Pro',
-  'source-code-pro-latin',
+  "Source Code Pro",
+  "source-code-pro-latin",
   400
 );
diff --git a/src/base/_typography.scss b/src/base/_typography.scss
index 9b30791c4..c1b69bbf9 100644
--- a/src/base/_typography.scss
+++ b/src/base/_typography.scss
@@ -1,4 +1,4 @@
-@use '_fonts';
+@use "_fonts";
 
 /**
  * Promote consistent line spacing.
@@ -16,11 +16,11 @@ html {
  */
 
 body {
+  font-family: "Source Sans Pro", sans-serif;
   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;
+    font-family: "Source Sans Pro Variable", sans-serif;
   }
 }
diff --git a/src/demo/button/button.scss b/src/demo/button/button.scss
index 08f74cd63..c0bdffb20 100644
--- a/src/demo/button/button.scss
+++ b/src/demo/button/button.scss
@@ -3,11 +3,11 @@
 
 .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;
+  transition: transform motion.$speed-quick motion.$ease-out;
 }
 
 .demo-button:hover {