Thanks Andrew you pointed me in the right direction. It’s a Chrome bug. Chrome isn’t loading the fonts. The solution that finally worked for me was found here
posted by rafikibubu –
I’m now using a combination of the above solutions in the following arrangement….
So first, I have that CSS fix pasted at the top of my styles.css:
/* ——————————————–
chrome font fix
————————————————-*/
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; }
}
Then, I have the following script combination in my header (again, I know it needs refinement):
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
<script type=”text/javascript” charset=”utf-8″>
$(function() { $(‘body’).hide().show(); });
</script>
<script type=”text/javascript”>
//JavaScript goes here
WebFontConfig = {
google: { families: [‘FontOne’, ‘FontTwo’] },
fontinactive: function (fontFamily, fontDescription) {
//Something went wrong! Let’s load our local fonts.
WebFontConfig = {
custom: { families: [‘FontOne’, ‘FontTwo’],
urls: [‘font-one.css’, ‘font-two.css’]
}
};
loadFonts();
}
};
function loadFonts() {
var wf = document.createElement(‘script’);
wf.src = (‘https:’ == document.location.protocol ? ‘https’ : ‘http’) +
‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js’;
wf.type = ‘text/javascript’;
wf.async = ‘true’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(wf, s);
}
(function () {
//Once document is ready, load the fonts.
loadFonts();
})();
</script>
I hope this helps some of you too.
