Why does "lighter" @font-face still appear as the "normal" weight @font-face

Question

I'm trying to use the "lighter" version of my font, but in firefox and chrome it still appears as the "normal" weight.

Here is my font.css:

@font-face {
font-family: Avenir;
font-weight: normal;
src: url("AvenirLTStd-Medium.otf") format("opentype");
}

@font-face {
font-family: Avenir;
font-weight: bold;
src: url("AvenirLTStd-Black.otf") format("opentype");
}

@font-face {
font-family: Avenir;
font-weight: lighter;
src: url("12-Avenir-Light.ttf") format("opentype");
}

Here is what I'm using to activate the "lighter" weight on the H2 in #home:

body {
    background: none repeat scroll 0 0 #DADAD2;
    font-family: 'Avenir',sans-serif;
    font-weight: normal;
}

#home .six.columns h2 {
    color: #FAFAFA;
    display: block;
    font-size: 1.8em;
    font-weight: lighter;
    letter-spacing: 0.3em;
    margin-top: 25%;
    text-align: center;
}

You can see what I'm talking about here (just hover over one of the product images):

https://fine-grain-2.myshopify.com/

Answer 1

font-weight: lighter is telling the browser to use a lighter font than an inherited weight. So if a parent element has font-weight: bold, and it's child has font-weight: lighter - the child will have a regular weight (i.e. lighter than bold). "lighter" is not a synonym for a font-weight of 100.

@font-face is used to define your font weights, so terms like 'bolder' and 'lighter' have no meaning. You should use numerical values to define your fonts and the lighter/bolder keywords when you want to use the fonts.

Answer 2

If you want to keep the font-family consistent, in this case 'Avenir' and not 'Avenir-light' you can use the following syntax:

@font-face {
    font-family: Avenir;
    font-weight: 100;
    src: url("12-Avenir-Light.ttf") format("opentype");
}

This syntax allows you to keep the font-family name consistent and the normal weight will display correctly. The CSS for the target element would then be:

.targetElement{
    font-family: Avenir;
    font-weight: lighter;
}

Answer 3

I found a little hack that differentiates between the lighter and normal font weights.

I just changed my Avenir lighter @font-face from:

@font-face {
    font-family: Avenir;
    font-weight: lighter;
    src: url("12-Avenir-Light.ttf") format("opentype");
}

to:

@font-face {
    font-family: AvenirLight;
    font-weight: normal;
    src: url("12-Avenir-Light.ttf") format("opentype");
}

For some reason it was using the "lighter" font weight for normal and lighter. After I made this change the normal Avenir started using the real normal weight, and when I want to use the lighter weight I just change the font-family to AvenirLight