gitea/nas
1
0
Fork 2
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Move the fonts from Google Fonts to local assets

Browse source 
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
This commit is contained in:
Billie Thompson 2017-01-26 14:06:40 +00:00
parent 6ba302b725
commit 55fa8e61e2
No known key found for this signature in database
GPG key ID: D5D50C9378BFCAB0
119 changed files with 201539 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/assets/stylesheets/application.scss
View file

@ -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/

11
app/assets/stylesheets/fonts/montserrat.scss Normal file
View file

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

153
app/assets/stylesheets/fonts/roboto-mono.scss Normal file
View file

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

144
app/assets/stylesheets/fonts/roboto.scss Normal file
View file

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