From 30cb9afb4e00322248de4a061c5ac7a0d2fdac02 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Wed, 16 May 2018 11:49:40 +0200
Subject: [PATCH] m.plots: make the font configurable so we can pass the CI.

---
 doc/plugins/plots.rst                  |  12 +-
 pelican-plugins/m/plots.py             |  17 ++-
 pelican-plugins/m/test/plots/page.html | 152 +++++++++++++------------
 pelican-plugins/m/test/plots/page.rst  |   9 ++
 pelican-plugins/m/test/test_plots.py   |   3 +-
 5 files changed, 110 insertions(+), 83 deletions(-)

diff --git a/doc/plugins/plots.rst b/doc/plugins/plots.rst
index 1da954ab..8733ea65 100644
--- a/doc/plugins/plots.rst
+++ b/doc/plugins/plots.rst
@@ -49,9 +49,15 @@ package to your :py:`PLUGINS` in ``pelicanconf.py``.
 .. code:: python
 
     PLUGINS += ['m.plots']
-
-In addition you need the `Matplotlib <https://matplotlib.org/>`_ library
-installed. Get it via ``pip`` or your distribution package manager:
+    M_PLOTS_FONT = 'Source Sans Pro'
+
+Set :py:`M_PLOTS_FONT` to a font that matches your CSS theme (it's Source Sans
+Pro for `builtin m.css themes <{filename}/css/themes.rst>`_), note that you
+*need to have the font installed* on your system, otherwise it will fall back
+to whatever system font it finds instead (for example DejaVu Sans) and the
+output won't look as expected. In addition you need the
+`Matplotlib <https://matplotlib.org/>`_ library installed. Get it via ``pip``
+or your distribution package manager:
 
 .. code:: sh
 
diff --git a/pelican-plugins/m/plots.py b/pelican-plugins/m/plots.py
index dc809e02..173ca76d 100644
--- a/pelican-plugins/m/plots.py
+++ b/pelican-plugins/m/plots.py
@@ -37,7 +37,6 @@ import io
 
 import pelican.signals
 
-mpl.rcParams['font.family'] = 'Source Sans Pro'
 mpl.rcParams['font.size'] = '11'
 mpl.rcParams['axes.titlesize'] = '13'
 
