diff --git a/packages/mermaid/src/diagrams/gantt/styles.js b/packages/mermaid/src/diagrams/gantt/styles.js
index dcb75939d..1f670a16d 100644
--- a/packages/mermaid/src/diagrams/gantt/styles.js
+++ b/packages/mermaid/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = (options) =>
   `
   .mermaid-main-font {
-        font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+        font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .exclude-range {
@@ -45,7 +45,7 @@ const getStyles = (options) =>
 
   .sectionTitle {
     text-anchor: start;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
 
@@ -58,7 +58,7 @@ const getStyles = (options) =>
   }
 
   .grid .tick text {
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     fill: ${options.textColor};
   }
 
@@ -86,13 +86,13 @@ const getStyles = (options) =>
 
   .taskText {
     text-anchor: middle;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .taskTextOutsideRight {
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 
   .taskTextOutsideLeft {
@@ -248,7 +248,7 @@ const getStyles = (options) =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.titleColor || options.textColor};
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
   }
 `;
 
diff --git a/packages/mermaid/src/diagrams/sankey/styles.js b/packages/mermaid/src/diagrams/sankey/styles.js
index bb70bfbd2..f2e31651a 100644
--- a/packages/mermaid/src/diagrams/sankey/styles.js
+++ b/packages/mermaid/src/diagrams/sankey/styles.js
@@ -1,6 +1,6 @@
-const getStyles = (options) =>
+const getStyles = () =>
   `.label {
-      font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+      font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     }`;
 
 export default getStyles;
diff --git a/packages/mermaid/src/diagrams/user-journey/styles.js b/packages/mermaid/src/diagrams/user-journey/styles.js
index 87edee576..81aef1180 100644
--- a/packages/mermaid/src/diagrams/user-journey/styles.js
+++ b/packages/mermaid/src/diagrams/user-journey/styles.js
@@ -1,6 +1,6 @@
 const getStyles = (options) =>
   `.label {
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     color: ${options.textColor};
   }
   .mouth {
@@ -78,7 +78,7 @@ const getStyles = (options) =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: ${options.fontFamily ? options.fontFamily : 'Trebuchet MS, Verdana, Arial, sans-serif'};
+    font-family: var(--mermaid-font-family), trebuchet ms, verdana, arial, sans-serif;
     font-size: 12px;
     background: ${options.tertiaryColor};
     border: 1px solid ${options.border2};