diff --git a/.vscode/settings.json b/.vscode/settings.json
index be2305cbc..ee8fae482 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,5 +4,5 @@
   "typescript.validate.enable": false,
   "javascript.validate.enable": false,
   "editor.formatOnSave": false,
-  "standard.enable": true
+  "editor.snippetSuggestions": "top"
 }
diff --git a/cypress/integration/rendering/gitGraph.spec.js b/cypress/integration/rendering/gitGraph.spec.js
index c36f635b4..0a72cdee2 100644
--- a/cypress/integration/rendering/gitGraph.spec.js
+++ b/cypress/integration/rendering/gitGraph.spec.js
@@ -6,12 +6,6 @@ describe('Sequencediagram', () => {
     imgSnapshotTest(
       `
     gitGraph:
-      options
-      {
-          "nodeSpacing": 150,
-          "nodeRadius": 10
-      }
-      end
       commit
       branch newbranch
       checkout newbranch
@@ -20,9 +14,8 @@ describe('Sequencediagram', () => {
       checkout master
       commit
       commit
-      merge newbranch
-      `,
-      {}
+      merge newbranch`,
+      { logLevel: 0 }
     );
   });
 });
diff --git a/cypress/platform/e2e.html b/cypress/platform/e2e.html
index 8ad763c4b..8c1511781 100644
--- a/cypress/platform/e2e.html
+++ b/cypress/platform/e2e.html
@@ -3,10 +3,10 @@
     <script src="/e2e.js"></script>
     <link href="https://fonts.googleapis.com/css?family=Mansalva&display=swap" rel="stylesheet">
     <style>
-      .mermaid {
+      body {
         /* font-family: 'Mansalva', cursive;
         font-family: 'Mansalva', cursive; */
-        /* font-family: 'trebuchet ms', verdana, arial; */
+        font-family: 'times';
       }
       /* .mermaid-main-font {
         font-family: "trebuchet ms", verdana, arial;
diff --git a/docs/mermaidAPI.md b/docs/mermaidAPI.md
index 59aafba4f..8152b188f 100644
--- a/docs/mermaidAPI.md
+++ b/docs/mermaidAPI.md
@@ -63,6 +63,10 @@ theme , the CSS style sheet
  "themeCSS": ".node rect { fill: red; }"
 </pre>
 
+## fontFamily
+
+**fontFamily** The font to be used for the rendered diagrams. Default value is \\"trebuchet ms\\", verdana, arial;
+
 ## logLevel
 
 This option decides the amount of logging to be used.
diff --git a/docs/stateDiagram.md b/docs/stateDiagram.md
index 5c4b40d75..2966b7325 100755
--- a/docs/stateDiagram.md
+++ b/docs/stateDiagram.md
@@ -189,7 +189,7 @@ It is possible to specify a fork in the diagram using &lt;&lt;fork&gt;&gt; &lt;&
 
 Sometimes nothing says it better then a postit note. That is also the case in state diagrams.
 
-Here you canb choose to put the onte to the right or to the left of a node.
+Here you can't choose to put the onte to the right or to the left of a node.
 
 ```
     stateDiagram
@@ -216,6 +216,25 @@ Here you canb choose to put the onte to the right or to the left of a node.
 ## Concurrency
 
 As in plantUml you can specify concurrency using the -- symbol.
+```
+    stateDiagram
+        [*] --> Active
+
+        state Active {
+            [*] --> NumLockOff
+            NumLockOff --> NumLockOn : EvNumLockPressed
+            NumLockOn --> NumLockOff : EvNumLockPressed
+            --
+            [*] --> CapsLockOff
+            CapsLockOff --> CapsLockOn : EvCapsLockPressed
+            CapsLockOn --> CapsLockOff : EvCapsLockPressed
+            --
+            [*] --> ScrollLockOff
+            ScrollLockOff --> ScrollLockOn : EvCapsLockPressed
+            ScrollLockOn --> ScrollLockOff : EvCapsLockPressed
+        }
+```
+
 
 ```mermaid
     stateDiagram
diff --git a/src/diagrams/git/gitGraphRenderer.js b/src/diagrams/git/gitGraphRenderer.js
index 9a66141a0..267b01c5b 100644
--- a/src/diagrams/git/gitGraphRenderer.js
+++ b/src/diagrams/git/gitGraphRenderer.js
@@ -303,7 +303,7 @@ export const draw = function(txt, id, ver) {
     const parser = gitGraphParser.parser;
     parser.yy = db;
 
-    logger.debug('in gitgraph renderer', txt, id, ver);
+    logger.debug('in gitgraph renderer', txt + '\n', 'id:', id, ver);
     // Parse the graph definition
     parser.parse(txt + '\n');
 
diff --git a/src/diagrams/pie/pieRenderer.js b/src/diagrams/pie/pieRenderer.js
index bdf857480..23291ec00 100644
--- a/src/diagrams/pie/pieRenderer.js
+++ b/src/diagrams/pie/pieRenderer.js
@@ -110,6 +110,7 @@ export const draw = (txt, id, ver) => {
         return 'translate(' + arcGenerator.centroid(d) + ')';
       })
       .style('text-anchor', 'middle')
+      .attr('class', 'slice')
       .style('font-size', 17);
 
     svg
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index a75fe6dbf..82173ec8a 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -95,6 +95,7 @@ const config = {
    */
   theme: 'default',
   themeCSS: undefined,
+
   /**
    * **fontFamily** The font to be used for the rendered diagrams. Default value is \"trebuchet ms\", verdana, arial;
    */
diff --git a/src/themes/gantt.scss b/src/themes/gantt.scss
index 34da04050..e469d603e 100644
--- a/src/themes/gantt.scss
+++ b/src/themes/gantt.scss
@@ -56,6 +56,10 @@
   stroke: $gridColor;
   opacity: 0.3;
   shape-rendering: crispEdges;
+  text {
+    font-family: 'trebuchet ms', verdana, arial;
+    font-family: var(--mermaid-font-family);
+  }
 }
 
 .grid path {
diff --git a/src/themes/git.scss b/src/themes/git.scss
index f4072ef65..5fa820f66 100644
--- a/src/themes/git.scss
+++ b/src/themes/git.scss
@@ -3,4 +3,6 @@
 .branch-label {
   fill: lightgrey;
   color: lightgrey;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }
diff --git a/src/themes/pie.scss b/src/themes/pie.scss
index b8f362280..48d115095 100644
--- a/src/themes/pie.scss
+++ b/src/themes/pie.scss
@@ -2,4 +2,10 @@
   text-anchor: middle;
   font-size: 25px;
   fill: $taskTextDarkColor;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+.slice {
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }