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

Question

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!

score 4 · Accepted Answer · edited May 23 '17 at 12:24

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?

Interesting. Thanks to you & all those who answered with help. — AJeezy9, Jun 18 '14 at 00:24

score 2 · Answer 2 · answered Jun 16 '14 at 01:08

2

You will need to add the bold font into your css file as you have done for the regular font EG;

@font-face {
    font-family: 'Avenir Next Bold';
    font-weight: normal;
    font-style: normal;
    font-variant:normal;
    src: url('./fonts/AvenirNext-Bold/AvenirNext-Bold.eot?') 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');
}

And then assign this font family to the required elements EG;

b,strong,h1,h2,h3 {
    font-family: 'Avenir Next Bold';
}

answered Jun 16 '14 at 01:08

rubo123

186
6

One question though: is there a way to combine these font faces so as to not add additional requests to render the page? Perhaps in a similar fashion as how a request for Google Fonts is made with Open+Sans:400,700, etc equaling one browser request? Also, if those fonts needed to be added, then how come Safari renders it correctly but Chrome & Firefox act as if they don't exist? – user3570943 5 hours ago – AJeezy9 Jun 18 '14 at 06:05
Google actually has multiple font face requests in there file too EG - http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400,400italic,600,700,600italic,700italic Im not too sure about Safari. – rubo123 Jun 23 '14 at 04:16

score 0 · Answer 3 · answered Jun 16 '14 at 05:39

You have specified only a regular typeface. When you then request bold, browsers may apply synthetic bolding (algorithmic bolding, fake bold), or they may use regular typeface.

Contact the font vendor for obtaining a bold typeface and for instructions on using it on web pages.

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

3 Answers3