[!!!][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",
"requirejs": "~2.2.0",
"tablesort": "https://github.com/tristen/tablesort.git#v4.0.1",
"roboto-slab-fontface": "*",
"roboto-slab-fontface-kit": "*",
"es6-shim": "~0.35.1",
"almond": "~0.3.2",
"d3": "~3.5.17",

View File

@ -3,8 +3,6 @@
<head>
<meta charset="utf-8">
<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">
<script>
var jsonData = __inline(config.json);

View File

@ -1,13 +1,18 @@
// Set variables
@import 'modules/variables';
@import 'custom/variables';
// Add modules
@import 'modules/loader';
// Mixins
@import 'mixins/shadow';
@import 'mixins/icon-mixin';
@import 'mixins/icon';
@import 'mixins/font';
// Add modules
@import 'modules/reset';
@import 'modules/font/font';
@import 'modules/base';
@import 'modules/icon';
@import 'modules/font/icon';
@import 'modules/loader';
@import 'leaflet';
@import 'modules/leaflet';
@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
$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/"
},
robotoSlab: {
src: ["fonts/*",
"roboto-slab-fontface.css"
src: ["**/*-Regular.*",
"**/*-Bold.*"
],
expand: true,
dest: "build/",
cwd: "bower_components/roboto-slab-fontface"
dest: "build/fonts/",
filter: 'isFile',
flatten: true,
cwd: "bower_components/roboto-slab-fontface-kit/fonts"
},
roboto: {
src: ["fonts/*-Regular.*",
"css/roboto-fontface-regular.css"
src: ["fonts/*-Regular.*"
],
expand: true,
dest: "build/",