@@ -101,13 +100,13 @@ _class_mapping = [
     ('<use style="fill:#cafe02;stroke:#cafe02;stroke-width:0.8;"', '<use'),
 
     # Label text on left
-    ('style="fill:#cafe02;font-family:Source Sans Pro;font-size:11px;font-style:normal;font-weight:normal;"', 'class="m-label"'),
+    ('style="fill:#cafe02;font-family:{font};font-size:11px;font-style:normal;font-weight:normal;"', 'class="m-label"'),
     # Label text on bottom (has extra style params)
-    ('style="fill:#cafe02;font-family:Source Sans Pro;font-size:11px;font-style:normal;font-weight:normal;', 'class="m-label" style="'),
+    ('style="fill:#cafe02;font-family:{font};font-size:11px;font-style:normal;font-weight:normal;', 'class="m-label" style="'),
     # Secondary label text
-    ('style="fill:#cafe0b;font-family:Source Sans Pro;font-size:11px;font-style:normal;font-weight:normal;"', 'class="m-label m-dim"'),
+    ('style="fill:#cafe0b;font-family:{font};font-size:11px;font-style:normal;font-weight:normal;"', 'class="m-label m-dim"'),
     # Title text
-    ('style="fill:#cafe02;font-family:Source Sans Pro;font-size:13px;font-style:normal;font-weight:normal;', 'class="m-title" style="'),
+    ('style="fill:#cafe02;font-family:{font};font-size:13px;font-style:normal;font-weight:normal;', 'class="m-title" style="'),
 
     # Bar colors
     ('style="fill:#cafe03;"', 'class="m-bar m-default"'),
@@ -240,6 +239,14 @@ class Plot(rst.Directive):
 def new_page(content):
     mpl.rcParams['svg.hashsalt'] = 0
 
+def configure(pelicanobj):
+    font = pelicanobj.settings.get('M_PLOTS_FONT', 'Source Sans Pro')
+    for i in range(len(_class_mapping)):
+        src, dst = _class_mapping[i]
+        _class_mapping[i] = (src.format(font=font), dst)
+    mpl.rcParams['font.family'] = font
+
 def register():
+    pelican.signals.initialized.connect(configure)
     pelican.signals.content_object_init.connect(new_page)
     rst.directives.register_directive('plot', Plot)
diff --git a/pelican-plugins/m/test/plots/page.html b/pelican-plugins/m/test/plots/page.html
index 833ee8ed..5bf4c214 100644
--- a/pelican-plugins/m/test/plots/page.html
+++ b/pelican-plugins/m/test/plots/page.html
@@ -23,7 +23,11 @@
       <div class="m-col-l-10 m-push-l-1">
         <h1>m.plots</h1>
 <!-- content -->
-<div class="m-plot">
+<p>Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have
+predictable rendering on the CIs.</p>
+<style>
+div.m-plot svg { font-family: DejaVu Sans; }
+</style><div class="m-plot">
 <svg viewBox="0 0 576 113.76">
  <defs>
   <style type="text/css">
@@ -33,13 +37,13 @@
  <g id="figure_1">
   <g id="axes_1">
    <g id="patch_1">
-    <path d="M 53.31 70.705312 L 560.62 70.705312 L 560.62 27.136406 L 53.31 27.136406 z" class="m-background"/>
+    <path d="M 59.365156 69.588125 L 560.62 69.588125 L 560.62 27.757969 L 59.365156 27.757969 z" class="m-background"/>
    </g>
    <g id="plot1-value0"><title>15.0 meters, i guess?</title>
-    <path clip-path="url(#p87df164df2)" d="M 53.31 29.116811 L 294.88619 29.116811 L 294.88619 46.72041 L 53.31 46.72041 z" class="m-bar m-success"/>
+    <path clip-path="url(#p2abd2612b1)" d="M 59.365156 29.659339 L 298.057939 29.659339 L 298.057939 46.560413 L 59.365156 46.560413 z" class="m-bar m-success"/>
    </g>
    <g id="plot1-value1"><title>30.0 meters, i guess?</title>
-    <path clip-path="url(#p87df164df2)" d="M 53.31 51.121309 L 536.462381 51.121309 L 536.462381 68.724908 L 53.31 68.724908 z" class="m-bar m-success"/>
+    <path clip-path="url(#p2abd2612b1)" d="M 59.365156 50.785681 L 536.750722 50.785681 L 536.750722 67.686754 L 59.365156 67.686754 z" class="m-bar m-success"/>
    </g>
    <g id="matplotlib.axis_1">
     <g id="xtick_1">
@@ -48,75 +52,75 @@
        <path d="M 0 0 L 0 3.5" id="m15f0a304df" class="m-line"/>
       </defs>
       <g>
-       <use x="53.31" xlink:href="#m15f0a304df" y="70.705312"/>
+       <use x="59.365156" xlink:href="#m15f0a304df" y="69.588125"/>
       </g>
      </g>
      <g id="text_1">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 53.31, 85.537656)" x="53.31" y="85.537656">0</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 59.365156, 84.946406)" x="59.365156" y="84.946406">0</text>
      </g>
     </g>
     <g id="xtick_2">
      <g id="line2d_2">
       <g>
-       <use x="133.835397" xlink:href="#m15f0a304df" y="70.705312"/>
+       <use x="138.929417" xlink:href="#m15f0a304df" y="69.588125"/>
       </g>
      </g>
      <g id="text_2">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 133.835397, 85.537656)" x="133.835397" y="85.537656">5</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 138.929417, 84.946406)" x="138.929417" y="84.946406">5</text>
      </g>
     </g>
     <g id="xtick_3">
      <g id="line2d_3">
       <g>
-       <use x="214.360794" xlink:href="#m15f0a304df" y="70.705312"/>
+       <use x="218.493678" xlink:href="#m15f0a304df" y="69.588125"/>
       </g>
      </g>
      <g id="text_3">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 214.360794, 85.537656)" x="214.360794" y="85.537656">10</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 218.493678, 84.946406)" x="218.493678" y="84.946406">10</text>
      </g>
     </g>
     <g id="xtick_4">
      <g id="line2d_4">
       <g>
