Fix local fonts and change font-face values (#2877)

* Fix local fonts and change font-face values

* Remove eot font files

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;

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;

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;
     }
   }
 }

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;
 }

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;
 }

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'),

app/javascript/styles/forms.scss

@@ -1,5 +1,5 @@
 code {
-  font-family: 'Roboto Mono', monospace;
+  font-family: 'mastodon-font-monospace', monospace;
   font-weight: 400;
 }
 

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 {