Search code examples
htmlcssfontsfont-facefrontend

@Font-face not showing capital "A" in some browsers

Strange problem here. I'm using @font-face for a site and am having some issues. I initially wasn't getting capital "A"s to show up in Chrome on Mac. After setting a font-weight explicitly, anything above 300, it was fine.

Now, however, I'm seeing that it occurs in Firefox and on my clients machine in various browsers.

Here's my code:

@font-face {
    font-family: 'Avenir';
    src: url('../fonts/tricky.eot');
    src: url('../fonts/tricky.eot?#iefix') format('embedded-opentype'),
         url('../fonts/tricky.woff') format('woff'),
         url('../fonts/tricky.ttf') format('truetype'),
         url('../fonts/tricky.svg#ModernPictogramsNormal') format('svg');
    font-weight: 300;
    font-style: normal;
}

You can see it live here: http://infirmaryhealth.mdidev.com/

Thanks for any assistance-

Solution

  • Got the issue figured out.

    I was using Zurb's Foundation framework. They have this applied to h1 to h6:

    text-rendering: optimizeLegibility;

    Commented it out and voila!