Вы используете Google Web Fonts , поэтому я предлагаю использовать WebFont Loader , который позволит вам, например, применять различные CSS в зависимости от того, загружается ли шрифтили загружен.
Вот минимальный пример, основанный на коде из моей второй ссылки:
http://jsbin.com/izadif/ (обновление спама, чтобы увидеть его)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Cantarell' ] }
};
(function() {
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);
})();
</script>
<style type="text/css">
.wf-loading h1 {
font-family: serif;
font-size: 16px;
color: red;
letter-spacing: 20px;
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px;
letter-spacing: 2px;
}
</style>
</head>
<body>
<h1>This is using Cantarell</h1>
</body>
</html>