diff --git a/src/material/core/tokens/m2/mat/_datepicker.scss b/src/material/core/tokens/m2/mat/_datepicker.scss
index e6ee31ec39c8..18231a105e99 100644
--- a/src/material/core/tokens/m2/mat/_datepicker.scss
+++ b/src/material/core/tokens/m2/mat/_datepicker.scss
@@ -106,7 +106,7 @@ $private-default-overlap-color: #a8dab5;
     // that were set in the previous theming API to reduce the amount of subtle screenshot
     // differences. We should look into introducing the other tokens in a follow-up.
     calendar-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    calendar-text-size: 13px, // TODO(crisbeto): this doesn't appear to affect anything
+    calendar-text-size: 13px,
 
     calendar-body-label-text-size: inspection.get-theme-typography($theme, button, font-size),
     calendar-body-label-text-weight: inspection.get-theme-typography($theme, button, font-weight),
diff --git a/src/material/core/tokens/m3/mat/_datepicker.scss b/src/material/core/tokens/m3/mat/_datepicker.scss
index d49e965ba89a..02343b4931ab 100644
--- a/src/material/core/tokens/m3/mat/_datepicker.scss
+++ b/src/material/core/tokens/m3/mat/_datepicker.scss
@@ -73,8 +73,8 @@ $prefix: (mat, datepicker);
       token-definition.hardcode(elevation.get-box-shadow(0), $exclude-hardcoded),
     calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
     calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
-    calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
-    calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
+    calendar-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    calendar-text-size: map.get($systems, md-sys-typescale, body-medium-size),
     calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
     calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
     calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size),
diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
index e985e20830ac..0859922d03c9 100644
--- a/src/material/datepicker/calendar-body.scss
+++ b/src/material/datepicker/calendar-body.scss
@@ -91,6 +91,12 @@ $_tokens: (tokens-mat-datepicker.$prefix, tokens-mat-datepicker.get-token-slots(
   outline: none;
   font-family: inherit;
   margin: 0;
+
+  // Needs to be repeated here in order to override the user agent styles.
+  @include token-utils.use-tokens($_tokens...) {
+    @include token-utils.create-token-slot(font-family, calendar-text-font);
+    @include token-utils.create-token-slot(font-size, calendar-text-size);
+  }
 }
 
 // We use ::before to apply a background to the body cell, because we need to apply a border