#989 Font configuration

src/themes/class.scss

@@ -2,6 +2,7 @@ g.classGroup text {
   fill: $nodeBorder;
   stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
   font-size: 10px;
 
   .title {

src/themes/flowchart.scss

@@ -1,5 +1,6 @@
 .label {
   font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
   color: #333;
 }
 
@@ -16,6 +17,9 @@
   stroke-width: 1px;
 }
 
+.node .label {
+  text-align: center;
+}
 .node.clickable {
   cursor: pointer;
 }
@@ -31,6 +35,7 @@
 
 .edgeLabel {
   background-color: $edgeLabelBackground;
+  text-align: center;
 }
 
 .cluster rect {
@@ -49,6 +54,7 @@ div.mermaidTooltip {
   max-width: 200px;
   padding: 2px;
   font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
   font-size: 12px;
   background: $secondBkg;
   border: 1px solid $border2;

src/themes/gantt.scss

@@ -1,5 +1,10 @@
 /** Section styling */
 
+.mermaid-main-font {
+  font-family: "trebuchet ms", verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
+
 .section {
   stroke: none;
   opacity: 0.2;
@@ -39,6 +44,9 @@
   text-anchor: start;
   font-size: 11px;
   text-height: 14px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+
 }
 
 
@@ -75,12 +83,18 @@
 .taskText {
   text-anchor: middle;
   font-size: 11px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+
 }
 
 .taskTextOutsideRight {
   fill: $taskTextDarkColor;
   text-anchor: start;
   font-size: 11px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+
 }
 
 .taskTextOutsideLeft {
@@ -233,4 +247,6 @@
   text-anchor: middle;
   font-size: 18px;
   fill: $taskTextDarkColor;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
 }

src/themes/mermaid.scss

@@ -6,7 +6,14 @@
 @import 'pie';
 @import 'state';
 
-.composit {
-  fill: white;
-  border-bottom: 1px
+// .composit {
+//   fill: white;
+//   border-bottom: 1px
+// }
+
+:root {
+  --mermaid-font-family: '"trebuchet ms", verdana, arial';
+  --mermaid-font-family: "Comic Sans MS", "Comic Sans", cursive;
+  // --mermaid-alt-font-family: '"Lucida Console", Monaco, monospace';
 }
+

src/themes/sequence.scss

@@ -77,6 +77,7 @@ text.actor {
   fill: black;
   stroke: none;
   font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
   font-size: 14px;
 }
 

src/themes/state.scss

@@ -1,3 +1,10 @@
+g.stateGroup text {
+  fill: $nodeBorder;
+  stroke: none;
+  font-size: 10px;
+  font-family: 'trebuchet ms', verdana, arial;
+  font-family: var(--mermaid-font-family);
+}
 g.stateGroup text {
   fill: $nodeBorder;
   stroke: none;