Chrome 19 not recognising font-weight: lighter

Question

I just pulled up a project I'm working on to make some modifications, and noticed that declaration font-weight: lighter which is being served via @font-face and it is no longer working on the site (see image - top chrome, bottom ff). Nothing has changed on my system (Windows) since last night, bar being upgraded to Chrome 19.0.1084.46 today, which I presume is the problem, but I am wondering if anyone else has noticed this or if there is a fix?

Thanks.

Answer 1

Try using a number instead the relative term lighter.

For example: font-weight:100 will be the lightest.

There's a handy article about relative and absolute font-weights here: http://webdesign.about.com/od/fonts/qt/aa031807.htm

Answer 2

If you are using a font-face font that has multiple styles (as you should) make sure that each variant is specifically tied to a font-weight, that way each variation has its own explicit file. Otherwise it's kinda up to the browser to make up what it wants to do. I have found that the automatically generated code from font-squirrel does not do this (though perhaps they've updated they're packaging)

Notice in the following code how each file has font-weight and font-style set explicitly. This leaves no room for guessing.

@font-face {
    font-family: 'CaviarDreams';
    src: url('fonts/CaviarDreamsItalic-webfont.eot');
    src: url('fonts/CaviarDreamsItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/CaviarDreamsItalic-webfont.woff') format('woff'),
         url('fonts/CaviarDreamsItalic-webfont.ttf') format('truetype'),
         url('fonts/CaviarDreamsItalic-webfont.svg#CaviarDreamsItalic') format('svg');
    font-weight: normal;
    font-style: italic;

}

@font-face {
    font-family: 'CaviarDreams';
    src: url('fonts/CaviarDreams_BoldItalic-webfont.eot');
    src: url('fonts/CaviarDreams_BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/CaviarDreams_BoldItalic-webfont.woff') format('woff'),
         url('fonts/CaviarDreams_BoldItalic-webfont.ttf') format('truetype'),
         url('fonts/CaviarDreams_BoldItalic-webfont.svg#CaviarDreamsBoldItalic') format('svg');
    font-weight: bold;
    font-style: italic;

}

@font-face {
    font-family: 'CaviarDreams';
    src: url('fonts/CaviarDreams-webfont.eot');
    src: url('fonts/CaviarDreams-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/CaviarDreams-webfont.woff') format('woff'),
         url('fonts/CaviarDreams-webfont.ttf') format('truetype'),
         url('fonts/CaviarDreams-webfont.svg#CaviarDreamsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CaviarDreams';
    src: url('fonts/CaviarDreams_Bold-webfont.eot');
    src: url('fonts/CaviarDreams_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/CaviarDreams_Bold-webfont.woff') format('woff'),
         url('fonts/CaviarDreams_Bold-webfont.ttf') format('truetype'),
         url('fonts/CaviarDreams_Bold-webfont.svg#CaviarDreamsBold') format('svg');
    font-weight: bold;
    font-style: normal;

}