diff --git a/docs/font/JetBrains_Mono/FontJetBrainsMonoExample.html b/docs/font/JetBrains_Mono/FontJetBrainsMonoExample.html
index f1a444e9..4be756c1 100644
--- a/docs/font/JetBrains_Mono/FontJetBrainsMonoExample.html
+++ b/docs/font/JetBrains_Mono/FontJetBrainsMonoExample.html
@@ -16,38 +16,12 @@
 <body>
 
 <h1>H1 JetBrains Mono </h1>
-<h2>H2 Style Examples from variable font settings</h2>
 
-<p>This should show all the font features that are important in the Kolibri context.</p>
+<script src="../example-template.js">
+</script>
+<script>
+    document.writeln(HTML_TEMPLATE);
+</script>
 
-<dl>
-    <dt>regular</dt>
-    <dd>
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>lighter</dt>
-    <dd style="font-weight: lighter">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>italic</dt>
-    <dd style="font-style: italic">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>animate on hover</dt>
-    <dd class="animate_on_hover">
-        situs vilate in isis ab ernit.  &lt;- try mouse over here !</dd>
-
-    <dt>big O vs non-slashed zero </dt>
-    <dd >
-        big OOO vs zero 000</dd>
-
-    <dt>numbers with no font support </dt>
-    <dd >
-        111 in running text <br>000 in running text </dd>
-
-    <dt>numeric font support </dt>
-    <dd class="font_numeric">
-        111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
-</dl>
 </body>
 </html>
diff --git a/docs/font/Roboto_Slab/FontRobotoSlabExample.html b/docs/font/Roboto_Slab/FontRobotoSlabExample.html
index 5a027d53..436e4601 100644
--- a/docs/font/Roboto_Slab/FontRobotoSlabExample.html
+++ b/docs/font/Roboto_Slab/FontRobotoSlabExample.html
@@ -16,38 +16,14 @@
 <body>
 
 <h1>H1 Roboto Slab </h1>
-<h2>H2 Style Examples from variable font settings</h2>
 
-<p>This should show all the font features that are important in the Kolibri context.</p>
+<blockquote>Numeric font variants not supported.</blockquote>
 
-<dl>
-    <dt>regular</dt>
-    <dd>
-        situs vilate in isis ab ernit.</dd>
+<script src="../example-template.js">
+</script>
+<script>
+    document.writeln(HTML_TEMPLATE);
+</script>
 
-    <dt>lighter</dt>
-    <dd style="font-weight: lighter">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>italic</dt>
-    <dd style="font-style: italic">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>animate on hover</dt>
-    <dd class="animate_on_hover">
-        situs vilate in isis ab ernit.  &lt;- try mouse over here !</dd>
-
-    <dt>big O vs non-slashed zero </dt>
-    <dd >
-        big OOO vs zero 000</dd>
-
-    <dt>numbers with no font support </dt>
-    <dd >
-        111 in running text <br>000 in running text </dd>
-
-    <dt>numeric font support </dt>
-    <dd class="font_numeric">
-        111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
-</dl>
 </body>
 </html>
diff --git a/docs/font/Rubik/FontRubikExample.html b/docs/font/Rubik/FontRubikExample.html
index 3ef0536f..c2c08970 100644
--- a/docs/font/Rubik/FontRubikExample.html
+++ b/docs/font/Rubik/FontRubikExample.html
@@ -16,38 +16,12 @@
 <body>
 
 <h1>H1 Rubik </h1>
-<h2>H2 Style Examples from variable font settings</h2>
 
-<p>This should show all the font features that are important in the Kolibri context.</p>
+<script src="../example-template.js">
+</script>
+<script>
+    document.writeln(HTML_TEMPLATE);
+</script>
 
-<dl>
-    <dt>regular</dt>
-    <dd>
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>lighter</dt>
-    <dd style="font-weight: lighter">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>italic</dt>
-    <dd style="font-style: italic">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>animate on hover</dt>
-    <dd class="animate_on_hover">
-        situs vilate in isis ab ernit.  &lt;- try mouse over here !</dd>
-
-    <dt>big O vs non-slashed zero </dt>
-    <dd >
-        big OOO vs zero 000</dd>
-
-    <dt>numbers with no font support </dt>
-    <dd >
-        111 in running text <br>000 in running text </dd>
-
-    <dt>numeric font support </dt>
-    <dd class="font_numeric">
-        111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
-</dl>
 </body>
 </html>
