diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
index a82805e7c7..e0aa8d8733 100644
--- a/pkg/web_css/lib/src/_base.scss
+++ b/pkg/web_css/lib/src/_base.scss
@@ -23,7 +23,7 @@ body {
 }
 
 body, input, button, select {
-  font-family: var(--pub-default-text-font_family);
+  font-family: var(--pub-font-family-body);
   -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;
@@ -45,7 +45,7 @@ body,
   font-size: 16px;
 
   h1, h2, h3, h4, h5, h6 {
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     font-weight: 400;
   }
 
@@ -177,7 +177,7 @@ code {
   background: var(--pub-inset-bgColor);
   border: none;
   border-radius: 4px;
-  font-family: var(--pub-code-text-font_family);
+  font-family: var(--pub-font-family-code);
   padding: 2px 4px;
 }
 
@@ -279,7 +279,7 @@ pre {
     }
 
     th {
-      font-family: var(--pub-default-text-font_family);
+      font-family: var(--pub-font-family-body);
       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 236e6ae677..d0f64a3c1d 100644
--- a/pkg/web_css/lib/src/_detail_page.scss
+++ b/pkg/web_css/lib/src/_detail_page.scss
@@ -82,7 +82,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   padding: 30px 0 20px;
 
   .title {
-    font-family: var(--pub-default-headline-font_family);
+    font-family: var(--pub-font-family-headline);
     margin: 0;
     font-size: 24px;
 
@@ -176,7 +176,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
   }
 
   .detail-like {
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     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 77474cbdd9..a6a7939c54 100644
--- a/pkg/web_css/lib/src/_list.scss
+++ b/pkg/web_css/lib/src/_list.scss
@@ -256,7 +256,7 @@
 
   .packages-recent {
     color: var(--pub-pkg_list_recent_item-text-color);
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     font-size: 12px;
     margin: 0px 8px 0px 16px;
     white-space: nowrap;
@@ -409,7 +409,7 @@
   .search-form-section-header {
     display: flex;
     cursor: pointer;
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     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 d304010cd7..1491a2a8bb 100644
--- a/pkg/web_css/lib/src/_pkg.scss
+++ b/pkg/web_css/lib/src/_pkg.scss
@@ -111,7 +111,7 @@
     font-size: 14px;
 
     .version {
-      font-family: var(--pub-default-text-font_family);
+      font-family: var(--pub-font-family-body);
       font-size: 24px;
     }
   }
@@ -152,7 +152,7 @@
   }
 
   .score-key-figure-value {
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     font-size: 32px;
     line-height: 1;
 
@@ -162,13 +162,13 @@
   }
 
   .score-key-figure-supplemental {
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     font-size: 24px;
   }
 
   .score-key-figure-label {
     color: var(--pub-score_label-text-color);
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     font-size: 14px;
     text-align: center;
     text-transform: uppercase;
@@ -207,7 +207,7 @@
   }
 
   .pkg-report-header-title {
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     font-size: 24px;
   }
 
@@ -215,7 +215,7 @@
     display: flex;
     align-items: center;
 
-    font-family: var(--pub-default-text-font_family);
+    font-family: var(--pub-font-family-body);
     font-size: 22px;
 
     &.-is-red {
@@ -486,7 +486,7 @@
     transition: opacity variables.$copy-feedback-transition-opacity-delay;
 
     >.code {
-      font-family: var(--pub-code-text-font_family);
+      font-family: var(--pub-font-family-code);
       display: block;
     }
 
diff --git a/pkg/web_css/lib/src/_scores.scss b/pkg/web_css/lib/src/_scores.scss
index 634414e769..ac77a58bbb 100644
--- a/pkg/web_css/lib/src/_scores.scss
+++ b/pkg/web_css/lib/src/_scores.scss
@@ -8,7 +8,7 @@
   display: flex;
   align-items: center;
 
-  font-family: var(--pub-default-text-font_family);
+  font-family: var(--pub-font-family-body);
 
   &:hover {
     opacity: 1.0;
diff --git a/pkg/web_css/lib/src/_variables.scss b/pkg/web_css/lib/src/_variables.scss
index 4c84df7dd2..d8a439172e 100644
--- a/pkg/web_css/lib/src/_variables.scss
+++ b/pkg/web_css/lib/src/_variables.scss
@@ -23,9 +23,9 @@
 
 /// Variables that are not specific to the light or dark theme.
 :root {
-  --pub-default-headline-font_family: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
-  --pub-default-text-font_family: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
-  --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-font-family-headline: "Google Sans Display", "Google Sans", "Roboto", sans-serif;
+  --pub-font-family-body: "Google Sans Text", "Google Sans", "Roboto", sans-serif;
+  --pub-font-family-code: "Google Sans Mono", "Roboto Mono", "Source Code Pro", Menlo, "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, Consolas, monospace;
 
   --pub-color-white:         #ffffff;
   --pub-color-dangerRed:     #ff4242;
@@ -78,7 +78,7 @@
   // Material Design theme customizations
   --mdc-theme-primary: #1967d2;
   --mdc-theme-secondary: #0066d9;
-  --mdc-typography-font-family: var(--pub-default-text-font_family);
+  --mdc-typography-font-family: var(--pub-font-family-body);
 
   --pub-downloads-chart-color-0: var(--pub-markdown-alert-note);
   --pub-downloads-chart-color-bg-0: rgb(9, 105, 218, 0.3);