Skip to content

Instantly share code, notes, and snippets.

@goozler
Created February 17, 2015 07:25
Show Gist options
  • Save goozler/7e486c0d74bd5180175a to your computer and use it in GitHub Desktop.
Save goozler/7e486c0d74bd5180175a to your computer and use it in GitHub Desktop.
Rails 4 fonts (webfonts.ru roboto example)
//= require fonts
@mixin fontface($name, $dir, $filename, $weight, $style) {
@font-face {
font-family: $name;
src: font-url("#{$dir}/#{$filename}.eot");
src: font-url("#{$dir}/#{$filename}.woff") format('woff'),
font-url("#{$dir}/#{$filename}.ttf") format('truetype');
font-weight: $weight;
font-style: $style;
}
}
@import 'fonts/roboto';
@include fontface('Roboto', 'roboto', 'roboto-black', 900, normal);
@include fontface('Roboto', 'roboto', 'roboto-blackitalic', 900, italic);
@include fontface('Roboto', 'roboto', 'roboto-bold', bold, normal);
@include fontface('Roboto Condensed', 'roboto', 'roboto-boldcondensed', bold, normal);
@include fontface('Roboto Condensed', 'roboto', 'roboto-boldcondenseditalic', bold, italic);
@include fontface('Roboto', 'roboto', 'roboto-bolditalic', bold, italic);
@include fontface('Roboto Condensed', 'roboto', 'roboto-condensed', normal, normal);
@include fontface('Roboto Condensed', 'roboto', 'roboto-condenseditalic', normal, italic);
@include fontface('Roboto Condensed', 'roboto', 'robotocondensed-light', 300, normal);
@include fontface('Roboto Condensed', 'roboto', 'robotocondensed-lightitalic', 300, italic);
@include fontface('Roboto', 'roboto', 'roboto-italic', normal, italic);
@include fontface('Roboto', 'roboto', 'roboto-light', 300, normal);
@include fontface('Roboto', 'roboto', 'roboto-lightitalic', 300, italic);
@include fontface('Roboto', 'roboto', 'roboto-medium', 500, normal);
@include fontface('Roboto', 'roboto', 'roboto-mediumitalic', 500, italic);
@include fontface('Roboto', 'roboto', 'roboto-regular', normal, normal);
@include fontface('Roboto Slab', 'roboto', 'robotoslab-bold', bold, normal);
@include fontface('Roboto Slab', 'roboto', 'robotoslab-light', 300, normal);
@include fontface('Roboto Slab', 'roboto', 'robotoslab-regular', normal, normal);
@include fontface('Roboto Slab', 'roboto', 'robotoslab-thin', 100, normal);
@include fontface('Roboto', 'roboto', 'roboto-thin', 100, normal);
@include fontface('Roboto', 'roboto', 'roboto-thinitalic', 100, italic);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment