Created separate SCSS/LESS files for different weights
This commit is contained in:
Marcin Lewandowski
parent
ed3687770f
commit
a0e6979480
17
README.md
17
README.md
@ -14,6 +14,23 @@ $ npm install roboto-fontface --save
|
||||
$ bower install roboto-fontface --save
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
There're several files in the `css/` subdirectory. Import them in your project
|
||||
to have access to "Roboto" font face:
|
||||
|
||||
* `roboto-fontface.css` - whole font family compiled to CSS
|
||||
* `roboto-fontface.scss` - whole font family in SCSS
|
||||
* `roboto-fontface.less` - whole font family in LESS
|
||||
|
||||
Importing whole family may be unnecessary and lead to huge build, so if you are
|
||||
using SCSS or LESS, you can import only individual weights by importing one
|
||||
of the following files:
|
||||
|
||||
* `roboto-fontface-(thin|light|regular|medium|bold|black).scss`
|
||||
* `roboto-fontface-(thin|light|regular|medium|bold|black).less`
|
||||
|
||||
## Hinting
|
||||
|
||||
Some of the included font files have [hinting](http://en.wikipedia.org/wiki/Font_hinting).
|
||||
|
||||
36
css/roboto-fontface-black.less
Normal file
36
css/roboto-fontface-black.less
Normal file
@ -0,0 +1,36 @@
|
||||
@roboto-font-path: '../fonts';
|
||||
|
||||
.roboto-font(@type, @weight, @style) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('@{roboto-font-path}/Roboto-@{type}.eot');
|
||||
src: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.roboto-font-pair(@type, @weight) {
|
||||
.roboto-font('@{type}', @weight, normal);
|
||||
.roboto-font('@{type}Italic', @weight, italic);
|
||||
}
|
||||
|
||||
.roboto-font-pair('Black', 900);
|
||||
36
css/roboto-fontface-black.scss
Normal file
36
css/roboto-fontface-black.scss
Normal file
@ -0,0 +1,36 @@
|
||||
$roboto-font-path: '../fonts' !default;
|
||||
|
||||
@mixin roboto-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
|
||||
src: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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('Black', 900);
|
||||
36
css/roboto-fontface-bold.less
Normal file
36
css/roboto-fontface-bold.less
Normal file
@ -0,0 +1,36 @@
|
||||
@roboto-font-path: '../fonts';
|
||||
|
||||
.roboto-font(@type, @weight, @style) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('@{roboto-font-path}/Roboto-@{type}.eot');
|
||||
src: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.roboto-font-pair(@type, @weight) {
|
||||
.roboto-font('@{type}', @weight, normal);
|
||||
.roboto-font('@{type}Italic', @weight, italic);
|
||||
}
|
||||
|
||||
.roboto-font-pair('Bold', 700);
|
||||
36
css/roboto-fontface-bold.scss
Normal file
36
css/roboto-fontface-bold.scss
Normal file
@ -0,0 +1,36 @@
|
||||
$roboto-font-path: '../fonts' !default;
|
||||
|
||||
@mixin roboto-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
|
||||
src: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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('Bold', 700);
|
||||
36
css/roboto-fontface-light.less
Normal file
36
css/roboto-fontface-light.less
Normal file
@ -0,0 +1,36 @@
|
||||
@roboto-font-path: '../fonts';
|
||||
|
||||
.roboto-font(@type, @weight, @style) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('@{roboto-font-path}/Roboto-@{type}.eot');
|
||||
src: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.roboto-font-pair(@type, @weight) {
|
||||
.roboto-font('@{type}', @weight, normal);
|
||||
.roboto-font('@{type}Italic', @weight, italic);
|
||||
}
|
||||
|
||||
.roboto-font-pair('Light', 300);
|
||||
36
css/roboto-fontface-light.scss
Normal file
36
css/roboto-fontface-light.scss
Normal file
@ -0,0 +1,36 @@
|
||||
$roboto-font-path: '../fonts' !default;
|
||||
|
||||
@mixin roboto-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
|
||||
src: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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('Light', 300);
|
||||
36
css/roboto-fontface-medium.less
Normal file
36
css/roboto-fontface-medium.less
Normal file
@ -0,0 +1,36 @@
|
||||
@roboto-font-path: '../fonts';
|
||||
|
||||
.roboto-font(@type, @weight, @style) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('@{roboto-font-path}/Roboto-@{type}.eot');
|
||||
src: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.roboto-font-pair(@type, @weight) {
|
||||
.roboto-font('@{type}', @weight, normal);
|
||||
.roboto-font('@{type}Italic', @weight, italic);
|
||||
}
|
||||
|
||||
.roboto-font-pair('Medium', 500);
|
||||
36
css/roboto-fontface-medium.scss
Normal file
36
css/roboto-fontface-medium.scss
Normal file
@ -0,0 +1,36 @@
|
||||
$roboto-font-path: '../fonts' !default;
|
||||
|
||||
@mixin roboto-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
|
||||
src: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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('Medium', 500);
|
||||
36
css/roboto-fontface-regular.less
Normal file
36
css/roboto-fontface-regular.less
Normal file
@ -0,0 +1,36 @@
|
||||
@roboto-font-path: '../fonts';
|
||||
|
||||
.roboto-font(@type, @weight, @style) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('@{roboto-font-path}/Roboto-@{type}.eot');
|
||||
src: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.roboto-font-pair(@type, @weight) {
|
||||
.roboto-font('@{type}', @weight, normal);
|
||||
.roboto-font('@{type}Italic', @weight, italic);
|
||||
}
|
||||
|
||||
.roboto-font-pair('Regular', 400);
|
||||
36
css/roboto-fontface-regular.scss
Normal file
36
css/roboto-fontface-regular.scss
Normal file
@ -0,0 +1,36 @@
|
||||
$roboto-font-path: '../fonts' !default;
|
||||
|
||||
@mixin roboto-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
|
||||
src: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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('Regular', 400);
|
||||
36
css/roboto-fontface-thin.less
Normal file
36
css/roboto-fontface-thin.less
Normal file
@ -0,0 +1,36 @@
|
||||
@roboto-font-path: '../fonts';
|
||||
|
||||
.roboto-font(@type, @weight, @style) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('@{roboto-font-path}/Roboto-@{type}.eot');
|
||||
src: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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: local('Roboto @{type}'),
|
||||
local('Roboto-@{type}'),
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
.roboto-font-pair(@type, @weight) {
|
||||
.roboto-font('@{type}', @weight, normal);
|
||||
.roboto-font('@{type}Italic', @weight, italic);
|
||||
}
|
||||
|
||||
.roboto-font-pair('Thin', 100);
|
||||
36
css/roboto-fontface-thin.scss
Normal file
36
css/roboto-fontface-thin.scss
Normal file
@ -0,0 +1,36 @@
|
||||
$roboto-font-path: '../fonts' !default;
|
||||
|
||||
@mixin roboto-font($type, $weight, $style: normal) {
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('#{$roboto-font-path}/Roboto-#{$type}.eot');
|
||||
src: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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: local('Roboto #{$type}'),
|
||||
local('Roboto-#{$type}'),
|
||||
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);
|
||||
Loading…
x
Reference in New Issue
Block a user