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);
 };

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]) {

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};