Google Fonts are not rendering on Google Chrome

css, google-chrome, google-webfonts, html

Solution

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

Problem

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!

Original source

Related problems