This is apparently an old issue that was fixed but it seems to have resurfaced. Or it is just me.
I'm pulling in 4 different fonts (via Google Fonts) on my homepage and all of 'em are rendering correctly except for the FjallaOne.
@import url(https://fonts.googleapis.com/css?family=Fjalla+One|Raleway|Lobster|EB+Garamond);
FjallaOne is mostly not rendered, until a refresh, but sometimes it does. Try it here.
Because sometimes it is rendered correctly it means that Chrome is able to download the font all right. If you click on the home (logo) the font rendering would flop. Refresh, and it will be back again.
Tried the following repaint but it did not help:
/* Chrome bugfix to render external fonts correctly */
body {
-webkit-animation-delay: 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;
}
}
I am at a loss of ideas now and most of the fixes suggested on old questions [ here, here ] & blogs [ here, here and here ] do not seem to work.
Has anyone else faced this issue (and solved it)?
