Move the fonts from Google Fonts to local assets

Currently we have two problems that are resolved by this change.

The first is that we have a dependency on Google Fonts, which means
that should it ever go down, or it have issues we would also have
issues. This will resolve this by moving the dependencies we load from
there to the local server.

The second issue is that Google Fonts is currently returning the
`local()` css font source. This causes a problem where the users browser
fails to fallback to a missing glyph, resulting in many unusual
characters displaying the failure glyph. This will resolve this by
creating a font-family definition that does not use the `local()`
source.

I did not update the error pages with local fonts, they still use the
remote google fonts api, so they're a self contained page that does not
use the asset pipeline.

This resolves tootsuite/mastodon#531 and tootsuite/mastodon#12

4 files changed, 311 insertions, 3 deletions

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 649a0148b..337b7d358 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -1,7 +1,7 @@
 @import 'variables';
-@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,400italic);
-@import url(https://fonts.googleapis.com/css?family=Roboto+Mono:400,500);
-@import url(https://fonts.googleapis.com/css?family=Montserrat);
+@import 'fonts/roboto';
+@import 'fonts/roboto-mono';
+@import 'fonts/montserrat';
 @import 'font-awesome';
 
 /* http://meyerweb.com/eric/tools/css/reset/
diff --git a/app/assets/stylesheets/fonts/montserrat.scss b/app/assets/stylesheets/fonts/montserrat.scss
new file mode 100644
index 000000000..d25403c3e
--- /dev/null
+++ b/app/assets/stylesheets/fonts/montserrat.scss
@@ -0,0 +1,11 @@
+@font-face {
+  font-family: 'Montserrat';
+  src: font-url('montserrat/Montserrat-Regular.eot');
+  src: font-url('montserrat/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
+  font-url('montserrat/Montserrat-Regular.woff2') format('woff2'),
+  font-url('montserrat/Montserrat-Regular.woff') format('woff'),
+  font-url('montserrat/Montserrat-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
diff --git a/app/assets/stylesheets/fonts/roboto-mono.scss b/app/assets/stylesheets/fonts/roboto-mono.scss
new file mode 100644
index 000000000..ca64649de
--- /dev/null
+++ b/app/assets/stylesheets/fonts/roboto-mono.scss
@@ -0,0 +1,153 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-bold-webfont.eot');
+  src: font-url('roboto-mono/robotomono-bold-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-bold-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-bold-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-bold-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-bold-webfont.svg#roboto_monobold') format('svg');
+  font-weight: bold;
+  font-style: normal;
+
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-bolditalic-webfont.eot');
+  src: font-url('roboto-mono/robotomono-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-bolditalic-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-bolditalic-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-bolditalic-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-bolditalic-webfont.svg#roboto_monobold_italic') format('svg');
+  font-weight: bold;
+  font-style: italic;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-italic-webfont.eot');
+  src: font-url('roboto-mono/robotomono-italic-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-italic-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-italic-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-italic-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-italic-webfont.svg#roboto_monoitalic') format('svg');
+  font-weight: normal;
+  font-style: italic;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-light-webfont.eot');
+  src: font-url('roboto-mono/robotomono-light-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-light-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-light-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-light-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-light-webfont.svg#roboto_monolight') format('svg');
+  font-weight: 300;
+  font-style: normal;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-lightitalic-webfont.eot');
+  src: font-url('roboto-mono/robotomono-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-lightitalic-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-lightitalic-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-lightitalic-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-lightitalic-webfont.svg#roboto_monolight_italic') format('svg');
+  font-weight: 300;
+  font-style: italic;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-medium-webfont.eot');
+  src: font-url('roboto-mono/robotomono-medium-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-medium-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-medium-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-medium-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-medium-webfont.svg#roboto_monomedium') format('svg');
+  font-weight: 500;
+  font-style: normal;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-mediumitalic-webfont.eot');
+  src: font-url('roboto-mono/robotomono-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-mediumitalic-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-mediumitalic-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-mediumitalic-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-mediumitalic-webfont.svg#roboto_monomedium_italic') format('svg');
+  font-weight: 500;
+  font-style: italic;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-regular-webfont.eot');
+  src: font-url('roboto-mono/robotomono-regular-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-regular-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-regular-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-regular-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-regular-webfont.svg#roboto_monoregular') format('svg');
+  font-weight: 400;
+  font-style: normal;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-thin-webfont.eot');
+  src: font-url('roboto-mono/robotomono-thin-webfont.eot?#iefix') format('embedded-opentype'),
+  font-url('roboto-mono/robotomono-thin-webfont.woff2') format('woff2'),
+  font-url('roboto-mono/robotomono-thin-webfont.woff') format('woff'),
+  font-url('roboto-mono/robotomono-thin-webfont.ttf') format('truetype'),
+  font-url('roboto-mono/robotomono-thin-webfont.svg#roboto_monothin') format('svg');
+  font-weight: 200;
+  font-style: normal;
+
+}
+
+
+
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: font-url('roboto-mono/robotomono-thinitalic-webfont.eot');
+  src: font-url('roboto-mono/robotomono-thinitalic-webfont.eot?#iefix') format('embedded-opentype'),
+   font-url('roboto-mono/robotomono-thinitalic-webfont.woff2') format('woff2'),
+   font-url('roboto-mono/robotomono-thinitalic-webfont.woff') format('woff'),
+   font-url('roboto-mono/robotomono-thinitalic-webfont.ttf') format('truetype'),
+   font-url('roboto-mono/robotomono-thinitalic-webfont.svg#roboto_monothin_italic') format('svg');
+  font-weight: 200;
+  font-style: italic;
+
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/fonts/roboto.scss b/app/assets/stylesheets/fonts/roboto.scss
new file mode 100644
index 000000000..aa91efe6d
--- /dev/null
+++ b/app/assets/stylesheets/fonts/roboto.scss
@@ -0,0 +1,144 @@
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-lightitalic-webfont.eot');
+	src: font-url('roboto/roboto-lightitalic-webfont.eot?#iefix') format('embedded-opentype'),
+        font-url('roboto/roboto-lightitalic-webfont.woff2') format('woff2'),
+        font-url('roboto/roboto-lightitalic-webfont.woff') format('woff'),
+		font-url('roboto/roboto-lightitalic-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-lightitalic-webfont.svg#roboto-lightitalic-webfont') format('svg');
+	font-weight: 300;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-italic-webfont.eot');
+	src: font-url('roboto/roboto-italic-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-italic-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-italic-webfont.woff') format('woff'),
+		font-url('roboto/roboto-italic-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-italic-webfont.svg#roboto-italic-webfont') format('svg');
+	font-weight: normal;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-bold-webfont.eot');
+	src: local('Roboto bold'), local('roboto-bold'),
+		font-url('roboto/roboto-bold-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-bold-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-bold-webfont.woff') format('woff'),
+		font-url('roboto/roboto-bold-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-bold-webfont.svg#roboto-bold-webfont') format('svg');
+	font-weight: bold;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-medium-webfont.eot');
+	src: font-url('roboto/roboto-medium-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-medium-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-medium-webfont.woff') format('woff'),
+		font-url('roboto/roboto-medium-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-medium-webfont.svg#roboto-medium-webfont') format('svg');
+	font-weight: 500;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-thin-webfont.eot');
+	src: font-url('roboto/roboto-thin-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-thin-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-thin-webfont.woff') format('woff'),
+		font-url('roboto/roboto-thin-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-thin-webfont.svg#roboto-thin-webfont') format('svg');
+	font-weight: 100;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-regular-webfont.eot');
+	src: font-url('roboto/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-regular-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-regular-webfont.woff') format('woff'),
+		font-url('roboto/roboto-regular-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-mediumitalic-webfont.eot');
+	src: font-url('roboto/roboto-mediumitalic-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-mediumitalic-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-mediumitalic-webfont.woff') format('woff'),
+		font-url('roboto/roboto-mediumitalic-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-mediumitalic-webfont.svg#roboto-mediumitalic-webfont') format('svg');
+	font-weight: 500;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-bolditalic-webfont.eot');
+	src: font-url('roboto/roboto-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-bolditalic-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-bolditalic-webfont.woff') format('woff'),
+		font-url('roboto/roboto-bolditalic-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-bolditalic-webfont.svg#roboto-bolditalic-webfont') format('svg');
+	font-weight: bold;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-light-webfont.eot');
+	src: font-url('roboto/roboto-light-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-light-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-light-webfont.woff') format('woff'),
+		font-url('roboto/roboto-light-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-light-webfont.svg#roboto-light-webfont') format('svg');
+	font-weight: 300;
+	font-style: normal;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-thinitalic-webfont.eot');
+	src: font-url('roboto/roboto-thinitalic-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-thinitalic-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-thinitalic-webfont.woff') format('woff'),
+		font-url('roboto/roboto-thinitalic-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-thinitalic-webfont.svg#roboto-thinitalic-webfont') format('svg');
+	font-weight: 100;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-blackitalic-webfont.eot');
+	src: font-url('roboto/roboto-blackitalic-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-blackitalic-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-blackitalic-webfont.woff') format('woff'),
+		font-url('roboto/roboto-blackitalic-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-blackitalic-webfont.svg#roboto-blackitalic-webfont') format('svg');
+	font-weight: 900;
+	font-style: italic;
+}
+
+@font-face {
+	font-family: 'Roboto';
+	src: font-url('roboto/roboto-black-webfont.eot');
+	src: font-url('roboto/roboto-black-webfont.eot?#iefix') format('embedded-opentype'),
+		font-url('roboto/roboto-black-webfont.woff2') format('woff2'),
+		font-url('roboto/roboto-black-webfont.woff') format('woff'),
+		font-url('roboto/roboto-black-webfont.ttf') format('truetype'),
+		font-url('roboto/roboto-black-webfont.svg#roboto-black-webfont') format('svg');
+	font-weight: 900;
+	font-style: normal;
+}