-       <use x="294.88619" xlink:href="#m15f0a304df" y="70.705312"/>
+       <use x="298.057939" xlink:href="#m15f0a304df" y="69.588125"/>
       </g>
      </g>
      <g id="text_4">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 294.88619, 85.537656)" x="294.88619" y="85.537656">15</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 298.057939, 84.946406)" x="298.057939" y="84.946406">15</text>
      </g>
     </g>
     <g id="xtick_5">
      <g id="line2d_5">
       <g>
-       <use x="375.411587" xlink:href="#m15f0a304df" y="70.705312"/>
+       <use x="377.6222" xlink:href="#m15f0a304df" y="69.588125"/>
       </g>
      </g>
      <g id="text_5">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 375.411587, 85.537656)" x="375.411587" y="85.537656">20</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 377.6222, 84.946406)" x="377.6222" y="84.946406">20</text>
      </g>
     </g>
     <g id="xtick_6">
      <g id="line2d_6">
       <g>
-       <use x="455.936984" xlink:href="#m15f0a304df" y="70.705312"/>
+       <use x="457.186461" xlink:href="#m15f0a304df" y="69.588125"/>
       </g>
      </g>
      <g id="text_6">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 455.936984, 85.537656)" x="455.936984" y="85.537656">25</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 457.186461, 84.946406)" x="457.186461" y="84.946406">25</text>
      </g>
     </g>
     <g id="xtick_7">
      <g id="line2d_7">
       <g>
-       <use x="536.462381" xlink:href="#m15f0a304df" y="70.705312"/>
+       <use x="536.750722" xlink:href="#m15f0a304df" y="69.588125"/>
       </g>
      </g>
      <g id="text_7">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 536.462381, 85.537656)" x="536.462381" y="85.537656">30</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 536.750722, 84.946406)" x="536.750722" y="84.946406">30</text>
      </g>
     </g>
     <g id="text_8">
-     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 306.965, 99.415312)" x="306.965" y="99.415312">meters, i guess?</text>
+     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 309.992578, 99.592344)" x="309.992578" y="99.592344">meters, i guess?</text>
     </g>
    </g>
    <g id="matplotlib.axis_2">
@@ -126,32 +130,32 @@
        <path d="M 0 0 L -3.5 0" id="mba4ce04b6c" class="m-line"/>
       </defs>
       <g>
-       <use x="53.31" xlink:href="#mba4ce04b6c" y="37.91861"/>
+       <use x="59.365156" xlink:href="#mba4ce04b6c" y="38.109876"/>
       </g>
      </g>
      <g id="text_9">
-      <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 46.31, 41.834782)" x="46.31" y="41.834782">First</text>
+      <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 52.365156, 42.289017)" x="52.365156" y="42.289017">First</text>
      </g>
     </g>
     <g id="ytick_2">
      <g id="line2d_9">
       <g>
-       <use x="53.31" xlink:href="#mba4ce04b6c" y="59.923108"/>
+       <use x="59.365156" xlink:href="#mba4ce04b6c" y="59.236218"/>
       </g>
      </g>
      <g id="text_10">
-      <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 46.31, 63.83928)" x="46.31" y="63.83928">Second</text>
+      <text class="m-label" style="text-anchor:end;" transform="rotate(-0, 52.365156, 63.415358)" x="52.365156" y="63.415358">Second</text>
      </g>
     </g>
    </g>
    <g id="text_11">
-    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 306.965, 21.136406)" x="306.965" y="21.136406">A plot with a single color</text>
+    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 309.992578, 21.757969)" x="309.992578" y="21.757969">A plot with a single color</text>
    </g>
   </g>
  </g>
  <defs>
-  <clipPath id="p87df164df2">
-   <rect height="43.568906" width="507.31" x="53.31" y="27.136406"/>
+  <clipPath id="p2abd2612b1">
+   <rect height="41.830156" width="501.254844" x="59.365156" y="27.757969"/>
   </clipPath>
  </defs>
 </svg>
@@ -166,16 +170,16 @@
  <g id="figure_1">
   <g id="axes_1">
    <g id="patch_1">
-    <path d="M 60.154063 175.060625 L 560.62 175.060625 L 560.62 27.136406 L 60.154063 27.136406 z" class="m-background"/>
+    <path d="M 68.216719 173.988125 L 558.482422 173.988125 L 558.482422 27.757969 L 68.216719 27.757969 z" class="m-background"/>
    </g>
    <g id="plot2-value0"><title>3.0 ± 0.1 Mondays</title>
