From 118410a74455bac79cafc2c8b7420d63d835b0e3 Mon Sep 17 00:00:00 2001
From: Marcin Lewandowski <marcin@radiokit.org>
Date: Sat, 27 Feb 2016 13:25:07 +0100
Subject: [PATCH] Extracted mixins to the separate files and separated normal
 and italic variants

---
 README.md                               |  5 ++++
 css/mixins.less                         | 34 +++++++++++++++++++++++
 css/mixins.scss                         | 34 +++++++++++++++++++++++
 css/roboto-fontface-black-italic.less   |  3 ++
 css/roboto-fontface-black-italic.scss   |  3 ++
 css/roboto-fontface-black.less          | 37 ++-----------------------
 css/roboto-fontface-black.scss          | 37 ++-----------------------
 css/roboto-fontface-bold-italic.less    |  3 ++
 css/roboto-fontface-bold-italic.scss    |  3 ++
 css/roboto-fontface-bold.less           | 37 ++-----------------------
 css/roboto-fontface-bold.scss           | 37 ++-----------------------
 css/roboto-fontface-light-italic.less   |  3 ++
 css/roboto-fontface-light-italic.scss   |  3 ++
 css/roboto-fontface-light.less          | 37 ++-----------------------
 css/roboto-fontface-light.scss          | 37 ++-----------------------
 css/roboto-fontface-medium-italic.less  |  3 ++
 css/roboto-fontface-medium-italic.scss  |  3 ++
 css/roboto-fontface-medium.less         | 37 ++-----------------------
 css/roboto-fontface-medium.scss         | 37 ++-----------------------
 css/roboto-fontface-regular-italic.less |  3 ++
 css/roboto-fontface-regular-italic.scss |  3 ++
 css/roboto-fontface-regular.less        | 37 ++-----------------------
 css/roboto-fontface-regular.scss        | 37 ++-----------------------
 css/roboto-fontface-thin-italic.less    |  3 ++
 css/roboto-fontface-thin-italic.scss    |  3 ++
 css/roboto-fontface-thin.less           | 37 ++-----------------------
 css/roboto-fontface-thin.scss           | 37 ++-----------------------
 css/roboto-fontface.less                | 35 +----------------------
 css/roboto-fontface.scss                | 35 +----------------------
 29 files changed, 135 insertions(+), 488 deletions(-)
 create mode 100644 css/mixins.less
 create mode 100644 css/mixins.scss
 create mode 100644 css/roboto-fontface-black-italic.less
 create mode 100644 css/roboto-fontface-black-italic.scss
 create mode 100644 css/roboto-fontface-bold-italic.less
 create mode 100644 css/roboto-fontface-bold-italic.scss
 create mode 100644 css/roboto-fontface-light-italic.less
 create mode 100644 css/roboto-fontface-light-italic.scss
 create mode 100644 css/roboto-fontface-medium-italic.less
 create mode 100644 css/roboto-fontface-medium-italic.scss
 create mode 100644 css/roboto-fontface-regular-italic.less
 create mode 100644 css/roboto-fontface-regular-italic.scss
 create mode 100644 css/roboto-fontface-thin-italic.less
 create mode 100644 css/roboto-fontface-thin-italic.scss

