html - Google Fonts are not rendering on Google Chrome

Question

Welcome To Ask or Share your Answers For Others

html - Google Fonts are not rendering on Google Chrome

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - 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:

After I reapply any of the CSS properties, get into responsive view or hover an element:

Anyone have similar issues? How should I proceed with this?

Thanks!

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-16T22:23:05+0000

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

Categories

html - Google Fonts are not rendering on Google Chrome

html - Google Fonts are not rendering on Google Chrome

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags