Why is Firefox Selecting the wrong font weight from my font-face options?

Question

I've been using Source Sans Pro and Source Code Pro on my sites, and it looks great in Safari and Chrome. In Firefox, however, it looks like the wrong font weight is being used, as the weight is much lighter (and harder to read) in Firefox. My @font-face declarations look like this:

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/sourcesanspro-regular-webfont.eot');
    src: url('/fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sourcesanspro-regular-webfont.woff') format('woff'),
         url('/fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),
         url('/fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Sans Pro';
    src: url('/fonts/sourcesanspro-light-webfont.eot');
    src: url('/fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/sourcesanspro-light-webfont.woff') format('woff'),
         url('/fonts/sourcesanspro-light-webfont.ttf') format('truetype'),
         url('/fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');
    font-weight: lighter; // light
    font-style: normal;

}

See the file for the full declaration. Is there something about my declarations that causes Firefox to select the wrong file when displaying the normal size?

Answer 1

As pointed out in this answer, it looks as though Firefox uses the last declared @font-face for a given style to display the content. The last face I had defined for the normal style had a weight of light, so that was the one Firefox used. The solution is to use the numeric weights in the @font-face declarations, as I have now done here. Then it properly uses the normal weight where appropriate.