Chrome & Firefox not rendering bold font-weights of Avenir, but Safari does! How to fix?

Tags: css,google-chrome,fonts,safari,text-rendering

Problem :

As denoted by the title, I'm currently having a problem with how text is being rendered in Chrome & Firefox.

Safari is currently respecting my designation of a bold weight for Avenir Next, but neither Chrome or Firefox are.

This is true regardless of whether the weight is specified using "bold/bolder" or "700/800/900". And it is also true regardless of whether I specify the font-weight in my css stylesheet or inline html.

Does anyone know what might be causing this and/or, more importantly, a way to fix the text-rendering?

Oh and currently, I am importing Avenir Next onto my website through the following CSS:

@font-face {
    font-family: 'Avenir Next';
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    src: url('./fonts/AvenirNext-Regular/AvenirNext-Regular.eot?') format('eot'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.otf')  format('opentype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.ttf')  format('truetype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
}

Thanks a lot in advance for any help offered!

---

Solution :

As stated by the other answers, you need to provide @font-face directives for all the typefaces you want to us on your site. You currently have:

    @font-face {
    font-family: 'Avenir Next';
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    src: url('./fonts/AvenirNext-Regular/AvenirNext-Regular.eot?') format('eot'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.otf')  format('opentype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.ttf')  format('truetype'),
    url('./fonts/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
}

So just for clarity, this is what you need to include all the different styles (regular, bold, italicized, bold and italicized):

@font-face {
        font-family: 'Avenir Next';
        font-weight: normal;
        font-style: normal;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Regular/AvenirNext-Regular.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.otf')  format('opentype'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.woff') format('woff'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Regular/AvenirNext-Regular.svg#AvenirNext-Regular') format('svg');
    }

@font-face {
        font-family: 'Avenir Next Bold';
        font-weight: bold;
        font-style: normal;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Bold/AvenirNext-Bold.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.otf')  format('opentype'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.woff') format('woff'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Bold/AvenirNext-Bold.svg#AvenirNext-Bold') format('svg');
    }

@font-face {
        font-family: 'Avenir Next Italic';
        font-weight: normal;
        font-style: italic;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Italic/AvenirNext-Italic.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.otf')  format('opentype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.woff') format('woff'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Italic.svg#AvenirNext-Italic') format('svg');
    }

@font-face {
        font-family: 'Avenir Next Bold Italic';
        font-weight: bold;
        font-style: italic;
        font-variant:normal;
        src: url('./fonts/AvenirNext-Bold-Italic/AvenirNext-Bold-Italic.eot?#iefix') format('eot'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.otf')  format('opentype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.woff') format('woff'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.ttf')  format('truetype'),
        url('./fonts/AvenirNext-Italic/AvenirNext-Bold-Italic.svg#AvenirNext-Bold-Italic') format('svg');
    }

This is assuming the actual font names of course. Once this is in place, you can use the fonts as per @rubo123's answer. I added the #iefix to terminate the query string as explained in this question: css - How does ?#iefix solve web fonts loading in ie6-8?