-    <path clip-path="url(#p0d12d49cf2)" d="M 60.154063 33.860234 L 294.564338 33.860234 L 294.564338 72.282109 L 60.154063 72.282109 z" class="m-bar m-success"/>
+    <path clip-path="url(#p1198f4ed7e)" d="M 68.216719 34.404794 L 297.849367 34.404794 L 297.849367 72.386653 L 68.216719 72.386653 z" class="m-bar m-success"/>
    </g>
    <g id="plot2-value1"><title>4.0 ± 2.1 Mondays</title>
-    <path clip-path="url(#p0d12d49cf2)" d="M 60.154063 81.887578 L 372.701096 81.887578 L 372.701096 120.309453 L 60.154063 120.309453 z" class="m-bar m-info"/>
+    <path clip-path="url(#p1198f4ed7e)" d="M 68.216719 81.882117 L 374.393583 81.882117 L 374.393583 119.863976 L 68.216719 119.863976 z" class="m-bar m-info"/>
    </g>
    <g id="plot2-value2"><title>5.0 ± 1.0 Mondays</title>
-    <path clip-path="url(#p0d12d49cf2)" d="M 60.154063 129.914922 L 450.837854 129.914922 L 450.837854 168.336797 L 60.154063 168.336797 z" class="m-bar m-danger"/>
+    <path clip-path="url(#p1198f4ed7e)" d="M 68.216719 129.359441 L 450.937798 129.359441 L 450.937798 167.3413 L 68.216719 167.3413 z" class="m-bar m-danger"/>
    </g>
    <g id="matplotlib.axis_1">
     <g id="xtick_1">
@@ -184,75 +188,75 @@
        <path d="M 0 0 L 0 3.5" id="m7a9c636c50" class="m-line"/>
       </defs>
       <g>
-       <use x="60.154063" xlink:href="#m7a9c636c50" y="175.060625"/>
+       <use x="68.216719" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_1">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 60.154063, 189.892969)" x="60.154063" y="189.892969">0</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 68.216719, 189.346406)" x="68.216719" y="189.346406">0</text>
      </g>
     </g>
     <g id="xtick_2">
      <g id="line2d_2">
       <g>
-       <use x="138.290821" xlink:href="#m7a9c636c50" y="175.060625"/>
+       <use x="144.760935" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_2">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 138.290821, 189.892969)" x="138.290821" y="189.892969">1</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 144.760935, 189.346406)" x="144.760935" y="189.346406">1</text>
      </g>
     </g>
     <g id="xtick_3">
      <g id="line2d_3">
       <g>
-       <use x="216.427579" xlink:href="#m7a9c636c50" y="175.060625"/>
+       <use x="221.305151" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_3">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 216.427579, 189.892969)" x="216.427579" y="189.892969">2</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 221.305151, 189.346406)" x="221.305151" y="189.346406">2</text>
      </g>
     </g>
     <g id="xtick_4">
      <g id="line2d_4">
       <g>
-       <use x="294.564338" xlink:href="#m7a9c636c50" y="175.060625"/>
+       <use x="297.849367" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_4">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 294.564338, 189.892969)" x="294.564338" y="189.892969">3</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 297.849367, 189.346406)" x="297.849367" y="189.346406">3</text>
      </g>
     </g>
     <g id="xtick_5">
      <g id="line2d_5">
       <g>
-       <use x="372.701096" xlink:href="#m7a9c636c50" y="175.060625"/>
+       <use x="374.393583" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_5">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 372.701096, 189.892969)" x="372.701096" y="189.892969">4</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 374.393583, 189.346406)" x="374.393583" y="189.346406">4</text>
      </g>
     </g>
     <g id="xtick_6">
      <g id="line2d_6">
       <g>
-       <use x="450.837854" xlink:href="#m7a9c636c50" y="175.060625"/>
+       <use x="450.937798" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_6">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 450.837854, 189.892969)" x="450.837854" y="189.892969">5</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 450.937798, 189.346406)" x="450.937798" y="189.346406">5</text>
      </g>
     </g>
     <g id="xtick_7">
      <g id="line2d_7">
       <g>
-       <use x="528.974613" xlink:href="#m7a9c636c50" y="175.060625"/>
+       <use x="527.482014" xlink:href="#m7a9c636c50" y="173.988125"/>
       </g>
      </g>
      <g id="text_7">