diff --git a/docs/font/Saira/FontSairaExample.html b/docs/font/Saira/FontSairaExample.html
index a114a9d9..6a9c135e 100644
--- a/docs/font/Saira/FontSairaExample.html
+++ b/docs/font/Saira/FontSairaExample.html
@@ -16,38 +16,14 @@
 <body>
 
 <h1>H1 Saira</h1>
-<h2>H2 Style Examples from variable font settings</h2>
 
-<p>This should show all the font features that are important in the Kolibri context.</p>
+<blockquote>Nice font for fancy headers but also reads well for running text.</blockquote>
 
-<dl>
-    <dt>regular</dt>
-    <dd>
-        situs vilate in isis ab ernit.</dd>
+<script src="../example-template.js">
+</script>
+<script>
+    document.writeln(HTML_TEMPLATE);
+</script>
 
-    <dt>lighter</dt>
-    <dd style="font-weight: lighter">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>italic</dt>
-    <dd style="font-style: italic">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>animate on hover</dt>
-    <dd class="animate_on_hover">
-        situs vilate in isis ab ernit.  &lt;- try mouse over here !</dd>
-
-    <dt>big O vs non-slashed zero </dt>
-    <dd >
-        big OOO vs zero 000</dd>
-
-    <dt>numbers with no font support </dt>
-    <dd >
-        111 in running text <br>000 in running text </dd>
-
-    <dt>numeric font support </dt>
-    <dd class="font_numeric">
-        111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
-</dl>
 </body>
 </html>
diff --git a/docs/font/System_UI/FontSystemUiExample.html b/docs/font/System_UI/FontSystemUiExample.html
index 9ceeb96b..873c51e3 100644
--- a/docs/font/System_UI/FontSystemUiExample.html
+++ b/docs/font/System_UI/FontSystemUiExample.html
@@ -14,38 +14,12 @@
 <body>
 
 <h1>H1 System UI</h1>
-<h2>H2 Style Examples from variable font settings</h2>
 
-<p>This should show all the font features that are important in the Kolibri context.</p>
+<script src="../example-template.js">
+</script>
+<script>
+    document.writeln(HTML_TEMPLATE);
+</script>
 
-<dl>
-    <dt>regular</dt>
-    <dd>
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>lighter</dt>
-    <dd style="font-weight: lighter">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>italic</dt>
-    <dd style="font-style: italic">
-        situs vilate in isis ab ernit.</dd>
-
-    <dt>animate on hover</dt>
-    <dd class="animate_on_hover">
-        situs vilate in isis ab ernit.  &lt;- try mouse over here !</dd>
-
-    <dt>big O vs non-slashed zero </dt>
-    <dd >
-        big OOO vs zero 000</dd>
-
-    <dt>numbers with no font support </dt>
-    <dd >
-        111 in running text <br>000 in running text </dd>
-
-    <dt>numeric font support </dt>
-    <dd class="font_numeric">
-        111 in tabular text <br>000 in tabular text plus <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
-</dl>
 </body>
 </html>
diff --git a/docs/font/example-template.js b/docs/font/example-template.js
new file mode 100644
index 00000000..70af0196
--- /dev/null
+++ b/docs/font/example-template.js
@@ -0,0 +1,40 @@
+/*
+    Provides an html-template to share between font example pages.
+*/
+
+const HTML_TEMPLATE = `
+<h2>H2 Style Examples from variable font settings</h2>
+
+<p>This should show all the font features that are important in the Kolibri context.</p>
+
+<dl>
+    <dt>regular</dt>
+    <dd>
+        situs vilate in isis ab ernit.</dd>
+
+    <dt>lighter</dt>
+    <dd style="font-weight: lighter">
+        situs vilate in isis ab ernit.</dd>
+
+    <dt>italic</dt>
+    <dd style="font-style: italic">
+        situs vilate in isis ab ernit.</dd>
+
+    <dt>animate on hover</dt>
+    <dd class="animate_on_hover">
+        situs vilate in isis ab ernit.  &lt;- try mouse over here !</dd>
+
+    <dt>big O vs non-slashed zero </dt>
+    <dd >
+        big OOO vs zero 000</dd>
+
+    <dt>numbers with no font support </dt>
+    <dd >
+        111 in running text <br>000 in running text </dd>
+
+    <dt>numeric font support </dt>
+    <dd class="font_numeric">
+        111 in tabular text <br>000 in tabular text plus 
+        <span class="font_numeric_fraction">1/3</span>rd fractions</dd>
+</dl>
+`;
