Why Aren\'t My Google Fonts Showing in Google Chrome, and How Can I Fix It?

Google Fonts Not Displaying in Google Chrome: A Known Issue with a Workaround

If you're working on a WordPress theme and encountering an issue where Google Webfonts are not rendering properly in Google Chrome, you're not alone. This issue has been reported and acknowledged as a known Chrome bug.

When you first load a website in Chrome using a custom font from Google Webfonts (in this case, Roboto Slab), the text may not appear at all despite having a fallback font specified. However, if you hover over the styled link or adjust any CSS property in the Inspector, the text becomes visible.

To resolve this issue, a CSS-only workaround has been discovered:

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

By adding this code to your website's stylesheet, you essentially force Chrome to repaint the text, effectively solving the rendering issue.

The above is the detailed content of Why Aren\'t My Google Fonts Showing in Google Chrome, and How Can I Fix It?. For more information, please follow other related articles on the PHP Chinese website!