-      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 528.974613, 189.892969)" x="528.974613" y="189.892969">6</text>
+      <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 527.482014, 189.346406)" x="527.482014" y="189.346406">6</text>
      </g>
     </g>
     <g id="text_8">
-     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 310.387031, 203.980313)" x="310.387031" y="203.980313">Mondays</text>
+     <text class="m-label" style="text-anchor:middle;" transform="rotate(-0, 313.34957, 203.992344)" x="313.34957" y="203.992344">Mondays</text>
     </g>
    </g>
    <g id="matplotlib.axis_2">
@@ -262,79 +266,79 @@
        <path d="M 0 0 L -3.5 0" id="m03b20617ea" class="m-line"/>
       </defs>
       <g>
-       <use x="60.154063" xlink:href="#m03b20617ea" y="53.071172"/>
+       <use x="68.216719" xlink:href="#m03b20617ea" y="53.395723"/>
       </g>
      </g>
      <g id="text_9">
-      <text class="m-label" transform="translate(15.827969 51.138094)">January</text>
-      <text class="m-label" transform="translate(53.154063 62.836594)"/>
+      <text class="m-label" transform="translate(19.514688 51.416067)">January</text>
+      <text class="m-label" transform="translate(61.216719 63.733661)"/>
      </g>
     </g>
     <g id="ytick_2">
      <g id="line2d_9">
       <g>
-       <use x="60.154063" xlink:href="#m03b20617ea" y="101.098516"/>
+       <use x="68.216719" xlink:href="#m03b20617ea" y="100.873047"/>
       </g>
      </g>
      <g id="text_10">
-      <text class="m-label" transform="translate(11.88 99.210125)">February</text>
-      <text class="m-label" transform="translate(53.154063 110.908625)"/>
+      <text class="m-label" transform="translate(11.88 98.893391)">February</text>
+      <text class="m-label" transform="translate(61.216719 111.210984)"/>
      </g>
     </g>
     <g id="ytick_3">
      <g id="line2d_10">
       <g>
-       <use x="60.154063" xlink:href="#m03b20617ea" y="149.125859"/>
+       <use x="68.216719" xlink:href="#m03b20617ea" y="148.35037"/>
       </g>
      </g>
      <g id="text_11">
-      <text class="m-label" transform="translate(24.794688 147.215125)">March</text>
-      <text class="m-label" transform="translate(53.154063 158.868938)"/>
+      <text class="m-label" transform="translate(27.446719 146.370714)">March</text>
+      <text class="m-label" transform="translate(61.216719 158.688308)"/>
      </g>
     </g>
    </g>
    <g id="LineCollection_1">
-    <path clip-path="url(#p0d12d49cf2)" d="M 286.750662 53.071172 L 302.378014 53.071172" class="m-error"/>
-    <path clip-path="url(#p0d12d49cf2)" d="M 208.613903 101.098516 L 536.788289 101.098516" class="m-error"/>
-    <path clip-path="url(#p0d12d49cf2)" d="M 372.701096 149.125859 L 528.974613 149.125859" class="m-error"/>
+    <path clip-path="url(#p1198f4ed7e)" d="M 290.194945 53.395723 L 305.503788 53.395723" class="m-error"/>
+    <path clip-path="url(#p1198f4ed7e)" d="M 213.650729 100.873047 L 535.136436 100.873047" class="m-error"/>
+    <path clip-path="url(#p1198f4ed7e)" d="M 374.393583 148.35037 L 527.482014 148.35037" class="m-error"/>
    </g>
    <g id="line2d_11">
     <defs>
      <path d="M 0 9.375 L 0 -9.375" id="m63fa77ade3" class="m-error"/>
     </defs>
-    <g clip-path="url(#p0d12d49cf2)">
-     <use x="286.750662" xlink:href="#m63fa77ade3" y="53.071172"/>
-     <use x="208.613903" xlink:href="#m63fa77ade3" y="101.098516"/>
-     <use x="372.701096" xlink:href="#m63fa77ade3" y="149.125859"/>
+    <g clip-path="url(#p1198f4ed7e)">
+     <use x="290.194945" xlink:href="#m63fa77ade3" y="53.395723"/>
+     <use x="213.650729" xlink:href="#m63fa77ade3" y="100.873047"/>
+     <use x="374.393583" xlink:href="#m63fa77ade3" y="148.35037"/>
     </g>
    </g>
    <g id="line2d_12">
