diff --git a/layout/reftests/css-ruby/ruby-position-horizontal-ref.html b/layout/reftests/css-ruby/ruby-position-horizontal-ref.html
index 9cb0ceaf4fcc..9b6e08c42434 100644
--- a/layout/reftests/css-ruby/ruby-position-horizontal-ref.html
+++ b/layout/reftests/css-ruby/ruby-position-horizontal-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="reftest-wait">
 <head>
   <meta charset="UTF-8">
   <title>Bug 1055665 - Test for ruby-position</title>
@@ -7,7 +7,7 @@
   <script type="text/javascript" src="utils.js"></script>
   <style>
     body {
-      font-family: monospace;
+      font: 50px Ahem;
     }
     .annotation, .annotation > div {
       position: absolute;
@@ -29,7 +29,10 @@
     </div>
   </div>
   <script type="text/javascript">
-    makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+    document.fonts.ready.then(() => {
+      makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+      document.documentElement.classList.remove("reftest-wait");
+    })
   </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/ruby-position-horizontal.html b/layout/reftests/css-ruby/ruby-position-horizontal.html
index e6d9e8393b2c..e3cf4ff50576 100644
--- a/layout/reftests/css-ruby/ruby-position-horizontal.html
+++ b/layout/reftests/css-ruby/ruby-position-horizontal.html
@@ -6,7 +6,7 @@
   <link rel="stylesheet" href="common.css">
   <style>
     body {
-      font-family: monospace;
+      font: 50px Ahem;
       /* use a large line-height here to avoid additional leadings */
       line-height: 8em;
     }
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html b/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html
index 2c432e4240b2..06acd06132b4 100644
--- a/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html
+++ b/layout/reftests/css-ruby/ruby-position-vertical-lr-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="reftest-wait">
 <head>
   <meta charset="UTF-8">
   <title>Bug 1055665 - Test for ruby-position</title>
@@ -10,7 +10,7 @@
       writing-mode: vertical-lr;
     }
     body {
-      font-family: monospace;
+      font: 50px Ahem;
     }
     .annotation, .annotation > div {
       position: absolute;
@@ -32,7 +32,10 @@
     </div>
   </div>
   <script type="text/javascript">
-    makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+    document.fonts.ready.then(() => {
+      makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+      document.documentElement.classList.remove("reftest-wait");
+    })
   </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-lr.html b/layout/reftests/css-ruby/ruby-position-vertical-lr.html
index 6dee8f7ccb88..c978021a59a8 100644
--- a/layout/reftests/css-ruby/ruby-position-vertical-lr.html
+++ b/layout/reftests/css-ruby/ruby-position-vertical-lr.html
@@ -9,7 +9,7 @@
       writing-mode: vertical-lr;
     }
     body {
-      font-family: monospace;
+      font: 50px Ahem;
       /* use a large line-height here to avoid additional leadings */
       line-height: 8em;
     }
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html b/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html
index edeeeb5f4b0c..f948e1ee7900 100644
--- a/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html
+++ b/layout/reftests/css-ruby/ruby-position-vertical-rl-ref.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="reftest-wait">
 <head>
   <meta charset="UTF-8">
   <title>Bug 1055665 - Test for ruby-position</title>
@@ -10,7 +10,7 @@
       writing-mode: vertical-rl;
     }
     body {
-      font-family: monospace;
+      font: 50px Ahem;
     }
     .annotation, .annotation > div {
       position: absolute;
@@ -32,7 +32,10 @@
     </div>
   </div>
   <script type="text/javascript">
-    makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+    document.fonts.ready.then(() => {
+      makeBSizeOfParentMatch(document.getElementsByTagName('span'));
+      document.documentElement.classList.remove("reftest-wait");
+    })
   </script>
 </body>
 </html>
diff --git a/layout/reftests/css-ruby/ruby-position-vertical-rl.html b/layout/reftests/css-ruby/ruby-position-vertical-rl.html
index 1d9378176415..c427b99f0da7 100644
--- a/layout/reftests/css-ruby/ruby-position-vertical-rl.html
+++ b/layout/reftests/css-ruby/ruby-position-vertical-rl.html
@@ -9,7 +9,7 @@
       writing-mode: vertical-rl;
     }
     body {
-      font-family: monospace;
+      font: 50px Ahem;
       /* use a large line-height here to avoid additional leadings */
       line-height: 8em;
     }
