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?


    CSS Howto..

    How do you programmatically apply a css class to an asp.net control?

    How to delay the display of the background image in a div

    How to add a hover transition effect on the navigation?

    How can i have CSS3 animating menu like followbubble.com

    How to crop a rectangular image into a square using CSS?

    How to use different kind of Google Font types?

    How can I set a specific border around an element?

    How to get all child elements using an xpath selector?

    how to set formatting of all textbox in asp.net website with css, without set cssclass property of each textbox

    Showing :before but hiding element with CSS only

    How to select where my overflow ellipsis starts

    CSS help, how to target this link inside of div

    jQuery DataTables is messing op my CSS grids in IE8, how to fix?

    How to align list items

    How do I increase the width and font-size of my twitter feed widget?

    How does CSS float work when applied to an “ul” element

    How to apply animation on the list items such that during an instance of time only one list item is visible?

    How to apply global styles with CSS modules in a react app?

    How can I define fieldset border color?

    Using CSS to show/hide content. How do I make hide the default

    how to make background image stretch vertically

    GWT how to add css style on Image Resource

    How to animate an image as it grows from the width of a container to the full viewport width?

    How to change border of div containing radio button when checked

    how to use javascript to get visited link css styles

    how to position heading in the center of the page

    How to bottom align a title of variable length

    How to dynamically manipulate elements in HTML

    CSS float property shows no height?

    How to achieve a left and right background split leaving middle div visible?