add woff2 fonts (#12695)

* add woff2 fonts

* update woff2 files

* explain how to create woff2 files

4 files changed, 23 insertions, 5 deletions

diff --git a/plugins/Morpheus/fonts/README.md b/plugins/Morpheus/fonts/README.md
index 94e7b54340..7e34e7a462 100644
--- a/plugins/Morpheus/fonts/README.md
+++ b/plugins/Morpheus/fonts/README.md
@@ -1,3 +1,19 @@
 To change / add / remove icons go to https://icomoon.io/app/ and upload `selection.json`.
-This will allow you to customize the font. When using third party icons don't forget to mention
-them in `LEGALNOTICE`.
\ No newline at end of file
+This will allow you to customize the font. When using third party icons, don't forget to mention
+them in `LEGALNOTICE`.
+
+## WOFF2
+
+WOFF2 is a font format that allows higher compression than WOFF and is already supported by [all major browsers](https://caniuse.com/#feat=woff2).
+
+Unfortunatly icomoon doesn't create WOFF2 files, but as WOFF2 is just a container for ttf fonts, they can be easily converted.
+
+### Steps
+
+- get `woff2_compress`
+    - e.g. via the `woff2` debian package or similar packages for other distributions
+    - or compile it yourself as explained on https://github.com/google/woff2
+- convert all .ttf 
+ files
+    - `woff2_compress piwik.ttf` (this file shouldn't change anymore)
+    - `woff2_compress matomo.ttf`
diff --git a/plugins/Morpheus/fonts/matomo.woff2 b/plugins/Morpheus/fonts/matomo.woff2
new file mode 100644
index 0000000000..2b9c583850
--- /dev/null
+++ b/plugins/Morpheus/fonts/matomo.woff2
diff --git a/plugins/Morpheus/fonts/piwik.woff2 b/plugins/Morpheus/fonts/piwik.woff2
new file mode 100644
index 0000000000..7818ac2e41
--- /dev/null
+++ b/plugins/Morpheus/fonts/piwik.woff2
diff --git a/plugins/Morpheus/stylesheets/base/icons.css b/plugins/Morpheus/stylesheets/base/icons.css
index 860cdf072c..93fcff408e 100644
--- a/plugins/Morpheus/stylesheets/base/icons.css
+++ b/plugins/Morpheus/stylesheets/base/icons.css
@@ -2,8 +2,9 @@
 /* @todo remove piwik font in Matomo 4.0 */
 @font-face {
     font-family: 'piwik';
-    src: url('plugins/Morpheus/fonts/piwik.ttf?gnoj4m') format('truetype'),
+    src: url('plugins/Morpheus/fonts/piwik.woff2?gnoj4m') format('woff2'),
          url('plugins/Morpheus/fonts/piwik.woff?gnoj4m') format('woff'),
+         url('plugins/Morpheus/fonts/piwik.ttf?gnoj4m') format('truetype'),
          url('plugins/Morpheus/fonts/piwik.svg?gnoj4m#piwik') format('svg');
     font-weight: normal;
     font-style: normal;
@@ -11,8 +12,9 @@
 
 @font-face {
     font-family: 'matomo';
-    src: url('plugins/Morpheus/fonts/matomo.ttf?gnoj4m') format('truetype'),
+    src: url('plugins/Morpheus/fonts/matomo.woff2?gnoj4m') format('woff2'),
          url('plugins/Morpheus/fonts/matomo.woff?gnoj4m') format('woff'),
+         url('plugins/Morpheus/fonts/matomo.ttf?gnoj4m') format('truetype'),
          url('plugins/Morpheus/fonts/matomo.svg?gnoj4m#matomo') format('svg');
     font-weight: normal;
     font-style: normal;
@@ -494,4 +496,4 @@
 
 .icon-embed:before {
     content: "\ea80";
-}
\ No newline at end of file
+}