Merge branch 'release/0.4.4'

.gitignore

@@ -1,3 +1,7 @@
+# Node
+node_modules/
+npm-debug.log
+
 # OS specific trash
 .DS_Store
 ._.DS_Store

README.md

@@ -14,6 +14,28 @@ $ 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`
+
+Their italic variants can be imported by adding `-italic` suffix:
+
+* `roboto-fontface-(thin|light|regular|medium|bold|black)-italic.scss`
+* `roboto-fontface-(thin|light|regular|medium|bold|black)-italic.less`
+
 ## Hinting
 
 Some of the included font files have [hinting](http://en.wikipedia.org/wiki/Font_hinting).

css/mixins.less

@@ -0,0 +1,34 @@
+@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);
+}

css/mixins.scss

@@ -0,0 +1,34 @@
+$roboto-font-path: '../fonts' !default;
+
+@mixin 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');
+    }
+}
+
+@mixin roboto-font-pair($type, $weight) {
+    @include roboto-font($type, $weight, normal);
+    @include roboto-font(#{$type}Italic, $weight, italic);
+}

css/roboto-fontface-black-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('BlackItalic', 900, italic);

css/roboto-fontface-black-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('BlackItalic', 900, italic);

css/roboto-fontface-black.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('Black', 900, normal);

css/roboto-fontface-black.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('Black', 900, normal);

css/roboto-fontface-bold-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('BoldItalic', 700, italic);

css/roboto-fontface-bold-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('BoldItalic', 700, italic);

css/roboto-fontface-bold.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('Bold', 700, normal);

css/roboto-fontface-bold.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('Bold', 700, normal);

css/roboto-fontface-light-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('LightItalic', 300, italic);

css/roboto-fontface-light-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('LightItalic', 300, italic);

css/roboto-fontface-light.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('Light', 300, normal);

css/roboto-fontface-light.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('Light', 300, normal);

css/roboto-fontface-medium-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('MediumItalic', 500, italic);

css/roboto-fontface-medium-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('MediumItalic', 500, italic);

css/roboto-fontface-medium.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('Medium', 500, normal);

css/roboto-fontface-medium.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('Medium', 500, normal);

css/roboto-fontface-regular-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('RegularItalic', 400, italic);

css/roboto-fontface-regular-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('RegularItalic', 400, italic);

css/roboto-fontface-regular.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('Regular', 400, normal);

css/roboto-fontface-regular.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('Regular', 400, normal);

css/roboto-fontface-thin-italic.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('ThinItalic', 100, italic);

css/roboto-fontface-thin-italic.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('ThinItalic', 100, italic);

css/roboto-fontface-thin.less

@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('Thin', 100, normal);

css/roboto-fontface-thin.scss

@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('Thin', 100, normal);

css/roboto-fontface.css

@@ -1,7 +1,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-Thin.eot');
-  src:  url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Thin'),
+        local('Roboto-Thin'),
+        url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin.woff2') format('woff2'),
         url('../fonts/Roboto-Thin.woff') format('woff'),
         url('../fonts/Roboto-Thin.ttf') format('truetype'),
@@ -13,7 +15,9 @@
 @font-face {
   font-family: 'Roboto-Thin';
   src:  url('../fonts/Roboto-Thin.eot');
-  src:  url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Thin'),
+        local('Roboto-Thin'),
+        url('../fonts/Roboto-Thin.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Thin.woff2') format('woff2'),
         url('../fonts/Roboto-Thin.woff') format('woff'),
         url('../fonts/Roboto-Thin.ttf') format('truetype'),
@@ -23,7 +27,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-ThinItalic.eot');
-  src:  url('../fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto ThinItalic'),
+        local('Roboto-ThinItalic'),
+        url('../fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-ThinItalic.woff2') format('woff2'),
         url('../fonts/Roboto-ThinItalic.woff') format('woff'),
         url('../fonts/Roboto-ThinItalic.ttf') format('truetype'),
@@ -35,7 +41,9 @@
 @font-face {
   font-family: 'Roboto-ThinItalic';
   src:  url('../fonts/Roboto-ThinItalic.eot');
-  src:  url('../fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto ThinItalic'),
+        local('Roboto-ThinItalic'),
+        url('../fonts/Roboto-ThinItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-ThinItalic.woff2') format('woff2'),
         url('../fonts/Roboto-ThinItalic.woff') format('woff'),
         url('../fonts/Roboto-ThinItalic.ttf') format('truetype'),
@@ -45,7 +53,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-Light.eot');
-  src:  url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Light'),
+        local('Roboto-Light'),
+        url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light.woff2') format('woff2'),
         url('../fonts/Roboto-Light.woff') format('woff'),
         url('../fonts/Roboto-Light.ttf') format('truetype'),
@@ -57,7 +67,9 @@
 @font-face {
   font-family: 'Roboto-Light';
   src:  url('../fonts/Roboto-Light.eot');
-  src:  url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Light'),
+        local('Roboto-Light'),
+        url('../fonts/Roboto-Light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Light.woff2') format('woff2'),
         url('../fonts/Roboto-Light.woff') format('woff'),
         url('../fonts/Roboto-Light.ttf') format('truetype'),
@@ -67,7 +79,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-LightItalic.eot');
-  src:  url('../fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto LightItalic'),
+        local('Roboto-LightItalic'),
+        url('../fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-LightItalic.woff2') format('woff2'),
         url('../fonts/Roboto-LightItalic.woff') format('woff'),
         url('../fonts/Roboto-LightItalic.ttf') format('truetype'),
@@ -79,7 +93,9 @@
 @font-face {
   font-family: 'Roboto-LightItalic';
   src:  url('../fonts/Roboto-LightItalic.eot');
-  src:  url('../fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto LightItalic'),
+        local('Roboto-LightItalic'),
+        url('../fonts/Roboto-LightItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-LightItalic.woff2') format('woff2'),
         url('../fonts/Roboto-LightItalic.woff') format('woff'),
         url('../fonts/Roboto-LightItalic.ttf') format('truetype'),
@@ -89,7 +105,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-Regular.eot');
-  src:  url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Regular'),
+        local('Roboto-Regular'),
+        url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular.woff2') format('woff2'),
         url('../fonts/Roboto-Regular.woff') format('woff'),
         url('../fonts/Roboto-Regular.ttf') format('truetype'),
@@ -101,7 +119,9 @@
 @font-face {
   font-family: 'Roboto-Regular';
   src:  url('../fonts/Roboto-Regular.eot');
-  src:  url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Regular'),
+        local('Roboto-Regular'),
+        url('../fonts/Roboto-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular.woff2') format('woff2'),
         url('../fonts/Roboto-Regular.woff') format('woff'),
         url('../fonts/Roboto-Regular.ttf') format('truetype'),
@@ -111,7 +131,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-RegularItalic.eot');
-  src:  url('../fonts/Roboto-RegularItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto RegularItalic'),
+        local('Roboto-RegularItalic'),
+        url('../fonts/Roboto-RegularItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-RegularItalic.woff2') format('woff2'),
         url('../fonts/Roboto-RegularItalic.woff') format('woff'),
         url('../fonts/Roboto-RegularItalic.ttf') format('truetype'),
@@ -123,7 +145,9 @@
 @font-face {
   font-family: 'Roboto-RegularItalic';
   src:  url('../fonts/Roboto-RegularItalic.eot');
-  src:  url('../fonts/Roboto-RegularItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto RegularItalic'),
+        local('Roboto-RegularItalic'),
+        url('../fonts/Roboto-RegularItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-RegularItalic.woff2') format('woff2'),
         url('../fonts/Roboto-RegularItalic.woff') format('woff'),
         url('../fonts/Roboto-RegularItalic.ttf') format('truetype'),
@@ -133,7 +157,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-Medium.eot');
-  src:  url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Medium'),
+        local('Roboto-Medium'),
+        url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium.woff2') format('woff2'),
         url('../fonts/Roboto-Medium.woff') format('woff'),
         url('../fonts/Roboto-Medium.ttf') format('truetype'),
@@ -145,7 +171,9 @@
 @font-face {
   font-family: 'Roboto-Medium';
   src:  url('../fonts/Roboto-Medium.eot');
-  src:  url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Medium'),
+        local('Roboto-Medium'),
+        url('../fonts/Roboto-Medium.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Medium.woff2') format('woff2'),
         url('../fonts/Roboto-Medium.woff') format('woff'),
         url('../fonts/Roboto-Medium.ttf') format('truetype'),
@@ -155,7 +183,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-MediumItalic.eot');
-  src:  url('../fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto MediumItalic'),
+        local('Roboto-MediumItalic'),
+        url('../fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-MediumItalic.woff2') format('woff2'),
         url('../fonts/Roboto-MediumItalic.woff') format('woff'),
         url('../fonts/Roboto-MediumItalic.ttf') format('truetype'),
@@ -167,7 +197,9 @@
 @font-face {
   font-family: 'Roboto-MediumItalic';
   src:  url('../fonts/Roboto-MediumItalic.eot');
-  src:  url('../fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto MediumItalic'),
+        local('Roboto-MediumItalic'),
+        url('../fonts/Roboto-MediumItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-MediumItalic.woff2') format('woff2'),
         url('../fonts/Roboto-MediumItalic.woff') format('woff'),
         url('../fonts/Roboto-MediumItalic.ttf') format('truetype'),
@@ -177,7 +209,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-Bold.eot');
-  src:  url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Bold'),
+        local('Roboto-Bold'),
+        url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold.woff2') format('woff2'),
         url('../fonts/Roboto-Bold.woff') format('woff'),
         url('../fonts/Roboto-Bold.ttf') format('truetype'),
@@ -189,7 +223,9 @@
 @font-face {
   font-family: 'Roboto-Bold';
   src:  url('../fonts/Roboto-Bold.eot');
-  src:  url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Bold'),
+        local('Roboto-Bold'),
+        url('../fonts/Roboto-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold.woff2') format('woff2'),
         url('../fonts/Roboto-Bold.woff') format('woff'),
         url('../fonts/Roboto-Bold.ttf') format('truetype'),
@@ -199,7 +235,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-BoldItalic.eot');
-  src:  url('../fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto BoldItalic'),
+        local('Roboto-BoldItalic'),
+        url('../fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-BoldItalic.woff2') format('woff2'),
         url('../fonts/Roboto-BoldItalic.woff') format('woff'),
         url('../fonts/Roboto-BoldItalic.ttf') format('truetype'),
@@ -211,7 +249,9 @@
 @font-face {
   font-family: 'Roboto-BoldItalic';
   src:  url('../fonts/Roboto-BoldItalic.eot');
-  src:  url('../fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto BoldItalic'),
+        local('Roboto-BoldItalic'),
+        url('../fonts/Roboto-BoldItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-BoldItalic.woff2') format('woff2'),
         url('../fonts/Roboto-BoldItalic.woff') format('woff'),
         url('../fonts/Roboto-BoldItalic.ttf') format('truetype'),
@@ -221,7 +261,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-Black.eot');
-  src:  url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Black'),
+        local('Roboto-Black'),
+        url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Black.woff2') format('woff2'),
         url('../fonts/Roboto-Black.woff') format('woff'),
         url('../fonts/Roboto-Black.ttf') format('truetype'),
@@ -233,7 +275,9 @@
 @font-face {
   font-family: 'Roboto-Black';
   src:  url('../fonts/Roboto-Black.eot');
-  src:  url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto Black'),
+        local('Roboto-Black'),
+        url('../fonts/Roboto-Black.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Black.woff2') format('woff2'),
         url('../fonts/Roboto-Black.woff') format('woff'),
         url('../fonts/Roboto-Black.ttf') format('truetype'),
@@ -243,7 +287,9 @@
 @font-face {
   font-family: 'Roboto';
   src:  url('../fonts/Roboto-BlackItalic.eot');
-  src:  url('../fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto BlackItalic'),
+        local('Roboto-BlackItalic'),
+        url('../fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-BlackItalic.woff2') format('woff2'),
         url('../fonts/Roboto-BlackItalic.woff') format('woff'),
         url('../fonts/Roboto-BlackItalic.ttf') format('truetype'),
@@ -255,9 +301,11 @@
 @font-face {
   font-family: 'Roboto-BlackItalic';
   src:  url('../fonts/Roboto-BlackItalic.eot');
-  src:  url('../fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'),
+  src:  local('Roboto BlackItalic'),
+        local('Roboto-BlackItalic'),
+        url('../fonts/Roboto-BlackItalic.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-BlackItalic.woff2') format('woff2'),
         url('../fonts/Roboto-BlackItalic.woff') format('woff'),
         url('../fonts/Roboto-BlackItalic.ttf') format('truetype'),
         url('../fonts/Roboto-BlackItalic.svg#Roboto') format('svg');
-}
+}

css/roboto-fontface.less

@@ -1,33 +1,4 @@
-@roboto-font-path: '../fonts';
-
-.roboto-font(@type, @weight, @style) {
-    @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');
-    }
-}
-
-.roboto-font-pair(@type, @weight) {
-    .roboto-font('@{type}', @weight, normal);
-    .roboto-font('@{type}Italic', @weight, italic);
-}
+@import "mixins";
 
 .roboto-font-pair('Thin', 100);
 .roboto-font-pair('Light', 300);

css/roboto-fontface.scss

@@ -1,33 +1,4 @@
-$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: 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);
-}
+@import "mixins";
 
 @include roboto-font-pair('Thin', 100);
 @include roboto-font-pair('Light', 300);

package.json

@@ -1,10 +1,10 @@
 {
   "name": "roboto-fontface",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "A simple package providing the Roboto fontface.",
   "main": "css/roboto-fontface.css",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "./test.sh"
   },
   "repository": {
     "type": "git",
@@ -16,9 +16,13 @@
     "fontface"
   ],
   "author": "Christian Hoffmeister <mail@choffmeister.de> (http://choffmeister.de/)",
-  "license": "Apache 2.0",
+  "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/choffmeister/roboto-fontface-bower/issues"
   },
-  "homepage": "https://github.com/choffmeister/roboto-fontface-bower"
+  "homepage": "https://github.com/choffmeister/roboto-fontface-bower",
+  "devDependencies": {
+    "less": "2.6.0",
+    "node-sass": "3.4.2"
+  }
 }

test.sh

@@ -0,0 +1,12 @@
+#!/bin/bash -e
+DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+for FILE in $DIR/css/*.less; do
+  echo "less $FILE"
+  lessc "$FILE" >/dev/null
+done
+
+for FILE in $DIR/css/*.scss; do
+  echo "sass $FILE"
+  node-sass "$FILE" >/dev/null
+done