Google Fonts are not rendering on Google Chrome

Solution 1:

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

Solution 2:

If the css fix does not work for you

In case the first rated post is not working, here is a solution:

remove the 'http:' in:

<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'> 

or

@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);

As explained by David Bain, most modern browsers don't actually require that you specify the protocol, they will "deduce" the protocol based on the context from which you called it

Solution 3:

The CSS fix didn't work for me, also the 0.5 sec delay script seems awkward.

This JS snippet seems to work for us:

<script type="text/javascript">
jQuery(function($) {
    if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
        $('body').css('opacity', '1.0') 
    }
})
</script>