diff --git a/content/patterns/slider/examples/css/slider-rating.css b/content/patterns/slider/examples/css/slider-rating.css
index 5d32cc5b62..cbc10e63fc 100644
--- a/content/patterns/slider/examples/css/slider-rating.css
+++ b/content/patterns/slider/examples/css/slider-rating.css
@@ -27,11 +27,13 @@
 
 .rating-slider svg .label {
   font-size: 90%;
+  font-family: sans-serif;
   fill: currentcolor;
 }
 
 .rating-slider svg .description {
   font-size: 90%;
+  font-family: sans-serif;
   fill: canvasText;
 }
 
diff --git a/content/patterns/slider/examples/js/slider-rating.js b/content/patterns/slider/examples/js/slider-rating.js
index 1a0446f9e3..6cae4a4aab 100644
--- a/content/patterns/slider/examples/js/slider-rating.js
+++ b/content/patterns/slider/examples/js/slider-rating.js
@@ -192,8 +192,11 @@ class RatingSlider {
       rect.setAttribute('height', RAIL_HEIGHT);
       rect.removeAttribute('rx');
 
-      const labelWidth = label.getBBox().width;
-      const labelHeight = label.getBBox().height;
+      const labelWidth = Math.round(label.getBBox().width);
+      const labelHeight = Math.round(label.getBBox().height);
+
+      label.setAttribute('data-width', labelWidth);
+      label.setAttribute('data-height', labelHeight);
 
       label.setAttribute(
         'x',