CODEWITHSUNDEEP
google-chromefirefoxfonts
Fathon
Fathon

Reputation: 3

CSS Font displaying fine in Chrome but not FF or IE

I have created a landing page and needed a headline to be Avenir font. I got this to render properly in Chrome, but it does not work for any other browser. Is there something that I am missing?

CSS

    h1,h2,h3,h4,h5, .section h2 {
        margin:0;
        padding:0;
        color:#c41230;
        font-family: AvenirLT-Black;
        font-weight:normal;
    }

HTML

<div class="ten columns title">
          <h1 style="font:AvenirLT-Black">Additional Information</h1>
        </div>

Upvotes: 0

Views: 256

Answers (1)

Boris Zbarsky
Boris Zbarsky

Reputation: 35064

The font-family value is passed on through to the OS font subsystem.

Windows has two different font subsystems: DirectWrite and GDI. Chrome uses the older GDI; Firefox and IE use DirectWrite.

GDI doesn't have a way to represent more than two different font weights per family, so fonts that are extra-bold or extra-light get mapped to different family names, typically suffixed with "Black" or "Light" or "ExtraLight". DirectWrite, on the other hand, can represent multiple weights per family. So chances are DirectWrite is seeing your font as a font with the family name "AvenirLT" and an extra-bold font weight. So you want to do something like this:

font-family: AvenirLT, AvenirLT-Black;
font-weight: 900;

Upvotes: 1

Related Questions