I recently updated my website with new fonts in the CSS, but unfortunately they are not displaying correctly. I have attempted three different fixes to resolve the issue:
SOLUTION 1:
body {
-webkit-animation-duration: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 0.1s;
}
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
SOLUTION 2:
$(‘body’)
.delay(500)
.queue(
function(next){
$(this).css(‘padding-right’, ‘1px’);
});
SOLUTION 3:
jQuery.fn.redraw = function() {
return this.hide(0, function(){jQuery(this).show()});
};
jQuery(document).ready(function() {
jQuery('body').redraw();
});
Despite trying all these fixes, my website remains unchanged. It could be an issue with Chrome, my computer, or possibly an incorrect link to the fonts. Any assistance would be greatly appreciated. Here is a snippet of my code (I omitted the JavaScript as it is irrelevant):
HTML
<main class="content" role="main">
<section class="section two">Lorem ipsum dolor sit amet...</section>
<section class="section three"><h2>Three</h2></section>
<section class="section four"><h2>Four</h2></section>
</main> <a href="#0" class="cd-top">Top</a>
<footer class="fixed_footer">
<div class="content">
<p>Lorem ipsum dolor sit amet...</p>
</div>
</footer>
</body>
CSS
/* Fonts */
@import url(http://fonts.googleapis.com/css?family=Teko:700);
@import url(http://fonts.googleapis.com/css?family=Exo:400,900);
...
...
...
You can view a rough demo on JSFiddle.