diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.eot b/app/javascript/fonts/montserrat/Montserrat-Regular.eot
deleted file mode 100644
index 2421c73cc7a017291359d6bd78d64875dd3d05ac..0000000000000000000000000000000000000000
Binary files a/app/javascript/fonts/montserrat/Montserrat-Regular.eot and /dev/null differ
diff --git a/app/javascript/fonts/roboto-mono/robotomono-regular-webfont.eot b/app/javascript/fonts/roboto-mono/robotomono-regular-webfont.eot
deleted file mode 100644
index a4b8d961b9589d76f889c726ae3d6f6e413e69ed..0000000000000000000000000000000000000000
Binary files a/app/javascript/fonts/roboto-mono/robotomono-regular-webfont.eot and /dev/null differ
diff --git a/app/javascript/fonts/roboto/roboto-bold-webfont.eot b/app/javascript/fonts/roboto/roboto-bold-webfont.eot
deleted file mode 100644
index dd8e1f24ac89035f63ed0e949d8ac5a26866c8e9..0000000000000000000000000000000000000000
Binary files a/app/javascript/fonts/roboto/roboto-bold-webfont.eot and /dev/null differ
diff --git a/app/javascript/fonts/roboto/roboto-italic-webfont.eot b/app/javascript/fonts/roboto/roboto-italic-webfont.eot
deleted file mode 100644
index 683f6c2cd8746734225910d50457064e2ff7f05e..0000000000000000000000000000000000000000
Binary files a/app/javascript/fonts/roboto/roboto-italic-webfont.eot and /dev/null differ
diff --git a/app/javascript/fonts/roboto/roboto-medium-webfont.eot b/app/javascript/fonts/roboto/roboto-medium-webfont.eot
deleted file mode 100644
index f3acc96f42a71a5981649f39ef1063c5e7c65c0f..0000000000000000000000000000000000000000
Binary files a/app/javascript/fonts/roboto/roboto-medium-webfont.eot and /dev/null differ
diff --git a/app/javascript/fonts/roboto/roboto-regular-webfont.eot b/app/javascript/fonts/roboto/roboto-regular-webfont.eot
deleted file mode 100644
index 5ca8e526cb22b8d646af054033b1a7b57090c540..0000000000000000000000000000000000000000
Binary files a/app/javascript/fonts/roboto/roboto-regular-webfont.eot and /dev/null differ
diff --git a/app/javascript/styles/about.scss b/app/javascript/styles/about.scss
index a969c867b72be6e9db001fa3f31ff40971124071..c874529966d11ed42bc2bb3fc8a4cd273b14706c 100644
--- a/app/javascript/styles/about.scss
+++ b/app/javascript/styles/about.scss
@@ -12,7 +12,7 @@
   }
 
   h1 {
-    font: 46px/52px 'Roboto', sans-serif;
+    font: 46px/52px 'mastodon-font-sans-serif', sans-serif;
     font-weight: 600;
     margin-bottom: 20px;
     color: $color4;
@@ -27,7 +27,7 @@
   }
 
   h2 {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'mastodon-font-display', sans-serif;
     font-size: 24px;
     line-height: 28px;
     font-weight: 400;
@@ -36,7 +36,7 @@
   }
 
   h3 {
-    font-family: 'Montserrat', sans-serif;
+    font-family: 'mastodon-font-display', sans-serif;
     font-size: 20px;
     line-height: 28px;
     font-weight: 400;
@@ -62,7 +62,7 @@
   }
 
   p, li {
-    font: 16px/28px 'Montserrat', sans-serif;
+    font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
     font-weight: 400;
     margin-bottom: 12px;
 
@@ -78,7 +78,7 @@
     margin: 0 2px;
     background: $color3;
     color: $color1;
-    font: 16px/16px 'Montserrat', sans-serif;
+    font: 16px/16px 'mastodon-font-sans-serif', sans-serif;
     font-weight: 300;
   }
 
@@ -132,7 +132,7 @@
     flex: 1 0 0;
     padding: 14px;
     text-align: right;
-    font: 16px/28px 'Montserrat', sans-serif;
+    font: 16px/28px 'mastodon-font-sans-serif', sans-serif;
 
     span, strong {
       display: block;
diff --git a/app/javascript/styles/basics.scss b/app/javascript/styles/basics.scss
index 78c142860c45d1e732c367384de459ccd8debaeb..e49c2214a458da74938a6728b199237001750f36 100644
--- a/app/javascript/styles/basics.scss
+++ b/app/javascript/styles/basics.scss
@@ -1,5 +1,5 @@
 body {
-  font-family: 'Roboto', sans-serif;
+  font-family: 'mastodon-font-sans-serif', sans-serif;
   background: $color1 url('../images/background-photo.jpg');
   background-size: cover;
   background-attachment: fixed;
diff --git a/app/javascript/styles/containers.scss b/app/javascript/styles/containers.scss
index 6f339f9981f5f127bb1231b0f2e52238fd006c18..3c489d5c846dc9fcf2f0a422f9fa4192b247e7bf 100644
--- a/app/javascript/styles/containers.scss
+++ b/app/javascript/styles/containers.scss
@@ -65,7 +65,7 @@
       display: block;
       font-size: 12px;
       font-weight: 400;
-      font-family: 'Roboto Mono', monospace;
+      font-family: 'mastodon-font-monospace', monospace;
     }
   }
 }
