diff --git a/src/defaultConfig.js b/src/defaultConfig.js
index 88b441272..c9be98dca 100644
--- a/src/defaultConfig.js
+++ b/src/defaultConfig.js
@@ -57,11 +57,11 @@ const config = {
   /**
    *| Parameter | Description |Type | Required | Values|
    *| --- | --- | --- | --- | --- |
-   *|fontFamily | specifies the font to be used in the rendered diagrams| String | Required | Verdana, Arial, Trebuchet MS,|
+   *|fontFamily | specifies the font to be used in the rendered diagrams| String | Required | Trebuchet MS, Verdana, Arial, Sans-Serif |
    *
    ***notes: Default value is \\"trebuchet ms\\".
    */
-  fontFamily: '"trebuchet ms", verdana, arial;',
+  fontFamily: '"trebuchet ms", verdana, arial, sans-serif;',
 
   /**
    *| Parameter | Description |Type | Required | Values|
@@ -391,12 +391,12 @@ const config = {
     /**
      *| Parameter | Description |Type | Required | Values|
      *| --- | --- | --- | --- | --- |
-     *| noteFontFamily| This sets the font family of actor-attached notes. | String | Required |  trebuchet ms, verdana, arial |
+     *| noteFontFamily| This sets the font family of actor-attached notes. | String | Required |  trebuchet ms, verdana, arial, sans-serif |
      *
      ***Notes:**
      ***Default value: trebuchet ms **.
      */
-    noteFontFamily: '"trebuchet ms", verdana, arial',
+    noteFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
     /**
      * This sets the font weight of the note's description
      * **Default value 400.
@@ -423,12 +423,12 @@ const config = {
     /**
      *| Parameter | Description |Type | Required | Values|
      *| --- | --- | --- | --- | --- |
-     *| messageFontFamily | This sets the font family of actor messages. | String| Required | trebuchet ms", verdana, aria |
+     *| messageFontFamily | This sets the font family of actor messages. | String| Required | trebuchet ms", verdana, arial, sans-serif |
      *
      ***Notes:**
-     ***Default value:"trebuchet ms**.
+     ***Default value: "trebuchet ms**.
      */
-    messageFontFamily: '"trebuchet ms", verdana, arial',
+    messageFontFamily: '"trebuchet ms", verdana, arial, sans-serif',
     /**
      * This sets the font weight of the message's description
      * **Default value 400.
diff --git a/src/diagrams/gantt/styles.js b/src/diagrams/gantt/styles.js
index 3dbef525e..8d0c2d0f2 100644
--- a/src/diagrams/gantt/styles.js
+++ b/src/diagrams/gantt/styles.js
@@ -1,7 +1,7 @@
 const getStyles = options =>
   `
   .mermaid-main-font {
-    font-family: "trebuchet ms", verdana, arial;
+    font-family: "trebuchet ms", verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
   }
 
@@ -44,7 +44,7 @@ const getStyles = options =>
     text-anchor: start;
     font-size: 11px;
     text-height: 14px;
-    font-family: 'trebuchet ms', verdana, arial;
+    font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
 
   }
@@ -86,7 +86,7 @@ const getStyles = options =>
 
   .taskText {
     text-anchor: middle;
-    font-family: 'trebuchet ms', verdana, arial;
+    font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
   }
 
@@ -98,7 +98,7 @@ const getStyles = options =>
     fill: ${options.taskTextDarkColor};
     text-anchor: start;
     font-size: 11px;
-    font-family: 'trebuchet ms', verdana, arial;
+    font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
 
   }
@@ -253,7 +253,7 @@ const getStyles = options =>
     text-anchor: middle;
     font-size: 18px;
     fill: ${options.textColor}    ;
-    font-family: 'trebuchet ms', verdana, arial;
+    font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
   }
 `;
diff --git a/src/diagrams/git/styles.js b/src/diagrams/git/styles.js
index a76f61bb5..de9a10e67 100644
--- a/src/diagrams/git/styles.js
+++ b/src/diagrams/git/styles.js
@@ -5,7 +5,7 @@ const getStyles = () =>
   .branch-label {
     fill: lightgrey;
     color: lightgrey;
-    font-family: 'trebuchet ms', verdana, arial;
+    font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
   }
 `;
diff --git a/src/diagrams/user-journey/styles.js b/src/diagrams/user-journey/styles.js
index fb8572597..b6aa05523 100644
--- a/src/diagrams/user-journey/styles.js
+++ b/src/diagrams/user-journey/styles.js
@@ -1,6 +1,6 @@
 const getStyles = options =>
   `.label {
-    font-family: 'trebuchet ms', verdana, arial;
+    font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
     color: ${options.textColor};
   }
@@ -79,7 +79,7 @@ const getStyles = options =>
     text-align: center;
     max-width: 200px;
     padding: 2px;
-    font-family: 'trebuchet ms', verdana, arial;
+    font-family: 'trebuchet ms', verdana, arial, sans-serif;
     font-family: var(--mermaid-font-family);
     font-size: 12px;
     background: ${options.tertiaryColor};
diff --git a/src/themes/theme-base.js b/src/themes/theme-base.js
index fdf5d8848..80b269eb4 100644
--- a/src/themes/theme-base.js
+++ b/src/themes/theme-base.js
@@ -31,7 +31,7 @@ class Theme {
     // this.secondaryColor = '#dfdfde';
     // this.tertiaryColor = '#CCCCFF';
 
-    this.fontFamily = '"trebuchet ms", verdana, arial';
+    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
     // this.updateColors();
   }
diff --git a/src/themes/theme-dark.js b/src/themes/theme-dark.js
index f828d8176..de2d01e0c 100644
--- a/src/themes/theme-dark.js
+++ b/src/themes/theme-dark.js
@@ -24,7 +24,7 @@ class Theme {
     this.border1 = '#81B1DB';
     this.border2 = rgba(255, 255, 255, 0.25);
     this.arrowheadColor = 'calculated';
-    this.fontFamily = '"trebuchet ms", verdana, arial';
+    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
     this.labelBackground = '#181818';
     this.textColor = '#ccc';
diff --git a/src/themes/theme-default.js b/src/themes/theme-default.js
index e07702da0..d564541c8 100644
--- a/src/themes/theme-default.js
+++ b/src/themes/theme-default.js
@@ -28,7 +28,7 @@ class Theme {
     this.border1 = '#9370DB';
     this.border2 = '#aaaa33';
     this.arrowheadColor = '#333333';
-    this.fontFamily = '"trebuchet ms", verdana, arial';
+    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
     this.labelBackground = '#e8e8e8';
     this.textColor = '#333';
diff --git a/src/themes/theme-forest.js b/src/themes/theme-forest.js
index 7b0b6ffc6..1b0aadcf0 100644
--- a/src/themes/theme-forest.js
+++ b/src/themes/theme-forest.js
@@ -13,7 +13,7 @@ class Theme {
     this.border1 = '#13540c';
     this.border2 = '#6eaa49';
     this.arrowheadColor = 'green';
-    this.fontFamily = '"trebuchet ms", verdana, arial';
+    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
 
     this.tertiaryColor = lighten('#cde498', 10);
diff --git a/src/themes/theme-neutral.js b/src/themes/theme-neutral.js
index 847e293ac..c054abeb4 100644
--- a/src/themes/theme-neutral.js
+++ b/src/themes/theme-neutral.js
@@ -35,7 +35,7 @@ class Theme {
     this.critical = '#d42';
     this.done = '#bbb';
     this.arrowheadColor = '#333333';
-    this.fontFamily = '"trebuchet ms", verdana, arial';
+    this.fontFamily = '"trebuchet ms", verdana, arial, sans-serif';
     this.fontSize = '16px';
 
     /* Flowchart variables */