diff --git a/app/javascript/fonts/montserrat/Montserrat-Regular.eot b/app/javascript/fonts/montserrat/Montserrat-Regular.eot
deleted file mode 100644
index 2421c73cc..000000000
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 a4b8d961b..000000000
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 dd8e1f24a..000000000
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 683f6c2cd..000000000
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 f3acc96f4..000000000
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 5ca8e526c..000000000
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 a969c867b..c87452996 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 78c142860..e49c2214a 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 6f339f998..3c489d5c8 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 7496e0800..e4012ab02 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 846519d9f..2a1f74e16 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 6198a580f..345d9ad50 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 18258099b..70c049a4b 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 ad8050580..0568a0760 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 {