diff --git a/packages/mermaid/src/themes/theme-redux-dark.js b/packages/mermaid/src/themes/theme-redux-dark.js
index c79785abb..94a4c2fb0 100644
--- a/packages/mermaid/src/themes/theme-redux-dark.js
+++ b/packages/mermaid/src/themes/theme-redux-dark.js
@@ -30,7 +30,7 @@ class Theme {
     this.border1 = '#ccc';
     this.border2 = rgba(255, 255, 255, 0.25);
     this.arrowheadColor = invert(this.background);
-    this.fontFamily = 'arial, sans-serif';
+    this.fontFamily = '"Recursive Variable", arial, sans-serif';
     this.fontSize = '14px';
     this.labelBackground = '#181818';
     this.textColor = '#ccc';
@@ -43,7 +43,7 @@ class Theme {
 
     this.THEME_COLOR_LIMIT = 12;
     // dark
-    this.fontFamily = 'arial, sans-serif';
+    this.fontFamily = '"Recursive Variable", arial, sans-serif';
     this.fontSize = '14px';
 
     // Neo-specific
diff --git a/packages/mermaid/src/themes/theme-redux.js b/packages/mermaid/src/themes/theme-redux.js
index 16bb7751e..9b63c0728 100644
--- a/packages/mermaid/src/themes/theme-redux.js
+++ b/packages/mermaid/src/themes/theme-redux.js
@@ -27,7 +27,7 @@ class Theme {
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
     // dark
 
-    this.fontFamily = 'arial, sans-serif';
+    this.fontFamily = '"Recursive Variable", arial, sans-serif';
     this.fontSize = '14px';
 
     // Neo-specific