{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 一纸荒年 Trace。 的问题《Google Fonts are not rendering on Google Chrome》','https://www.manongdao.com/q-1165994.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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!
I got it fixed with the JS solution, but also needed to use the latest google hosted jquery (1.11) to get it fixed.
Checkout plugin I made: https://chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok
It does the web realign with pure javascript, which force browser to redraw whole page.
If anyone is still struggling with this issue (2019), there seems to be a bug in Google Fonts CSS generator script.
I loaded my fonts with the following tag:
Every
@font-facein the file contained a line like this:As you can see, the
local('sans-serif')is placed prior to the remote URL, which is wrong. This causes Chrome to load the default sans-serif font instead of the requested one.A simple fix is to reorder the
font-weightpart of the URL, fromRoboto:400,300toRoboto:300,400. This causes the generator to not include thelocal('sans-serif')source.Hope it helps someone.
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:
or
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
It's possible that the element has
text-rendering: optimizeLegibilityset which can cause this, or similar, issues. Changing it toautofixed this problem for me with a Foundation 5 project that sets it tooptimizeLegibilityby default.