Chrome bug affecting web fonts
Chrome 33 has been released on 20 February 2014, which includes a fix for the disappearing web font bug. We highly recommend upgrading to Chrome 33 (or higher) as soon as possible.
If you are still seeing issues with fonts loading in Chrome, you may be affected by a different bug in Chrome 33.
We’ve been getting reports from Typekit customers about web fonts disappearing and being replaced with fallback fonts. We believe this to be caused by this bug in Chrome, which can affect any web font (not just those served from Typekit).
The bug is most apparent in Chrome 32 and affects all platforms. It causes fonts to randomly fall back to the last-resort font, which is normally used when Chrome can’t find any of the fonts in the CSS font-family stack. The last-resort font is platform specific; on OS X a serif font is used, while other platforms might use a sans-serif font.
The Chrome team is aware of the problem and has already fixed the bug. The bug fix will be in Chrome 33, which is planned for release in late February. Please let us know at support@typekit.com if you have any questions.
Update, 08 April: Chrome 34 was released on 08 April 2014 and includes a fix for the disappearing web font bugs in Chrome 33. If you continue to see issues with Typekit fonts after upgrading to v34, email support@typekit.com and we will look into it.
25 Responses
Comments are closed.
If you’re still experiencing the issue in Chrome Canary (which has the bug fix), please let the Chrome team know in the bug report (https://code.google.com/p/chromium/issues/detail?id=236298).
Having same problem in Android 4.3 webview, as well as Dolphin Browser and Opera.
Same issue even with Google Web Fonts!
Yes, it affects all web fonts, not just those served by Typekit.
Is there some kind of way to work around the bug, so that those with the affected browsers won’t experience it?
Unfortunately, no. The only workaround is to upgrade to the latest version, which, thanks to Chrome’s autoupdating, should be fairly quick.
Why do web fonts look awful in jquery etc carousels on chrome in windows, they’re fine in standard divs etc. They generally look great even on other browsers on pc now. It seems chrome just can’t get the anti aliasing right no matter how hard you try to hack it. Wish they’d sort it. My type kit Brandon grotesque looks brilliant on everything apart from windows chrome!
Chrome on Windows uses GDI to render its text while most other browsers are using the more modern DirectWrite. Chrome will soon switch to DirectWrite and render the same as other browsers.
Still have this problem. I tested the site on Mac and Windows and only had the problem while using Google chrome on Mac. When exporting the site, typekit fonts dissapear totally, and when refreshing the page on a browser the fonts will show up, and showing correctly. The only soIution I managed to find was to go with web-safe fonts. Now, no problems.
I’m having the same problem. The web fonts do no display at the first page load.
my chrome is already updated to v33. but I think the problem started after that.
Same here, problems started after v33 update.
See http://www.guido.be
Version 33.0.1750.117 for the Mac — i have a google font and an icon font, both served from my site’s FONTS folder. It’s been working fine for the last 6 months, then this week I’ve see the problem discussed here — only in Chrome for Mac — no fonts displayed in my menus and my headings, no social icons displayed on initial page load. If i click or hover on any of the menu links the font displays just fine.
Please google, patch this bug in Chrome!
+1 I have the same issue! fonts are disappearing.. and even no fallback fonts are shown..
Check this solution – http://stackoverflow.com/a/22055697/2117550 it worked for me!
Add this code snippet to your website to patch the problem.
$(document).ready(function() {
if (navigator.userAgent.toLowerCase().indexOf(‘chrome’) > -1) {
var current_css = $(‘body’).css(‘font-family’);
$(‘body’).css(‘font-family’, current_css);
setInterval(function() {
var current_css = $(‘body’).css(‘font-family’);
$(‘body’).css(‘font-family’, current_css);
}, 5000);
}
});
How this should help? Could you explain please?
This didn’t work for me.
Still sometimes no font (not even fallback), and sometimes 100% correct.
When selecting the tekst, sometimes the font becomes visible again 🙂
Did you try my suggestion to load the css on loading the css later? Like so:
jQuery(window).ready(function(){
jQuery(‘head’).append(”);
});
no… this is a new bug on v33
Yes, version 33 actually made the bug worse for me. Before it only appeared when switching tabs (the font was changed to default) but in 33 pages actually loads with typefaces not visible.
The workaround for me that I’ve found is either by loading the css with the font face declaration after the pages loaded via jQuery or resizing an element wrapping the fonts. Hope this helps someone.
Getting a temporary fix for your own Chrome browser is one thing, hoping your web design client doesn’t use Chrome by default is another!
I’m not sure what you mean by fixing my own client? The snippet provided by gjsmith and my solution aims to fix this for any visitor.
Yes indeed, I read another article with a local fix and got confused with my response! I tried to delete it but could not 😉
As other have stated here, v33 did not fix the issue, but made it much worse. We have found a work around for our sites, but I now have to edit 23 sites, add extra JS to the dom and and then loads into our repos and deploy… Thanks Google for disappointing me for the first time in years.
I find it absolutely shocking that Google haven’t notices that almost all sites featuring @font face stopped working before releasing 33.