Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #442735

    Hi!

    I’m having problems rendering fonts in safari and firefox, can you help me?

    In Safari, there seems to be no smoothing on non-retina screens:
    safari

    In firefox, it looks somewhat the same:
    firefox before scroll

    But oddly, when I scroll on firefox (I have a transparent header), it kinda changes and goes back to something nice and smooth (but my header is still pixelated – Turn any bike…):
    firefox after scroll

    For reference, here is how it displays in Chrome (and how I would like it to look everywhere!):
    chrome

    Please note that these jaggies only appear on NON retina screens on mac. It looks fine on a retina screen or on PC. Is it a problem with the roboto thin font that just doesn’t play nice with Safari/Firefox?

    Thanks guys, your support forums are really helpful.

    #443200

    Hey GabrielAlberola!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    .avia-safari body,.avia-mozilla body { -webkit-font-smoothing: subpixel-antialiased; }

    Very nice website by the way!

    Cheers!
    Yigit

    #443428

    Thanks Yigit! :)

    As for the css, it works, except when the menu bar up top is “transparent” (it’s not really transparent, but I used that feature as a workaround to make our logo appear only when the user scrolls):

    (the text in the button is okay)

    As soon as I scroll (and the menu bar changes states), it’s okay though.

    Thanks

    #445210

    Hey!

    This thread might be related to the current issue: http://stackoverflow.com/questions/28512254/google-web-fonts-not-correctly-rendering-in-safari

    Cheers!
    Ismael

    #457549

    Hi Sir,

    In chrome the goolgle font is ok, but safari and firefox not :(

    here u can see: http://prntscr.com/7fhs4l

    What to do?

    d.

    #458240

    Hey!


    @dweb
    : Did you try the suggestions above? A link to the site will help. What is the version of safari?

    Regards,
    Ismael

    #789410

    Hi there,
    We have an issue with an identical font, font size and weight showing up fine in Chrome but heavier in Safari.

    Any ideas how we can ensure equal rendering display between browser types.

    UPDATE: I have just confirmed that this apparent display anomaly is only happening when viewing on my iMac 27inch 5K Retina. When viewing on a non 5K screen both browser types display the same. Weird huh?

    • This reply was modified 7 years, 7 months ago by craigriches.
    #789525

    Hi craigriches,

    Ismael provided a link to a great explanation. Have a look http://stackoverflow.com/questions/28512254/google-web-fonts-not-correctly-rendering-in-safari

    Best regards,
    Victoria

    #789565

    try this too combining Yigits rule:

    html {  
        -webkit-font-smoothing: antialiased;
    }

    or as Basilis changing:

    * {  
        -webkit-font-smoothing: antialiased;
    }

    see thread here : https://kriesi.at/support/topic/different-font-weight-in-menu-navigation/?bbp_reply_to=717694&_wpnonce=9354f7d078#new-post

    and look to the warning:

    Use Wisely
    For these last two hacks, each character re-rendered will require extra resources so it’s best NOT to use these to render large swaths of copy. Use these on headers and global elements where you will have the most impact, but for the main copy use ‘serif’ or ‘sans-serif’ and let the browser decide.

    so perhaps you will only do for navigation or important headlines

    • This reply was modified 7 years, 7 months ago by Guenni007.
    #790007

    Hi,

    Thanks @Guenni007! :)

    Best regards,
    Ismael

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