diff --git a/README.md b/README.md
index a9a56f7..7fc55a7 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,11 @@ 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).
diff --git a/css/mixins.less b/css/mixins.less
new file mode 100644
index 0000000..3e1121b
--- /dev/null
+++ b/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);
+}
diff --git a/css/mixins.scss b/css/mixins.scss
new file mode 100644
index 0000000..fc8e697
--- /dev/null
+++ b/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);
+}
diff --git a/css/roboto-fontface-black-italic.less b/css/roboto-fontface-black-italic.less
new file mode 100644
index 0000000..0bd8272
--- /dev/null
+++ b/css/roboto-fontface-black-italic.less
@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('BlackItalic', 900, italic);
diff --git a/css/roboto-fontface-black-italic.scss b/css/roboto-fontface-black-italic.scss
new file mode 100644
index 0000000..7203202
--- /dev/null
+++ b/css/roboto-fontface-black-italic.scss
@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('BlackItalic', 900, italic);
diff --git a/css/roboto-fontface-black.less b/css/roboto-fontface-black.less
index 2c72ba6..15f4840 100644
--- a/css/roboto-fontface-black.less
+++ b/css/roboto-fontface-black.less
@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.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);
+.roboto-font('Black', 900, normal);
diff --git a/css/roboto-fontface-black.scss b/css/roboto-fontface-black.scss
index 33b9d97..ba3a199 100644
--- a/css/roboto-fontface-black.scss
+++ b/css/roboto-fontface-black.scss
@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@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);
+@include roboto-font('Black', 900, normal);
diff --git a/css/roboto-fontface-bold-italic.less b/css/roboto-fontface-bold-italic.less
new file mode 100644
index 0000000..4c49f97
--- /dev/null
+++ b/css/roboto-fontface-bold-italic.less
@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('BoldItalic', 700, italic);
diff --git a/css/roboto-fontface-bold-italic.scss b/css/roboto-fontface-bold-italic.scss
new file mode 100644
index 0000000..0f287c5
--- /dev/null
+++ b/css/roboto-fontface-bold-italic.scss
@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('BoldItalic', 700, italic);
diff --git a/css/roboto-fontface-bold.less b/css/roboto-fontface-bold.less
index 042af38..0c61ee8 100644
--- a/css/roboto-fontface-bold.less
+++ b/css/roboto-fontface-bold.less
@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.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);
+.roboto-font('Bold', 700, normal);
diff --git a/css/roboto-fontface-bold.scss b/css/roboto-fontface-bold.scss
index c737092..fc80052 100644
--- a/css/roboto-fontface-bold.scss
+++ b/css/roboto-fontface-bold.scss
@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@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);
+@include roboto-font('Bold', 700, normal);
diff --git a/css/roboto-fontface-light-italic.less b/css/roboto-fontface-light-italic.less
new file mode 100644
index 0000000..9c62770
--- /dev/null
+++ b/css/roboto-fontface-light-italic.less
@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('LightItalic', 300, italic);
diff --git a/css/roboto-fontface-light-italic.scss b/css/roboto-fontface-light-italic.scss
new file mode 100644
index 0000000..4cda7ef
--- /dev/null
+++ b/css/roboto-fontface-light-italic.scss
@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('LightItalic', 300, italic);
diff --git a/css/roboto-fontface-light.less b/css/roboto-fontface-light.less
index 99faa14..af50de8 100644
--- a/css/roboto-fontface-light.less
+++ b/css/roboto-fontface-light.less
@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.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);
+.roboto-font('Light', 300, normal);
diff --git a/css/roboto-fontface-light.scss b/css/roboto-fontface-light.scss
index d30dbc8..cda2cf1 100644
--- a/css/roboto-fontface-light.scss
+++ b/css/roboto-fontface-light.scss
@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@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);
+@include roboto-font('Light', 300, normal);
diff --git a/css/roboto-fontface-medium-italic.less b/css/roboto-fontface-medium-italic.less
new file mode 100644
index 0000000..bf4f1a0
--- /dev/null
+++ b/css/roboto-fontface-medium-italic.less
@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('MediumItalic', 500, italic);
diff --git a/css/roboto-fontface-medium-italic.scss b/css/roboto-fontface-medium-italic.scss
new file mode 100644
index 0000000..fe7645d
--- /dev/null
+++ b/css/roboto-fontface-medium-italic.scss
@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('MediumItalic', 500, italic);
diff --git a/css/roboto-fontface-medium.less b/css/roboto-fontface-medium.less
index 363e4bd..c922e6a 100644
--- a/css/roboto-fontface-medium.less
+++ b/css/roboto-fontface-medium.less
@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.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);
+.roboto-font('Medium', 500, normal);
diff --git a/css/roboto-fontface-medium.scss b/css/roboto-fontface-medium.scss
index 810cc86..73f3fe0 100644
--- a/css/roboto-fontface-medium.scss
+++ b/css/roboto-fontface-medium.scss
@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@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);
+@include roboto-font('Medium', 500, normal);
diff --git a/css/roboto-fontface-regular-italic.less b/css/roboto-fontface-regular-italic.less
new file mode 100644
index 0000000..01d88ad
--- /dev/null
+++ b/css/roboto-fontface-regular-italic.less
@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('RegularItalic', 400, italic);
diff --git a/css/roboto-fontface-regular-italic.scss b/css/roboto-fontface-regular-italic.scss
new file mode 100644
index 0000000..abdaa9a
--- /dev/null
+++ b/css/roboto-fontface-regular-italic.scss
@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('RegularItalic', 400, italic);
diff --git a/css/roboto-fontface-regular.less b/css/roboto-fontface-regular.less
index 9543576..455e718 100644
--- a/css/roboto-fontface-regular.less
+++ b/css/roboto-fontface-regular.less
@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.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);
+.roboto-font('Regular', 400, normal);
diff --git a/css/roboto-fontface-regular.scss b/css/roboto-fontface-regular.scss
index abba2af..9dc5daa 100644
--- a/css/roboto-fontface-regular.scss
+++ b/css/roboto-fontface-regular.scss
@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@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);
+@include roboto-font('Regular', 400, normal);
diff --git a/css/roboto-fontface-thin-italic.less b/css/roboto-fontface-thin-italic.less
new file mode 100644
index 0000000..e50414b
--- /dev/null
+++ b/css/roboto-fontface-thin-italic.less
@@ -0,0 +1,3 @@
+@import "mixins";
+
+.roboto-font('ThinItalic', 100, italic);
diff --git a/css/roboto-fontface-thin-italic.scss b/css/roboto-fontface-thin-italic.scss
new file mode 100644
index 0000000..1957f9e
--- /dev/null
+++ b/css/roboto-fontface-thin-italic.scss
@@ -0,0 +1,3 @@
+@import "mixins";
+
+@include roboto-font('ThinItalic', 100, italic);
diff --git a/css/roboto-fontface-thin.less b/css/roboto-fontface-thin.less
index 642c0ec..ef5caa3 100644
--- a/css/roboto-fontface-thin.less
+++ b/css/roboto-fontface-thin.less
@@ -1,36 +1,3 @@
-@roboto-font-path: '../fonts';
+@import "mixins";
 
-.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);
+.roboto-font('Thin', 100, normal);
diff --git a/css/roboto-fontface-thin.scss b/css/roboto-fontface-thin.scss
index 8ed5a96..3d82b6c 100644
--- a/css/roboto-fontface-thin.scss
+++ b/css/roboto-fontface-thin.scss
@@ -1,36 +1,3 @@
-$roboto-font-path: '../fonts' !default;
+@import "mixins";
 
-@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);
+@include roboto-font('Thin', 100, normal);
diff --git a/css/roboto-fontface.less b/css/roboto-fontface.less
index 5bbae81..90a17f3 100644
--- a/css/roboto-fontface.less
+++ b/css/roboto-fontface.less
@@ -1,37 +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: 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);
-}
+@import "mixins";
 
 .roboto-font-pair('Thin', 100);
 .roboto-font-pair('Light', 300);
diff --git a/css/roboto-fontface.scss b/css/roboto-fontface.scss
index 5378885..ca972f4 100644
--- a/css/roboto-fontface.scss
+++ b/css/roboto-fontface.scss
@@ -1,37 +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: 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);
-}
+@import "mixins";
 
 @include roboto-font-pair('Thin', 100);
 @include roboto-font-pair('Light', 300);