diff --git a/gnucash/report/html-chart.scm b/gnucash/report/html-chart.scm
index 70d3d49ea6b..d3da4b47e13 100644
--- a/gnucash/report/html-chart.scm
+++ b/gnucash/report/html-chart.scm
@@ -186,7 +186,6 @@
                                                                      (cons 'display #t)
                                                                      (cons 'labelString "")))
                                                   (cons 'ticks (list
-                                                                (cons 'fontSize 12)
                                                                 (cons 'maxRotation 30))))
                                                  ;; the following another xAxis at the top
                                                  '((position . top)
@@ -205,7 +204,6 @@
                                                                      (cons 'display 1.5)
                                                                      (cons 'labelString "")))
                                                   (cons 'ticks (list
-                                                                (cons 'fontSize 10)
                                                                 (cons 'beginAtZero #f))))
                                                  ;; the following another yAxis on the right
                                                  '((position . right)
@@ -215,7 +213,6 @@
                                                  ))))
                     (cons 'title (list
                                   (cons 'display #t)
-                                  (cons 'fontSize 16)
                                   (cons 'fontStyle "")
                                   (cons 'text ""))))))
    "XXX"     ;currency-iso
@@ -348,6 +345,17 @@ Chart.pluginService.register({
   }
 })
 
+// copy font info from css into chartjs.
+bodyStyle = window.getComputedStyle (document.querySelector ('body'));
+Chart.defaults.global.defaultFontSize = parseInt (bodyStyle.fontSize);
+Chart.defaults.global.defaultFontFamily = bodyStyle.fontFamily;
+Chart.defaults.global.defaultFontStyle = bodyStyle.fontStyle;
+
+titleStyle = window.getComputedStyle (document.querySelector ('h3'));
+chartjsoptions.options.title.fontSize = parseInt (titleStyle.fontSize);
+chartjsoptions.options.title.fontFamily = titleStyle.fontFamily;
+chartjsoptions.options.title.fontStyle = titleStyle.fontStyle;
+
 document.getElementById(chartid).onclick = function(evt) {
   var activepoints = myChart.getElementAtEvent(evt);
   var anchor = document.getElementById(jumpid);
@@ -398,21 +406,23 @@ document.getElementById(chartid).onclick = function(evt) {
          (push (lambda (l) (set! retval (cons l retval))))
          ;; Use a unique chart-id for each chart. This prevents charts
          ;; clashing on multi-column reports
-         (id (guid-new-return)))
+         (id (symbol->string (gensym "chart"))))
 
     (push (gnc:html-js-include
            (gnc-path-find-localized-html-file "chartjs/Chart.bundle.min.js")))
 
+    ;; the following hidden h3 is used to query style and copy onto chartjs
+    (push "<h3 style='display:none'></h3>")
     (push (format #f "<div style='width:~a;height:~a;'>\n"
                   (size->str (gnc:html-chart-width chart))
                   (size->str (gnc:html-chart-height chart))))
     (push (format #f "<a id='jump-~a' href='' style='display:none'></a>\n" id))
-    (push (format #f "<canvas id='chart-~a'></canvas>\n" id))
+    (push (format #f "<canvas id=~s></canvas>\n" id))
     (push "</div>\n")
     (push (format #f "<script id='script-~a'>\n" id))
     (push (format #f "var curriso = ~s;\n" (gnc:html-chart-currency-iso chart)))
     (push (format #f "var currsym = ~s;\n" (gnc:html-chart-currency-symbol chart)))
-    (push (format #f "var chartid = 'chart-~a';\n" id))
+    (push (format #f "var chartid = ~s;\n" id))
     (push (format #f "var jumpid = 'jump-~a';\n" id))
     (push (format #f "var loadstring = ~s;\n" (G_ "Load")))
     (push (format #f "var chartjsoptions = ~a;\n\n"
@@ -428,7 +438,6 @@ document.getElementById(chartid).onclick = function(evt) {
 
     (push "chartjsoptions.options.tooltips.callbacks.label = tooltipLabel;\n")
     (push "chartjsoptions.options.tooltips.callbacks.title = tooltipTitle;\n")
-    (push "Chart.defaults.global.defaultFontFamily = \"'Trebuchet MS', Arial, Helvetica, sans-serif\";\n")
     (push JS-setup)
 
     (push "var myChart = new Chart(chartid, chartjsoptions);\n")
diff --git a/gnucash/report/html-utilities.scm b/gnucash/report/html-utilities.scm
index a801111e10f..d5bda78a315 100644
--- a/gnucash/report/html-utilities.scm
+++ b/gnucash/report/html-utilities.scm
@@ -228,13 +228,10 @@
 
 
 (define (gnc:html-make-generic-simple-warning report-title-string message)
-  (let ((p (gnc:make-html-text)))
-    (gnc:html-text-append!
-     p
-     (gnc:html-markup-h2 (string-append report-title-string ":"))
-     (gnc:html-markup-h2 "")
-     (gnc:html-markup-p message))
-    p))
+  (gnc:make-html-text
+   (gnc:html-markup-h3 (string-append report-title-string ":"))
+   (gnc:html-markup-h3 "")
+   (gnc:html-markup-p message)))
 
 
 (define (gnc:html-make-options-link report-id)
@@ -301,14 +298,11 @@
 (define (gnc:html-make-generic-warning
          report-title-string report-id
          warning-title-string warning-string)
-  (let ((p (gnc:make-html-text)))
-   (gnc:html-text-append!
-    p
-    (gnc:html-markup-h2 (string-append (G_ report-title-string) ":"))
-    (gnc:html-markup-h2 warning-title-string)
-    (gnc:html-markup-p warning-string)
-    (gnc:html-make-options-link report-id))
-   p))
+  (gnc:make-html-text
+   (gnc:html-markup-h3 (string-append (G_ report-title-string) ":"))
+   (gnc:html-markup-h3 warning-title-string)
+   (gnc:html-markup-p warning-string)
+   (gnc:html-make-options-link report-id)))
 
 (define (gnc:html-make-generic-options-warning
          report-title-string report-id)
diff --git a/gnucash/report/reports/example/welcome-to-gnucash.scm b/gnucash/report/reports/example/welcome-to-gnucash.scm
index 6675312ae58..80a2e076876 100644
--- a/gnucash/report/reports/example/welcome-to-gnucash.scm
+++ b/gnucash/report/reports/example/welcome-to-gnucash.scm
@@ -37,7 +37,7 @@
     (gnc:html-document-add-object!
      doc
      (gnc:make-html-text
-      (gnc:html-markup-h2
+      (gnc:html-markup-h3
        (format #f (G_ "Welcome to GnuCash ~a !")
                gnc:version))
       (gnc:html-markup-p
diff --git a/gnucash/report/reports/standard/new-owner-report.scm b/gnucash/report/reports/standard/new-owner-report.scm
index 8e0cbcad339..b64c4b02be8 100644
--- a/gnucash/report/reports/standard/new-owner-report.scm
+++ b/gnucash/report/reports/standard/new-owner-report.scm
@@ -1079,7 +1079,7 @@ invoices and amounts.")))))
           (gnc:html-document-add-object!
            document
            (gnc:make-html-text
-            (gnc:html-markup-h2 (G_ "No transactions found."))
+            (gnc:html-markup-h3 (G_ "No transactions found."))
             (gnc:html-markup-p (G_ "No matching transactions found"))
             (gnc:html-make-options-link (gnc:report-id report-obj)))))
 
diff --git a/gnucash/report/reports/standard/price-scatter.scm b/gnucash/report/reports/standard/price-scatter.scm
index a10e7f13055..787bd1333f3 100644
--- a/gnucash/report/reports/standard/price-scatter.scm
+++ b/gnucash/report/reports/standard/price-scatter.scm
@@ -192,7 +192,7 @@
       (gnc:html-document-add-object! 
        document 
        (gnc:make-html-text 
-        (gnc:html-markup-h2 title)
+        (gnc:html-markup-h3 title)
         (gnc:html-markup-p text))))
 
     (gnc:html-chart-set-type! chart 'line)