IE downloading Google Fonts 240 sec on the webpage? - html

Question

Still kind of new to fixing website related problems. I found out that after clearing cache in IE 11 and loading my site the Google Fonts is downloading 240 seconds before my webpage is finally loaded. I included image:
Could someone tell me what am I doing wrong please?
Thank you!

Answer 1

IE11 has some issues with Google Fonts, especially fonts over SSL. You can try these solutions:
Web Font Loader: Use the Web Font Loader javascript instead of the default method of adding fonts (CSS way). It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.
Sample usage:
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Droid Sans', 'Droid Serif']
}
});
</script>
If this solution works, you can implement a spesific case just for IE11.
Append style tag: A weird one but it seems to work in some cases.
With the help of jQuery:
$('head').append('<style></style>')
Debug and validate HTML: Third but maybe the most important solution is to check your HTML markup. Parsing errors can cause anything that you can miss. https://validator.w3.org/nu/?doc=https://nutikell.com/ W3 Validator gives 5 errors and a fatal error that you should really fix. As the validator says about fatal error, any browser "Cannot recover after last error. Any further errors will be ignored." That can be IE's problem.
From validation results:
3. [Error]: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
From line 162, column 5; to line 162, column 11
...
5. [Error]: End tag "a" violates nesting rules.
From line 463, column 3; to line 463, column 89
<a href="https://nutikell.com/nutikellad/nutikell-westyx-king/" class="main-thumbnail">
6. [Fatal Error]: Cannot recover after last error. Any further errors will be ignored.
From line 463, column 3; to line 463, column 89
Browser Plugins: IE plugins like script blockers or ad blockers may also delay loading the font files and cause timeout of the request. Check if you have one.
Max http connections: Each browser has a maximum http connections limit in a single time. Your site, for example, has 21 CSS files which is extremely high. You can see it from Firefox's devtools (F12 > Network Monitor > CSS). Maybe IE11 can't fetch all the CSS files at the same time. You may use a task runner to join/minify your CSS files.
Test in other machines: Check out Browserstack to test in an other machine. If you prefer local dev, Microsoft offers free downloads of virtual machines to test IE with.
EOT and WOFF fonts not loading over HTTPS in IE: An old post can give an idea: We had the same issue with EOT and WOFF fonts in all versions of Internet Explorer (7-11) not loading over HTTPS. After hours of trial and error and comparing our headers with other working sites we found it was the vary header that was messing things up. Unsetting that header for those file types fixed our issue right away.
If your server is Apache this code below would go in the .htaccess file:
<FilesMatch "\.(woff)$">
Header unset Vary
</FilesMatch>
<FilesMatch "\.(eot)$">
Header unset Vary
</FilesMatch>
There are plenty of solutions for this case in that post. You can also check them.