Tagged: error, google font, safari-bug
-
AuthorPosts
-
May 11, 2015 at 11:06 pm #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:
In firefox, it looks somewhat the same:
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…):
For reference, here is how it displays in Chrome (and how I would like it to look everywhere!):
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.
May 12, 2015 at 5:31 pm #443200Hey 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!
YigitMay 12, 2015 at 11:01 pm #443428Thanks 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
May 16, 2015 at 3:01 am #445210Hey!
This thread might be related to the current issue: http://stackoverflow.com/questions/28512254/google-web-fonts-not-correctly-rendering-in-safari
Cheers!
IsmaelJune 10, 2015 at 10:41 pm #457549Hi 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.
June 12, 2015 at 8:27 am #458240Hey!
@dweb: Did you try the suggestions above? A link to the site will help. What is the version of safari?Regards,
IsmaelMay 8, 2017 at 11:18 am #789410Hi 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.
May 8, 2017 at 1:01 pm #789525Hi 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,
VictoriaMay 8, 2017 at 1:42 pm #789565try 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.
May 9, 2017 at 6:59 am #790007 -
AuthorPosts
- You must be logged in to reply to this topic.