misc: use local copy of Open Sans & Roboto fonts (#18472)

This commit is contained in:
Frédéric Péters 2017-09-05 16:54:36 +02:00
parent 9bd9399cd7
commit 82f226b7b2
9 changed files with 85 additions and 8 deletions

View File

@ -1,4 +1,4 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,700);
@import '../includes/font-opensans';
h1#logo a {
padding-top: 10px;

View File

@ -0,0 +1,40 @@
$opensans-font-path: '../xstatic/fonts' !default;
@mixin opensans-font($type, $weight, $style: normal) {
@font-face {
font-family: 'Open Sans';
src: url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.eot');
src: url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.eot?#iefix') format('embedded-opentype'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.woff2') format('woff2'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.woff') format('woff'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.ttf') format('truetype'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.svg#OpenSans') format('svg');
font-weight: $weight;
font-style: $style;
}
@font-face {
font-family: 'OpenSans-#{$type}';
src: url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.eot');
src: url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.eot?#iefix') format('embedded-opentype'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.woff2') format('woff2'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.woff') format('woff'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.ttf') format('truetype'),
url('#{$opensans-font-path}/#{$type}/OpenSans-#{$type}.svg#OpenSans') format('svg');
}
}
@mixin opensans-font-pair($type, $weight) {
@include opensans-font($type, $weight);
@if $type == Regular {
@include opensans-font(Italic, $weight, italic);
} @else {
@include opensans-font(#{$type}Italic, $weight, italic);
}
}
@include opensans-font-pair('Light', 300);
@include opensans-font-pair('Regular', 400);
@include opensans-font-pair('SemiBold', 600);
@include opensans-font-pair('Bold', 700);
@include opensans-font-pair('Black', 900);

View File

@ -0,0 +1,37 @@
$roboto-font-path: '../xstatic/fonts' !default;
@mixin roboto-font($type, $weight, $style: normal) {
@font-face {
font-family: 'Roboto';
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
font-weight: $weight;
font-style: $style;
}
@font-face {
font-family: 'Roboto-#{$type}';
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot?#iefix') format('embedded-opentype'),
url('#{$roboto-font-path}/Roboto-#{$type}.woff2') format('woff2'),
url('#{$roboto-font-path}/Roboto-#{$type}.woff') format('woff'),
url('#{$roboto-font-path}/Roboto-#{$type}.ttf') format('truetype'),
url('#{$roboto-font-path}/Roboto-#{$type}.svg#Roboto') format('svg');
}
}
@mixin roboto-font-pair($type, $weight) {
@include roboto-font($type, $weight);
@include roboto-font(#{$type}Italic, $weight, italic);
}
@include roboto-font-pair('Thin', 100);
@include roboto-font-pair('Light', 300);
@include roboto-font-pair('Regular', 400);
@include roboto-font-pair('Medium', 500);
@include roboto-font-pair('Bold', 700);
@include roboto-font-pair('Black', 900);

View File

@ -1,5 +1,5 @@
@import url(http://fonts.googleapis.com/css?family=Roboto:500,400italic,700,900,500italic,400,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,700);
@import '../includes/font-opensans';
@import '../includes/font-roboto';
body {
background: #F7F7F7;

View File

@ -1,4 +1,4 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,700);
@import '../includes/font-opensans';
#header {
background: url('images/bandeau.jpg') no-repeat scroll left bottom;

View File

@ -1,3 +1,5 @@
@import '../includes/font-roboto';
@font-face {
font-family: 'the_sans_regular';
src: url('fonts/thesans_b5_plain-webfont.eot'), url('fonts/thesans_b5_plain-webfont.woff2') format('woff2'), url('fonts/thesans_b5_plain-webfont.woff') format('woff'), url('fonts/thesans_b5_plain-webfont.ttf') format('truetype');

View File

@ -1,7 +1,5 @@
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,200,300,400italic,600,700,700italic,800);
@import 'vars';
@import '../includes/publik';
@import '../includes/categories';

View File

@ -1,4 +1,4 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
@import '../includes/font-opensans';
div#header h1 {
padding-top: 20px;

View File

@ -1,4 +1,4 @@
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,600,700);
@import '../includes/font-opensans';
#header-wrapper {
border-top: 3px solid $primary-color;