Google Fonts are not rendering on Google Chrome
I'm building a new WordPress theme (don't know if that's relevant) and there's this issue that keeps bugging me.
I've loaded up Roboto Slab from Google Webfonts (included the CSS in <head> section). On every other browser out there, font is rendered OK, except Google Chrome. When I first load up the website in Google Chrome, texts using that custom font are NOT displayed AT ALL (even tho font-stack has Georgia as a fallback - "Roboto Slab", Georgia, serif; ). After I hover the styled link, or retrigger any CSS property in Inspector - texts become visible.
Since I've started the theme some time ago, I can clearly remember that it was working perfectly before. Is this some known recent Chrome update bug?
First load : a screenshot #1
After I reapply any of the CSS properties, get into responsive view or hover an element : a screenshot #2
Anyone have similar issues? How should I proceed with this?
Thanks!
Apparently it's a known Chrome bug. There's a css-only workaround that should solve the problem:
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
It seems like Chrome just needs to be told to repaint the text
The CSS fix didn't work for me, also the 0.5 sec delay script seems awkward.
This JS snippet seems to work for us:
<script type="text/javascript">
jQuery(function($) {
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
$('body').css('opacity', '1.0')
}
})
</script>
If the css fix does not work for you
In case the first rated post is not working, here is a solution:
remove the 'http:' in:
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
or
@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
As explained by David Bain, most modern browsers don't actually require that you specify the protocol, they will "deduce" the protocol based on the context from which you called it
链接地址: http://www.djcxy.com/p/66460.html