CSS (SASS) @font-face: Declared 3 fonts within font-family, only 2 are loaded

Question

I use SASS with version 3.2.9 (Media Mark) and I want to use my custom font-family with 3 variants of the Source Sans Pro font ( Light , Regular , Bold ).

This is my _font.scss file:

// the charset to use
@charset "UTF-8";

// the relative path to the fonts directory
$sansSourceProPath: "../fonts/SourceSansPro" !default;

// the font-family
$default-font-family: 'Source Sans Pro';

/*
Light
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-light-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.ttf') format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-light-webfont.svg#sourcesanspro-light') format('svg'); // EDITED
  font-weight: 300; // EDITED
  font-style: normal;
}

/*
Regular
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.ttf'), format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-regular-webfont.svg#sourcesanspro-regular') format('svg'); // EDITED
  font-weight: 400; // EDITED
  font-style: normal;
}

/*
Bold
*/
@font-face {
  font-family: #{$default-font-family};
  src: url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.eot');
  src: url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.woff') format('woff'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.ttf') format('truetype'),
  url('#{$sansSourceProPath}/sourcesanspro-bold-webfont.svg#sourcesanspro-bold') format('svg'); // EDITED
  font-weight: 700; // EDITED
  font-style: normal;
}

In my main.scss file I declared the default font within the html tag like this:

html {
  font-size: $font-default-size; // 16px
  font-family: $default-font-family; // 'Source Sans Pro'
  font-weight: 300; // EDITED
}

and the element I use at my test page has the following CSS class:

.menu__header {
    font-size: 1.2em;
    font-weight: 400; // EDITED
    font-style: normal;
    text-transform: uppercase;
}

Somehow, in latest Google Chrome 30 only the Light and Bold fonts are loaded (requested). The needed Regular font is neither requested nor loaded (what confuses me as I haven't declared any element to use the Bold font and also only the Light font is shown)...

Am I doing something wrong?

I updated the code so that it's not this confusing anymore - still it's only loading the Light and Bold fonts and never the Regular font...

Answer 1

Light is font-weight: 300 not 200 (200 is extra light). Why are you assigning the light font to the regular font-weight and the regular font to the bold, etc? It's just going to make everything more confusing in the long run.

You can skip all of this and just add this before your closing </head> tag:

<link href='http://fonts.googleapis.com/css family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>

Your problem probably has to do with assigning the light face as regular, regular as bold, etc, especially considering that you did NOT make that change to the svg aliases, which means you're essentially mixing up the way you're using the variables. If you are going to use light font-weight and font-face for your "normal" font weight (and regular for bold, etc) you need to do this consistently across all variables... but really you should just do it the normal way (regular is regular, light is light, bold is bold).