diff --git a/cypress/integration/rendering/classDiagram-v2.spec.js b/cypress/integration/rendering/classDiagram-v2.spec.js
index 24dfee441..0acbf509f 100644
--- a/cypress/integration/rendering/classDiagram-v2.spec.js
+++ b/cypress/integration/rendering/classDiagram-v2.spec.js
@@ -11,13 +11,13 @@ describe('Class diagram', () => {
         classA -- classC : link
         classC -- classD : link
         classB -- classD
-        
+
         `,
-        {logLevel : 1}
+        {logLevel : 1, flowchart: { "htmlLabels": false },}
       );
       cy.get('svg');
     });
-  
+
   it('1: should render a simple class diagram', () => {
     imgSnapshotTest(
       `
@@ -47,7 +47,7 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {logLevel : 1}
+      {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -76,7 +76,8 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {}
+      {logLevel : 1, flowchart: { "htmlLabels": false },}
+
     );
     cy.get('svg');
   });
@@ -94,7 +95,7 @@ describe('Class diagram', () => {
       Class01 : +int publicGorilla
       Class01 : #int protectedMarmoset
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -147,7 +148,7 @@ describe('Class diagram', () => {
       }
       `,
       ],
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -177,7 +178,7 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -189,7 +190,7 @@ describe('Class diagram', () => {
       Class01 <|-- AveryLongClass : Cool
       Class01 : someMethod()*
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -201,7 +202,7 @@ describe('Class diagram', () => {
       Class01 <|-- AveryLongClass : Cool
       Class01 : someMethod()$
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -221,7 +222,7 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -242,7 +243,7 @@ describe('Class diagram', () => {
         test()
       }
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -264,7 +265,7 @@ describe('Class diagram', () => {
       }
       link class01 "google.com" "A Tooltip"
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -286,7 +287,7 @@ describe('Class diagram', () => {
       }
       callback class01 "functionCall" "A Tooltip"
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -301,7 +302,7 @@ describe('Class diagram', () => {
         testArray() bool[]
       }
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -317,7 +318,7 @@ describe('Class diagram', () => {
         testArray() bool[]
       }
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -335,7 +336,7 @@ describe('Class diagram', () => {
 
       cssClass "Class10" exClass
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -351,7 +352,7 @@ describe('Class diagram', () => {
         testArray() bool[]
       }
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
@@ -365,7 +366,7 @@ describe('Class diagram', () => {
 
       cssClass "Class10, class20" exClass
       `,
-      {}
+       {logLevel : 1, flowchart: { "htmlLabels": false },}
     );
     cy.get('svg');
   });
diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 237b41310..1b6fe88a6 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -20,6 +20,15 @@
   </head>
   <body>
     <h1>info below</h1>
+      <div class="mermaid" style="width: 100%; height: 20%;">
+        %%{init: {'theme': 'base',  'fontFamily': 'arial', 'themeVariables': {  'primaryColor': '#ff0000'}}}%%
+        classDiagram-v2
+
+        classApa -- classB : Inheritance
+        classA -- classC : link
+        classC -- classD : link
+        classB -- classD
+      </div>
       <div class="mermaid2" style="width: 100%; height: 20%;">
         classDiagram-v2
          class BankAccount{
@@ -43,7 +52,7 @@
         classB : method2() int
       </div>
 
-      <div class="mermaid" style="width: 100%; height: 20%;">
+      <div class="mermaid2" style="width: 100%; height: 20%;">
         classDiagram-v2
 
         classA -- classB : Inheritance
@@ -71,7 +80,10 @@
         // gantt: { axisFormat: '%m/%d/%Y' },
         sequence: { actorMargin: 50, showSequenceNumbers: true },
         // sequenceDiagram: { actorMargin: 300 } // deprecated
-        fontFamily: '"arial", sans-serif',
+        // fontFamily: '"arial", sans-serif',
+        // themeVariables: {
+        //   fontFamily: '"arial", sans-serif',
+        // },
         curve: 'linear',
         securityLevel: 'loose'
       });
diff --git a/src/config.js b/src/config.js
index 80f475780..99d8a2e20 100644
--- a/src/config.js
+++ b/src/config.js
@@ -49,7 +49,6 @@ export const updateCurrentConfig = (siteCfg, _directives) => {
  * @returns {*} - the siteConfig
  */
 export const setSiteConfig = conf => {
-  console.warn('Setting site config');
   siteConfig = assignWithDepth({}, defaultConfig);
   siteConfig = assignWithDepth(siteConfig, conf);
 
@@ -138,6 +137,15 @@ export const sanitize = options => {
 };
 
 export const addDirective = directive => {
+  if (directive.fontFamily) {
+    if (!directive.themeVariables) {
+      directive.themeVariables = { fontFamily: directive.fontFamily };
+    } else {
+      if (!directive.themeVariables.fontFamily) {
+        directive.themeVariables = { fontFamily: directive.fontFamily };
+      }
+    }
+  }
   directives.push(directive);
   updateCurrentConfig(siteConfig, directives);
 };
diff --git a/src/mermaidAPI.js b/src/mermaidAPI.js
index dba8f6750..59801856e 100644
--- a/src/mermaidAPI.js
+++ b/src/mermaidAPI.js
@@ -220,7 +220,7 @@ const render = function(id, _txt, cb, container) {
   // console.warn('Render fetching config');
 
   const cnf = configApi.getConfig();
-  console.warn('Render with config after adding new directives', cnf.themeVariables.primaryColor);
+  console.warn('Render with config after adding new directives', cnf.fontFamily);
   // Check the maximum allowed text size
   if (_txt.length > cnf.maxTextSize) {
     txt = 'graph TB;a[Maximum text size in diagram exceeded];style a fill:#faa';
@@ -553,6 +553,18 @@ function reinitialize() {
 
 function initialize(options) {
   console.warn(`mermaidAPI.initialize: v${pkg.version} `, options);
+
+  // Handle legacy location of font-family configuration
+  // console.warn('Conf - ', options.themeVariables.fontFamily);
+  if (options.fontFamily) {
+    if (!options.themeVariables) {
+      options.themeVariables = { fontFamily: options.fontFamily };
+    } else {
+      if (!options.themeVariables.fontFamily) {
+        options.themeVariables = { fontFamily: options.fontFamily };
+      }
+    }
+  }
   // Set default options
 
   if (options && options.theme && theme[options.theme]) {
diff --git a/src/styles.js b/src/styles.js
index 20e5e84a8..c157b0bf0 100644
--- a/src/styles.js
+++ b/src/styles.js
@@ -29,6 +29,7 @@ const themes = {
 export const calcThemeVariables = (theme, userOverRides) => theme.calcColors(userOverRides);
 
 const getStyles = (type, userStyles, options) => {
+  console.warn('options in styles: ', options);
   return ` {
     font-family: ${options.fontFamily};
     font-size: ${options.fontSize};