Google Fonts are not rendering on Google Chrome

2020-01-23 07:06发布

站内问答 / HTML/CSS
2055 17 4

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!

17条回答
该账号已被封号
2楼-- · 2020-01-23 07:35

I was trying to work with Meg's answer,but like many others it didn't work for me either.

For using Google Font,found this trick[Adding Screenshots for steps].

1) Just take the url from the css or standard link as highlighted.

2) Open the link in another tab, copy whole css code(i.e. font-face) in your css file and run.

Not sure about performance as many http calls are getting added, or just try copying one font-face.

Image for step 1 enter image description here

Image for step 2 enter image description here

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2020-01-23 07:37

If people are still having this problem before you try all the great solutions on here try using an !important tag in your css to see if that will fix it, as it did for me and I am not sure if the bug is the same as the old Chrome bug.

.faultyText {"Roboto Slab", Georgia, serif !important}
查看更多
0人赞 添加讨论(0) 举报
三岁会撩人
4楼-- · 2020-01-23 07:38

See similar problem in question Strange Issue while Google Font Rendering.

Solution is in loading the desired font (I my case 'Fira Sans') from the Mozilla CDN instead of Google CDN.

查看更多
0人赞 添加讨论(0) 举报
老娘就宠你
5楼-- · 2020-01-23 07:38

It is not a actual solution but it works better for me than everything else in this thread. I changed the font. I had Fira Sans and now just changed to Roboto which works out of the box.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
6楼-- · 2020-01-23 07:40

I'm just sharing what worked for me. Your results may vary.

I had main.css with an @import of multiple fonts, separated by a | (pipe) character. This had been working up until today. I kept all of my Google Font imports in the main CSS file because I didn't have that many. Today I added one that simply wouldn't render, either in Chrome or Firefox. I tried a different font - same problem.

Finally, I made a separate @import in another CSS file that gets loaded for several pages on the site (let's call it navbar_pages.css, for example) - this CSS gets included in the relevant pages via <link rel="stylesheet" type="text/css" href="/css/navbar_pages.css">, just like main.css does.

For some reason, having the @import in a separate CSS file solved the problem.

I suspect it is due to a limit on the number of fonts that can be called in a single @import call. More testing should be done to pin down the cause, but for now there is my workaround. If anyone has insights, please chime in with a comment.

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
7楼-- · 2020-01-23 07:41

Tried the css fix alone above with no success. Finally resolved by creating a style sheet (chrome.css) containing:

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; }
}

And loading it with jquery at the bottom of the page:

<script type="text/javascript">
   $(document).ready(function () {
      $('head').append('<link href="/chrome.css" rel="stylesheet" />');
   });
</script>
查看更多
0人赞 添加讨论(0) 举报
上一页 1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)