How Do I get 'font-weight: lighter' to work in Google Chrome?

Question

There doesn't appear to be any difference between 'font-weight: normal' and 'font-weight: bold' in Google Chrome (and probably Safari). Has anyone found a way to invoke the 'font-weight: thinner' in Chrome the way that Firefox does?

Answer 1

This appears to be a known issue in Chrome fixed in latest development builds:

There is a temporary workaround you can also try:

To enable the font-weight property on a @font-face font which doesn't have a bold font defined, you need to explicitly define font-weight:normal; and font-style:normal; in the @font-face definition. Example:

@font-face {
    font-family: 'GriffosFont Regular';
    font-weight: normal;
    font-style: normal;
    src: url('fonts/GriffosFont.eot');
    src: local('GriffosFont Regular'), local('GriffosFont'), url('fonts/GriffosFont.woff') format('woff'), url('fonts/GriffosFont.\
ttf') format('truetype'), url('fonts/GriffosFont.svg#GriffosFont') format('svg');
}