diff --git a/scss/_badge.scss b/scss/_badge.scss
index 33cfd998628a..dd4fe169121c 100644
--- a/scss/_badge.scss
+++ b/scss/_badge.scss
@@ -17,7 +17,7 @@
 
   display: inline-block;
   padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
-  font-size: var(--#{$prefix}badge-font-size);
+  @include font-size(var(--#{$prefix}badge-font-size));
   font-weight: var(--#{$prefix}badge-font-weight);
   line-height: 1;
   color: var(--#{$prefix}badge-color);
diff --git a/scss/_breadcrumb.scss b/scss/_breadcrumb.scss
index 921da53df424..bc9fb54e9e50 100644
--- a/scss/_breadcrumb.scss
+++ b/scss/_breadcrumb.scss
@@ -17,8 +17,7 @@
   flex-wrap: wrap;
   padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
   margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
-  @include font-size($breadcrumb-font-size);
-  font-size: var(--#{$prefix}breadcrumb-font-size);
+  @include font-size(var(--#{$prefix}breadcrumb-font-size));
   list-style: none;
   background-color: var(--#{$prefix}breadcrumb-bg);
   @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
diff --git a/scss/_buttons.scss b/scss/_buttons.scss
index 2caa36d5b39e..625a2dbf39ea 100644
--- a/scss/_buttons.scss
+++ b/scss/_buttons.scss
@@ -25,7 +25,7 @@
   display: inline-block;
   padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
   font-family: var(--#{$prefix}btn-font-family);
-  font-size: var(--#{$prefix}btn-font-size);
+  @include font-size(var(--#{$prefix}btn-font-size));
   font-weight: var(--#{$prefix}btn-font-weight);
   line-height: var(--#{$prefix}btn-line-height);
   color: var(--#{$prefix}btn-color);
diff --git a/scss/_pagination.scss b/scss/_pagination.scss
index c7e1e85e7f99..9ebc5a46766f 100644
--- a/scss/_pagination.scss
+++ b/scss/_pagination.scss
@@ -32,7 +32,7 @@
   position: relative;
   display: block;
   padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
-  font-size: var(--#{$prefix}pagination-font-size);
+  @include font-size(var(--#{$prefix}pagination-font-size));
   color: var(--#{$prefix}pagination-color);
   text-decoration: if($link-decoration == none, null, none);
   background-color: var(--#{$prefix}pagination-bg);
diff --git a/scss/_popover.scss b/scss/_popover.scss
index abe58d7b916c..0fa7796afe63 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -31,7 +31,7 @@
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
-  font-size: var(--#{$prefix}popover-font-size);
+  @include font-size(var(--#{$prefix}popover-font-size));
   // Allow breaking very long words so they don't overflow the popover's bounds
   word-wrap: break-word;
   background-color: var(--#{$prefix}popover-bg);
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 0f05de7424bd..81884c7195d7 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -27,7 +27,7 @@
 
 :root {
   @if $font-size-root != null {
-    font-size: var(--#{$prefix}root-font-size);
+    @include font-size(var(--#{$prefix}root-font-size));
   }
 
   @if $enable-smooth-scroll {
@@ -49,7 +49,7 @@
 body {
   margin: 0; // 1
   font-family: var(--#{$prefix}body-font-family);
-  font-size: var(--#{$prefix}body-font-size);
+  @include font-size(var(--#{$prefix}body-font-size));
   font-weight: var(--#{$prefix}body-font-weight);
   line-height: var(--#{$prefix}body-line-height);
   color: var(--#{$prefix}body-color);