Use type variable also in Font-Family name.

[mficzel]

Currently all variants of the font get the same name "Roboto" that makes no sense.

[choffmeister]

The name might be "Roboto-Bold", "Roboto-Italic", "Roboto-BoldItalic" and so on. But in CSS speaking all are from the font-family "Roboto". They are differentiated by font-style and font-weight:

/* Roboto Bold */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  /* ... */
}

/* Roboto Italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  /* ... */
}

/* Roboto Bold Italic */
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 700;
  /* ... */
}

I have used the Google Font API as reference. There also all are just different kinds of the Roboto family.

[choffmeister]

@mficzel Do you agree? If yes, please let me know and I will close the issue. If not, please let me know, too, so we can discuss it in more detail :)

[mficzel]

I agree that this is a good solution. It is just a little uncommon since most css frameworks (like bootstrap) use mainly the font-family to switch the different font-styles. It would be good to support both ways in the scss.

[choffmeister]

Could we just add the fontface in both ways - as Roboto and Roboto-{Type}? Then one can choose if he wants to select the font by name + weight + style or just by name:

$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);
}

@include roboto-font-pair('Thin', 100);
@include roboto-font-pair('Light', 300);
@include roboto-font-pair('Regular', 400);
@include roboto-font-pair('Medium', 500);
@include roboto-font-pair('Bold', 700);
@include roboto-font-pair('Black', 900);

[choffmeister]

Released as v0.2.7.