From aa28880be71ad945efbfabf386aa10dc5f6b9782 Mon Sep 17 00:00:00 2001
From: Saurabh Gore <saurabh@mermaidchart.com>
Date: Mon, 27 Jan 2025 19:24:29 +0530
Subject: [PATCH] Set default font family to arial for all themes

---
 packages/mermaid/src/themes/theme-base.js       | 2 +-
 packages/mermaid/src/themes/theme-dark.js       | 2 +-
 packages/mermaid/src/themes/theme-default.js    | 2 +-
 packages/mermaid/src/themes/theme-forest.js     | 2 +-
 packages/mermaid/src/themes/theme-mc.js         | 2 +-
 packages/mermaid/src/themes/theme-neo-dark.js   | 4 ++--
 packages/mermaid/src/themes/theme-neo.js        | 2 +-
 packages/mermaid/src/themes/theme-neutral.js    | 2 +-
 packages/mermaid/src/themes/theme-redux-dark.js | 4 ++--
 packages/mermaid/src/themes/theme-redux.js      | 2 +-
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/mermaid/src/themes/theme-base.js b/packages/mermaid/src/themes/theme-base.js
index 374e67d57..cf3aae077 100644
--- a/packages/mermaid/src/themes/theme-base.js
+++ b/packages/mermaid/src/themes/theme-base.js
@@ -24,7 +24,7 @@ class Theme {
     this.strokeWidth = 1;
     // dark
 
-    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
     this.useGradient = true;
     this.dropShadow = 'drop-shadow( 1px 2px 2px rgba(185,185,185,1))';
diff --git a/packages/mermaid/src/themes/theme-dark.js b/packages/mermaid/src/themes/theme-dark.js
index e33f5df74..f67b8974a 100644
--- a/packages/mermaid/src/themes/theme-dark.js
+++ b/packages/mermaid/src/themes/theme-dark.js
@@ -24,7 +24,7 @@ class Theme {
     this.border1 = '#ccc';
     this.border2 = rgba(255, 255, 255, 0.25);
     this.arrowheadColor = 'calculated';
-    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
     this.labelBackground = '#181818';
     this.textColor = '#ccc';
diff --git a/packages/mermaid/src/themes/theme-default.js b/packages/mermaid/src/themes/theme-default.js
index 1fc428a54..29146a16c 100644
--- a/packages/mermaid/src/themes/theme-default.js
+++ b/packages/mermaid/src/themes/theme-default.js
@@ -33,7 +33,7 @@ class Theme {
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
     this.border2 = '#aaaa33';
     this.arrowheadColor = '#333333';
-    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
     this.labelBackground = 'rgba(232,232,232, 0.8)';
     this.textColor = '#333';
diff --git a/packages/mermaid/src/themes/theme-forest.js b/packages/mermaid/src/themes/theme-forest.js
index 355111a35..7020cb580 100644
--- a/packages/mermaid/src/themes/theme-forest.js
+++ b/packages/mermaid/src/themes/theme-forest.js
@@ -18,7 +18,7 @@ class Theme {
     this.border1 = '#13540c';
     this.border2 = '#6eaa49';
     this.arrowheadColor = 'green';
-    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
 
     this.tertiaryColor = lighten('#cde498', 10);
diff --git a/packages/mermaid/src/themes/theme-mc.js b/packages/mermaid/src/themes/theme-mc.js
index e085107e1..051e50f83 100644
--- a/packages/mermaid/src/themes/theme-mc.js
+++ b/packages/mermaid/src/themes/theme-mc.js
@@ -27,7 +27,7 @@ class Theme {
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
     // dark
 
-    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
 
     // Neo-specific
diff --git a/packages/mermaid/src/themes/theme-neo-dark.js b/packages/mermaid/src/themes/theme-neo-dark.js
index e27b67d6b..b975077f5 100644
--- a/packages/mermaid/src/themes/theme-neo-dark.js
+++ b/packages/mermaid/src/themes/theme-neo-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 = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, 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 = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
 
     // Neo-specific
diff --git a/packages/mermaid/src/themes/theme-neo.js b/packages/mermaid/src/themes/theme-neo.js
index 2e6af485c..87596814d 100644
--- a/packages/mermaid/src/themes/theme-neo.js
+++ b/packages/mermaid/src/themes/theme-neo.js
@@ -26,7 +26,7 @@ class Theme {
     this.primaryBorderColor = mkBorder(this.primaryColor, this.darkMode);
     // dark
 
-    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
 
     // Neo-specific
diff --git a/packages/mermaid/src/themes/theme-neutral.js b/packages/mermaid/src/themes/theme-neutral.js
index 3990a1887..67fb96a6d 100644
--- a/packages/mermaid/src/themes/theme-neutral.js
+++ b/packages/mermaid/src/themes/theme-neutral.js
@@ -39,7 +39,7 @@ class Theme {
     this.critical = '#d42';
     this.done = '#bbb';
     this.arrowheadColor = '#333333';
-    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
     this.THEME_COLOR_LIMIT = 12;
     this.radius = 5;
diff --git a/packages/mermaid/src/themes/theme-redux-dark.js b/packages/mermaid/src/themes/theme-redux-dark.js
index 0efc6b566..e8e9e83fc 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 = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, 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 = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, 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 fad52f5eb..d58d6ff77 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 = '"trebuchet ms", verdana, arial, sans-serif';
+    this.fontFamily = 'arial, "trebuchet ms", verdana, sans-serif';
     this.fontSize = '14px';
 
     // Neo-specific