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!

标签： html css google-chrome google-webfonts

17条回答

兄弟一词,经得起流年.

2楼-- · 2020-01-23 07:27

i just used to delete roboto font from my windows fonts and every thing work right now.

it is maybe beacause you have older version of font on your system . i guess .

0人赞添加讨论(0) 举报

别忘想泡老子

3楼-- · 2020-01-23 07:27

It may not be a silver bullet, but fixe the issue on our site by moving the fontawesome css link to the bottom of our pages as well as weblike fix listed above.

0人赞添加讨论(0) 举报

兄弟一词,经得起流年.

4楼-- · 2020-01-23 07:29

I've incorporated the above CSS ... but I ALSO am including the following javascript in my header:

(Note, I know I haven't customized the fonts in the code below. But regardless, it still seems to help in forcing Chrome to repaint the fonts on the page ... just make sure your fonts are properly referenced elsewhere)

With the CSS mentioned above used in conjunction with the below code included in my ... at worst, all fonts on my page will show up after a second or so of delay.

Hope this helps people. Cheers.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">

 $(function() { $('body').hide().show(); });
</script>


<script type="text/javascript">

//JavaScript goes here


WebFontConfig = {
  google: { families: ['FontOne', 'FontTwo'] },
    fontinactive: function (fontFamily, fontDescription) {
   //Something went wrong! Let's load our local fonts.
    WebFontConfig = {
      custom: { families: ['FontOne', 'FontTwo'],
      urls: ['font-one.css', 'font-two.css']
    }
  };
  loadFonts();
  }
};

function loadFonts() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
    '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
}

(function () {
  //Once document is ready, load the fonts.
  loadFonts();
  })();

</script>

Here's where I found the above: https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso

0人赞添加讨论(0) 举报

男人必须洒脱

5楼-- · 2020-01-23 07:29

I just faced the same issue. I it was due to HTTP/S protocol mismatch as described here.

Use https version of URL.

0人赞添加讨论(0) 举报

家丑人穷心不美

6楼-- · 2020-01-23 07:30

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

0人赞添加讨论(0) 举报

一夜七次

7楼-- · 2020-01-23 07:33

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>

0人赞添加讨论(0) 举报

1 2 3 下一页

Google Fonts are not rendering on Google Chrome

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间