-    <g clip-path="url(#p0d12d49cf2)">
-     <use x="302.378014" xlink:href="#m63fa77ade3" y="53.071172"/>
-     <use x="536.788289" xlink:href="#m63fa77ade3" y="101.098516"/>
-     <use x="528.974613" xlink:href="#m63fa77ade3" y="149.125859"/>
+    <g clip-path="url(#p1198f4ed7e)">
+     <use x="305.503788" xlink:href="#m63fa77ade3" y="53.395723"/>
+     <use x="535.136436" xlink:href="#m63fa77ade3" y="100.873047"/>
+     <use x="527.482014" xlink:href="#m63fa77ade3" y="148.35037"/>
     </g>
    </g>
    <g id="text_12">
-    <text class="m-label m-dim" transform="translate(53.154063 52.434305)"/>
-    <text class="m-label m-dim" transform="translate(5.522344 64.088117)">a paradise</text>
+    <text class="m-label m-dim" transform="translate(61.216719 52.646105)"/>
+    <text class="m-label m-dim" transform="translate(3.454687 64.963699)">a paradise</text>
    </g>
    <g id="text_13">
-    <text class="m-label m-dim" transform="translate(53.154063 100.416961)"/>
-    <text class="m-label m-dim" transform="translate(31.064688 112.070773)">okay</text>
+    <text class="m-label m-dim" transform="translate(61.216719 100.123429)"/>
+    <text class="m-label m-dim" transform="translate(34.866563 112.441022)">okay</text>
    </g>
    <g id="text_14">
-    <text class="m-label m-dim" transform="translate(53.154063 148.488992)"/>
-    <text class="m-label m-dim" transform="translate(32.924375 160.142805)">hell!</text>
+    <text class="m-label m-dim" transform="translate(61.216719 147.600752)"/>
+    <text class="m-label m-dim" transform="translate(36.954844 159.918346)">hell!</text>
    </g>
    <g id="text_15">
-    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 310.387031, 21.136406)" x="310.387031" y="21.136406">A plot with separate colors, extra labels, error bars and custom height</text>
+    <text class="m-title" style="text-anchor:middle;" transform="rotate(-0, 313.34957, 21.757969)" x="313.34957" y="21.757969">A plot with separate colors, extra labels, error bars and custom height</text>
    </g>
   </g>
  </g>
  <defs>
-  <clipPath id="p0d12d49cf2">
-   <rect height="147.924219" width="500.465938" x="60.154063" y="27.136406"/>
+  <clipPath id="p1198f4ed7e">
+   <rect height="146.230156" width="490.265703" x="68.216719" y="27.757969"/>
   </clipPath>
  </defs>
 </svg>
diff --git a/pelican-plugins/m/test/plots/page.rst b/pelican-plugins/m/test/plots/page.rst
index 805c81a2..d0925f3c 100644
--- a/pelican-plugins/m/test/plots/page.rst
+++ b/pelican-plugins/m/test/plots/page.rst
@@ -1,6 +1,15 @@
 m.plots
 #######
 
+Note: the test uses DejaVu Sans instead of Source Sans Pro in order to have
+predictable rendering on the CIs.
+
+.. raw:: html
+
+    <style>
+    div.m-plot svg { font-family: DejaVu Sans; }
+    </style>
+
 .. plot:: A plot with a single color
     :type: barh
     :labels:
diff --git a/pelican-plugins/m/test/test_plots.py b/pelican-plugins/m/test/test_plots.py
index a7d011ac..e9a7a87f 100644
--- a/pelican-plugins/m/test/test_plots.py
+++ b/pelican-plugins/m/test/test_plots.py
@@ -30,7 +30,8 @@ class Plots(PluginTestCase):
 
     def test(self):
         self.run_pelican({
-            'PLUGINS': ['m.htmlsanity', 'm.plots']
+            'PLUGINS': ['m.htmlsanity', 'm.plots'],
+            'M_PLOTS_FONT': 'DejaVu Sans'
         })
 
         self.assertEqual(*self.actual_expected_contents('page.html'))
-- 
2.30.2