Google Fonts Not Rendering in Chrome? A Quick CSS Fix

Google Webfonts Render Issues on Google Chrome

You're not alone! Many have experienced issues with Google Fonts not rendering on Google Chrome. This seemingly recent problem arises even when the necessary CSS is included. Frustratingly, the custom font fails to appear initially, despite having a fallback font like Georgia.

Chrome Update Bug?

It appears this is indeed a known Chrome bug, frustrating web developers across the globe. Rather than a permanent setback, a CSS-only workaround has emerged to provide a quick fix.

CSS Workaround

To rectify the issue, simply add the following code snippets to your stylesheet:

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

This workaround essentially prompts Chrome to repaint the text, resolving the rendering problem.

Conclusion

While the underlying cause may still be a mystery, this CSS-only solution offers a simple yet effective way to overcome the Google Fonts rendering issue on Google Chrome. Incorporate these snippets into yourstylesheet, and you'll find your custom fonts gracing the screen once again!

The above is the detailed content of Google Fonts Not Rendering in Chrome? A Quick CSS Fix. For more information, please follow other related articles on the PHP Chinese website!