From 55fa8e61e2c43658de8d4352530c36cdcffc977f Mon Sep 17 00:00:00 2001 From: Billie Thompson Date: Thu, 26 Jan 2017 14:06:40 +0000 Subject: 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 --- app/assets/stylesheets/application.scss | 6 +- app/assets/stylesheets/fonts/montserrat.scss | 11 ++ app/assets/stylesheets/fonts/roboto-mono.scss | 153 ++++++++++++++++++++++++++ app/assets/stylesheets/fonts/roboto.scss | 144 ++++++++++++++++++++++++ 4 files changed, 311 insertions(+), 3 deletions(-) create mode 100644 app/assets/stylesheets/fonts/montserrat.scss create mode 100644 app/assets/stylesheets/fonts/roboto-mono.scss create mode 100644 app/assets/stylesheets/fonts/roboto.scss (limited to 'app/assets/stylesheets') 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; +} -- cgit