CODEWITHSUNDEEP
cssfirefoxfontsfont-face
theory
theory

Reputation: 9887

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

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?

Upvotes: 2

Views: 3236

Answers (2)

theory
theory

Reputation: 9887

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.

Upvotes: 1

galdin
galdin

Reputation: 14034

Chrome and Safari use webkit as their rendering engine. (Chrome has now moved to Blink that uses a subset of webkit). Firefox on the other hand uses gecko. So yeah, that's pretty much the reason why we need to test webpages with different browsers.

As for your question, I guess this will help: http://css-tricks.com/forums/topic/font-rendering-ugly-in-firefox-but-beautiful-in-webkit/

Upvotes: 0

Related Questions