If you have been facing issue with web fonts not displaying properly, here are a couple of ways to get rid of them.
This bug was introduced in Chrome v33 and supposed to be fixed in next update as the bug if already reported in Chrome bug thread.
It’s needed for Chrome to repaint the browser once page is loaded to display the web fonts or external fonts. Which could be done by simply opening the Chrome Developer Tools but that can’t be done for your site visitors.
For now you can switch to browser native font by using the custom css as follows:
body, h1, h2, h3, h4, h5, h6 {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Or you can also try using a simple JavaScript hack to force Google Chrome repaint which would display the web fonts properly:
jQuery.fn.redraw = function() {
return this.hide(0, function(){jQuery(this).show()});
};
jQuery(document).ready(function() {
jQuery('body').redraw();
});
We are eagerly waiting for Google Chrome to fix this issue, till then you try using the methods above.
Update
Here’s a neat CSS solution that you could just paste anywhere and it would fix the issue.
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; }
}
10 Responses
For a moment I thought it was my server problem. If the fix above doesn’t work, try this piece of code.
$(‘body’)
.delay(500)
.queue(
function(next){
$(this).css(‘padding-right’, ‘1px’);
}
);
The latter works for me.
Did you try… does it work ?
Yes it does, try the last CSS fix, that would do the job.
here is bit confusion could you please send me the css and js separately that would be appreciated.
sarfaraz.a.hanfi@gmail.com
None of the methods are working for me. My blog is http://www.dailyhealthguide.org
Thank you so much for this fix! I was able to copy and paste and fix up a site in a jiffy!
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; }
}
Hi,
I’m using This font in my website. ( ‘source_sans_proregular’ )
Its blurry in google chrome browser and all images also.
Please let me know how can i fix it..
Thanks.
Hi,
My problem is little different. I am having issues with classic fonts not displaying on google chrome on android devices. The list is Phoenician, classic syriaic etc.
Brilliant!!!!!
It actually works!