[!!!][TASK] Refactor fonts

- Add woff2 for RobotoSlab
- Default font as option/variable
This commit is contained in:
Xaver Maierhofer 2016-06-03 00:28:59 +02:00
parent 995a5ca4ec
commit 4692413b52
10 changed files with 45 additions and 14 deletions

View File

@ -14,7 +14,7 @@
"moment": "~2.13.0", "moment": "~2.13.0",
"requirejs": "~2.2.0", "requirejs": "~2.2.0",
"tablesort": "https://github.com/tristen/tablesort.git#v4.0.1", "tablesort": "https://github.com/tristen/tablesort.git#v4.0.1",
"roboto-slab-fontface": "*", "roboto-slab-fontface-kit": "*",
"es6-shim": "~0.35.1", "es6-shim": "~0.35.1",
"almond": "~0.3.2", "almond": "~0.3.2",
"d3": "~3.5.17", "d3": "~3.5.17",

View File

@ -3,8 +3,6 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="viewport" content="width=device-width, user-scalable=no">
<link rel="stylesheet" href="roboto-slab-fontface.css">
<link rel="stylesheet" href="css/roboto-fontface.css">
<link rel="stylesheet" href="style.css?__inline=true"> <link rel="stylesheet" href="style.css?__inline=true">
<script> <script>
var jsonData = __inline(config.json); var jsonData = __inline(config.json);

View File

@ -1,13 +1,18 @@
// Set variables // Set variables
@import 'modules/variables'; @import 'modules/variables';
@import 'custom/variables'; @import 'custom/variables';
// Add modules
@import 'modules/loader'; // Mixins
@import 'mixins/shadow'; @import 'mixins/shadow';
@import 'mixins/icon-mixin'; @import 'mixins/icon';
@import 'mixins/font';
// Add modules
@import 'modules/reset'; @import 'modules/reset';
@import 'modules/font/font';
@import 'modules/base'; @import 'modules/base';
@import 'modules/icon'; @import 'modules/font/icon';
@import 'modules/loader';
@import 'leaflet'; @import 'leaflet';
@import 'modules/leaflet'; @import 'modules/leaflet';
@import 'modules/leaflet-layer'; @import 'modules/leaflet-layer';

17
scss/mixins/_font.scss Normal file
View File

@ -0,0 +1,17 @@
$font-path: 'fonts' !default;
@mixin load-font($name, $type, $weight, $style, $alias: '') {
@if $alias == '' {
$alias: $name;
}
@font-face {
font-family: '#{$alias}';
font-style: $style;
font-weight: $weight;
src: local('#{$name} #{$type}'),
local('#{$name}-#{$type}'),
url('#{$font-path}/#{$name}-#{$type}.woff2') format('woff2'),
url('#{$font-path}/#{$name}-#{$type}.woff') format('woff'),
url('#{$font-path}/#{$name}-#{$type}.ttf') format('truetype');
}
}

View File

@ -24,3 +24,6 @@ $buttondistance: 12pt !default;
// En/disable box-shadows // En/disable box-shadows
$shadows: 1 !default; $shadows: 1 !default;
// En/disable included font
$use-included-font: 1 !default;

View File

@ -0,0 +1,7 @@
$font-path: 'fonts';
@if $use-included-font == 1 {
@include load-font('Roboto', 'Regular', 400, normal);
@include load-font('RobotoSlab', 'Regular', 400, normal, 'Roboto Slab');
@include load-font('RobotoSlab', 'Bold', 700, normal, 'Roboto Slab');
}

View File

@ -0,0 +1 @@
../../../assets/icons/icon.scss

View File

@ -1 +0,0 @@
../../assets/icons/icon.scss

View File

@ -24,16 +24,17 @@ module.exports = function (grunt) {
dest: "build/" dest: "build/"
}, },
robotoSlab: { robotoSlab: {
src: ["fonts/*", src: ["**/*-Regular.*",
"roboto-slab-fontface.css" "**/*-Bold.*"
], ],
expand: true, expand: true,
dest: "build/", dest: "build/fonts/",
cwd: "bower_components/roboto-slab-fontface" filter: 'isFile',
flatten: true,
cwd: "bower_components/roboto-slab-fontface-kit/fonts"
}, },
roboto: { roboto: {
src: ["fonts/*-Regular.*", src: ["fonts/*-Regular.*"
"css/roboto-fontface-regular.css"
], ],
expand: true, expand: true,
dest: "build/", dest: "build/",