Firefox ignoring CSS font-weight property

Question

Not sure if I'm using the correct process for displaying a font that has 3 weights - `normal`, `bold` and `lighter` - but, it seems to work in most browsers expect Firefox.

Firefox seems to be using `font-weight: lighter`; as default?

How the fonts appear in Chrome is what I'm after.

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

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

@font-face {
    font-family: 'lovelo';
    src: url('../fonts/lovelo-light.eot');
    src: url('../fonts/lovelo-light.eot?#iefix') format('embedded-opentype'),
         url('../fonts/lovelo-light.woff') format('woff'),
         url('../fonts/lovelo-light.ttf') format('truetype'),
         url('../fonts/lovelo-light.svg#loveloblack') format('svg');
    font-weight: lighter;
    font-style: normal;
}

working example

Answer 1

You could try using the actual numbers for the font-weight. 400 is the same as font-weight: normal. 700 is the same as font-weight: bold. 100, 200, or 300 are the additional values. You would have to choose one that is the effect you want.