diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
index e47c6a3c34..15a93b9db6 100644
--- a/pkg/web_css/lib/src/_base.scss
+++ b/pkg/web_css/lib/src/_base.scss
@@ -20,7 +20,7 @@ body {
 }
 
 body, input, button, select {
-  font-family: $font-family-google-sans-text;
+  font-family: var(--pub-default-text-font_family);
   -webkit-font-smoothing: antialiased;
   // we don't use font ligatures, and Google Sans fonts would otherwise change text in surprising ways
   font-variant-ligatures: none;
@@ -42,7 +42,7 @@ body,
   font-size: 16px;
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: $font-family-google-sans;
+    font-family: var(--pub-default-text-font_family);
     font-weight: 400;
   }
 
@@ -58,14 +58,6 @@ img {
   max-width: 100%;
 }
 
-// Material Design theme customizations
-:root {
-  --mdc-theme-primary: #0175C2;
-  --mdc-theme-secondary: #0066D9;
-  // Represents $font-family-google-sans-text, but breaks generated CSS.
-  --mdc-typography-font-family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
-}
-
 summary {
   cursor: pointer;
   background: transparent;
@@ -159,7 +151,7 @@ code {
   background: var(--pub-code-background-color);
   border: none;
   border-radius: 4px;
-  font-family: $font-family-google-sans-mono;
+  font-family: var(--pub-code-text-font_family);
   padding: 2px 4px;
 }
 
@@ -255,7 +247,7 @@ pre {
     }
 
     th {
-      font-family: $font-family-google-sans;
+      font-family: var(--pub-default-text-font_family);
       font-size: 16px;
       font-weight: 400; /* overrides github-markdown.css */
       border-bottom: 1px solid #c8c8ca;
diff --git a/pkg/web_css/lib/src/_detail_page.scss b/pkg/web_css/lib/src/_detail_page.scss
index 047d4a231c..71fa2c8e83 100644
--- a/pkg/web_css/lib/src/_detail_page.scss
+++ b/pkg/web_css/lib/src/_detail_page.scss
@@ -79,7 +79,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   padding: 30px 0 20px;
 
   .title {
-    font-family: $font-family-google-sans-display;
+    font-family: var(--pub-default-headline-font_family);
     margin: 0;
     font-size: 24px;
 
@@ -173,7 +173,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   }
 
   .detail-like {
-    font-family: $font-family-google-sans-text;
+    font-family: var(--pub-default-text-font_family);
     font-size: 16px;
     font-weight: 500;
     text-transform: uppercase;
diff --git a/pkg/web_css/lib/src/_list.scss b/pkg/web_css/lib/src/_list.scss
index d7640e84b1..d2d67674b2 100644
--- a/pkg/web_css/lib/src/_list.scss
+++ b/pkg/web_css/lib/src/_list.scss
@@ -238,7 +238,7 @@
 
   .packages-recent {
     color: #6d7278;
-    font-family: $font-family-google-sans;
+    font-family: var(--pub-default-text-font_family);
     font-size: 12px;
     margin: 0px 8px 0px 16px;
     white-space: nowrap;
@@ -391,7 +391,7 @@
   .search-form-section-header {
     display: flex;
     cursor: pointer;
-    font-family: $font-family-google-sans;
+    font-family: var(--pub-default-text-font_family);
     font-size: 14px;
     font-weight: bold;
 
diff --git a/pkg/web_css/lib/src/_pkg.scss b/pkg/web_css/lib/src/_pkg.scss
index 2512bd33f9..8cf57f908e 100644
--- a/pkg/web_css/lib/src/_pkg.scss
+++ b/pkg/web_css/lib/src/_pkg.scss
@@ -109,7 +109,7 @@
     font-size: 14px;
 
     .version {
-      font-family: $font-family-google-sans;
+      font-family: var(--pub-default-text-font_family);
       font-size: 24px;
     }
   }
@@ -154,7 +154,7 @@
   }
 
   .score-key-figure-value {
-    font-family: $font-family-google-sans-display;
+    font-family: var(--pub-default-headline-font_family);
     font-size: 32px;
     line-height: 1;
 
@@ -164,13 +164,13 @@
   }
 
   .score-key-figure-supplemental {
-    font-family: $font-family-google-sans;
+    font-family: var(--pub-default-text-font_family);
     font-size: 24px;
   }
 
   .score-key-figure-label {
     color: #555555;
-    font-family: $font-family-google-sans-text;
+    font-family: var(--pub-default-text-font_family);
     font-size: 14px;
     text-align: center;
     text-transform: uppercase;
@@ -209,7 +209,7 @@
   }
 
   .pkg-report-header-title {
-    font-family: $font-family-google-sans;
+    font-family: var(--pub-default-text-font_family);
     font-size: 24px;
   }
 
@@ -217,7 +217,7 @@
     display: flex;
     align-items: center;
 
-    font-family: $font-family-google-sans;
+    font-family: var(--pub-default-text-font_family);
     font-size: 22px;
 
     &.-is-red {
@@ -314,7 +314,7 @@
     transition: opacity $copy-feedback-transition-opacity-delay;
 
     >.code {
-      font-family: $font-family-google-sans-mono;
+      font-family: var(--pub-code-text-font_family);
       display: block;
     }
 
diff --git a/pkg/web_css/lib/src/_scores.scss b/pkg/web_css/lib/src/_scores.scss
index 84833fd29c..c633cffd34 100644
--- a/pkg/web_css/lib/src/_scores.scss
+++ b/pkg/web_css/lib/src/_scores.scss
@@ -6,7 +6,7 @@
   display: flex;
   align-items: center;
 
-  font-family: $font-family-google-sans;
+  font-family: var(--pub-default-text-font_family);
 
   &:hover {
     opacity: 1.0;
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 1e7386f1bf..e68d1754e5 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -5,9 +5,12 @@
 
 :root {
   --pub-default-background-color: #ffffff;
-  --pub-default-text-color: #4a4a4a;
+  --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
+  --pub-default-text-color: hsl(0, 0%, 29%);
+  --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
   --pub-code-background-color: #f5f5f7;
   --pub-link-text-color: #0175c2;
+  --pub-code-text-font_family: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
   --pub-badge-default-color: var(--pub-link-text-color);
   --pub-badge-red-color: #ff4242;
   --pub-detail_tab-background-color: var(--pub-code-background-color);
@@ -16,6 +19,11 @@
   --pub-detail_tab-active-color: #1967d2;
   --pub-detail_tab-admin-color: #990000;
   --pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-default-background-color) 80%);
+
+  // Material Design theme customizations
+  --mdc-theme-primary: #0175c2;
+  --mdc-theme-secondary: #0066d9;
+  --mdc-typography-font-family: var(--pub-default-text-font_family);
 }
 
 .dark-theme {
@@ -31,12 +39,11 @@
   --pub-detail_tab-active-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-detail_tab-background-color) 20%);
   --pub-detail_tab-admin-color: #e03030;
   --pub-summary_hover-background-color: color-mix(in srgb, var(--pub-link-text-color), var(--pub-default-background-color) 80%);
-}
 
-$font-family-google-sans-display: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
-$font-family-google-sans: "Google Sans", "Roboto", sans-serif;
-$font-family-google-sans-text: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
-$font-family-google-sans-mono: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
+  // Material Design theme customizations
+  --mdc-theme-on-primary: var(--pub-default-text-color);
+  --mdc-theme-on-secondary: var(--pub-default-text-color);
+}
 
 $site-header-banner-bg: #1C2834;
 $site-header-banner-fg: #f8f9fa;