diff --git a/app/javascript/styles/fonts/montserrat.scss b/app/javascript/styles/fonts/montserrat.scss
index 7496e0800350becb314bd20c194d69b0e9189934..e4012ab02ef5da3d2f20bc9381a36723858ecc84 100644
--- a/app/javascript/styles/fonts/montserrat.scss
+++ b/app/javascript/styles/fonts/montserrat.scss
@@ -1,11 +1,9 @@
 @font-face {
-  font-family: 'Montserrat';
-  src: local('Montserrat');
-  src: url('../fonts/montserrat/Montserrat-Regular.eot');
-  src: url('../fonts/montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
-  url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
-  url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-family: 'mastodon-font-display';
+  src: local('Montserrat'),
+    url('../fonts/montserrat/Montserrat-Regular.woff2') format('woff2'),
+    url('../fonts/montserrat/Montserrat-Regular.woff') format('woff'),
+    url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto-mono.scss b/app/javascript/styles/fonts/roboto-mono.scss
index 846519d9f884b5a7881217ae955f61b44a5ed798..2a1f74e16313381652f50b9371a3e04001273b6c 100644
--- a/app/javascript/styles/fonts/roboto-mono.scss
+++ b/app/javascript/styles/fonts/roboto-mono.scss
@@ -1,12 +1,10 @@
 @font-face {
-  font-family: 'Roboto Mono';
-  src: local('Roboto Mono');
-  src: url('../fonts/roboto-mono/robotomono-regular-webfont.eot');
-  src: url('../fonts/roboto-mono/robotomono-regular-webfont.eot?#iefix') format('embedded-opentype'),
-  url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
-  url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
-  url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
-  url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
+  font-family: 'mastodon-font-monospace';
+  src: local('Roboto Mono'),
+    url('../fonts/roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+    url('../fonts/roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+    url('../fonts/roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+    url('../fonts/roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
   font-weight: 400;
   font-style: normal;
 }
diff --git a/app/javascript/styles/fonts/roboto.scss b/app/javascript/styles/fonts/roboto.scss
index 6198a580f7c136fcb3bc2988607dea1b635d14e2..345d9ad50e29fcba225b93f5f2598e423b347c33 100644
--- a/app/javascript/styles/fonts/roboto.scss
+++ b/app/javascript/styles/fonts/roboto.scss
@@ -1,8 +1,6 @@
 @font-face {
-  font-family: 'Roboto';
-  src: local('Roboto');
-  src: url('../fonts/roboto/roboto-italic-webfont.eot');
-  src: url('../fonts/roboto/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
+  font-family: 'mastodon-font-sans-serif';
+  src: local('Roboto'),
     url('../fonts/roboto/roboto-italic-webfont.woff2') format('woff2'),
     url('../fonts/roboto/roboto-italic-webfont.woff') format('woff'),
     url('../fonts/roboto/roboto-italic-webfont.ttf') format('truetype'),
@@ -12,11 +10,8 @@
 }
 
 @font-face {
-  font-family: 'Roboto';
-  src: local('Roboto');
-  src: url('../fonts/roboto/roboto-bold-webfont.eot');
-  src: local('Roboto bold'), local('roboto-bold'),
-    url('../fonts/roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
+  font-family: 'mastodon-font-sans-serif';
+  src: local('Roboto'),
     url('../fonts/roboto/roboto-bold-webfont.woff2') format('woff2'),
     url('../fonts/roboto/roboto-bold-webfont.woff') format('woff'),
     url('../fonts/roboto/roboto-bold-webfont.ttf') format('truetype'),
@@ -26,10 +21,8 @@
 }
 
 @font-face {
-  font-family: 'Roboto';
-  src: local('Roboto');
-  src: url('../fonts/roboto/roboto-medium-webfont.eot');
-  src: url('../fonts/roboto/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
+  font-family: 'mastodon-font-sans-serif';
+  src: local('Roboto'),
     url('../fonts/roboto/roboto-medium-webfont.woff2') format('woff2'),
     url('../fonts/roboto/roboto-medium-webfont.woff') format('woff'),
     url('../fonts/roboto/roboto-medium-webfont.ttf') format('truetype'),
@@ -39,10 +32,8 @@
 }
 
 @font-face {
-  font-family: 'Roboto';
-  src: local('Roboto');
-  src: url('../fonts/roboto/roboto-regular-webfont.eot');
-  src: url('../fonts/roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
+  font-family: 'mastodon-font-sans-serif';
+  src: local('Roboto'),
     url('../fonts/roboto/roboto-regular-webfont.woff2') format('woff2'),
     url('../fonts/roboto/roboto-regular-webfont.woff') format('woff'),
     url('../fonts/roboto/roboto-regular-webfont.ttf') format('truetype'),
diff --git a/app/javascript/styles/forms.scss b/app/javascript/styles/forms.scss
index 18258099b8f700cf5f72ae2d52ee30f612888712..70c049a4baf1491ce7f5b2aadc5cfb30338bd9b6 100644
--- a/app/javascript/styles/forms.scss
+++ b/app/javascript/styles/forms.scss
@@ -1,5 +1,5 @@
 code {
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'mastodon-font-monospace', monospace;
   font-weight: 400;
 }
 
diff --git a/app/javascript/styles/tables.scss b/app/javascript/styles/tables.scss
index ad8050580b75abc5709559f194dcfd263d5b0184..0568a07603e43156cc1ae72d2eb521b9821c5787 100644
--- a/app/javascript/styles/tables.scss
+++ b/app/javascript/styles/tables.scss
@@ -43,7 +43,7 @@
 }
 
 samp {
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'mastodon-font-monospace', monospace;
 }
 
 a.table-action-link {