Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • March 10, 2015 at 12:01 am #408543
    Nomodic

    Hi there, I finally got my custom fonts (AvenirNextLTPro-Medium and AvenirNextLTPro-Demi) to work across all browsers and it’s looking great. However on Chrome using Windows, the Avenir fonts come out extremely pixelated and ugly. I’ve tried various solutions from across the web. For example, this is my code for headings 4 through 6 under Quick CSS (have tried with and without the “!important” tags):

    h4, h5, h6 {
    font-family: ‘AvenirNextLTPro-Medium’, ‘Helvetica’, ‘Arial’, sans-serif !important;
    font-weight: normal;
    font-style: normal;
    margin-bottom: 5px;
    margin-top: 5px
    -webkit-font-smoothing: antialiased !important;
    -webkit-text-stroke: 0.1px !important;
    text-rendering: optimizeLegibility !important;
    }

    And here’s the code for headings 1 and 2:

    h1, h2 {
    font-family: ‘AvenirNextLTPro-Demi’, ‘Helvetica’, ‘Arial’, sans-serif !important;
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased !important;
    -webkit-text-stroke: 0.1px !important;
    text-rendering: optimizeLegibility !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004) !important;
    }

    Still no effect. I’m wondering if there’s any way to make the fonts smoother in Chrome, or if not, can I disable custom fonts from appearing on Chrome only?

    Any help would be greatly appreciated. Thanks!

    March 10, 2015 at 10:06 am #408693
    Rikard

    Hi Nomodic!

    Is this only happening on Windows? I checked your site on latests Chrome/Mac and it looks great. Also, what version of Chrome are you using?

    Best regards,
    Rikard

    March 10, 2015 at 4:25 pm #408912
    Nomodic

    Thanks for the quick response! On my Mac I’m using a remote desktop connection for Windows (which ironically looks better than on a PC). My colleagues are using Windows 7 and it looks quite bad. Chrome is version 40 (or Version 40.0.2214.115 m to be more specific).

    March 11, 2015 at 3:59 am #409635
    Ismael

    Hey!

    The font looks fine on chrome except for the text inside the strong tags because the font doesn’t support bold font weights. Install the bold version of the font: http://www.cufonfonts.com/en/font/13217/avenir-next-lt-pro

    Best regards,
    Ismael

    March 11, 2015 at 4:22 am #409644
    Nomodic
    This reply has been marked as private.
    March 12, 2015 at 4:25 am #410273
    Ismael

    Hey!

    That part is actually enclosed in a strong tag:

    <strong><span style="color: #00afef;">Details make the difference.</span></strong>

    Try to add this to the Quick CSS field and you’ll see the difference.

    strong, b {
  font-weight: normal;
}

    You can try to specify a different font for chrome browser with this:

    .avia-chrome h3 {
  font-family: 'Helvetica', 'Arial', sans-serif !important;
}

    Regards,
    Ismael

    March 12, 2015 at 9:38 pm #410741
    Nomodic

    Thanks again! Sorry didn’t notice the tag on the heading; I removed it and it still looks quite bad in Chrome.

    I tried your Quick CSS code to deactivate Avenir for all headers in Chrome only, but it worked across all browsers.

    Here’s the code I tried – any way to have it activate only in Chrome?:

    .avia-chrome h1, h2, h3, h4, h5, h6 {
    font-family: ‘Helvetica’, ‘Arial’, sans-serif !important;
    }

    Thanks again!

    March 13, 2015 at 5:24 pm #411142
    Yigit

    Hey!

    Please change the code to following one

    .avia-chrome h1,.avia-chrome h2,.avia-chrome h3,.avia-chrome h4,.avia-chrome h5,.avia-chrome h6 {
font-family: 'Helvetica', 'Arial', sans-serif !important;
}

    Best regards,
    Yigit

    March 13, 2015 at 7:03 pm #411222
    Nomodic

    Worked great. Thanks guys! Hope the Chrome issue can be fixed eventually – it’s a shame to have the fonts look different on different browsers.

    March 14, 2015 at 10:23 am #411460
    Rikard

    Hey!

    Yeah, it can be annoying but it’s all down to the individual browsers rendering.

    Regards,
    Rikard

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.