diff --git a/cypress/platform/class.html b/cypress/platform/class.html
index 6fc4290e6..d2d0d6068 100644
--- a/cypress/platform/class.html
+++ b/cypress/platform/class.html
@@ -21,6 +21,7 @@
   <body>
     <h1>info below</h1>
       <div class="mermaid" style="width: 100%; height: 20%;">
+        %%{init: {'theme': 'base',  'fontFamily': 'arial', 'themeVariables': {  'primaryColor': '#ff0000'}}}%%
         classDiagram-v2
          class BankAccount{
           +String owner
@@ -42,6 +43,15 @@
         &lt;&lt;interface&gt;&gt; classB
         classB : method2() int
       </div>
+
+      <div class="mermaid" style="width: 100%; height: 20%;">
+        classDiagram-v2
+
+        classA -- classB : Inheritance
+        classA -- classC : link
+        classC -- classD : link
+        classB -- classD
+      </div>
       <script src="./mermaid.js"></script>
     <script>
       mermaid.parseError = function (err, hash) {
@@ -56,7 +66,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};
