Lately i started noticing the website loads very slow at some point.
I've investigated this with firebug and when the page takes very long to load this is showing up:
It seems totally random, but the requests to webfont.woff just waits and waits forever. If i try to reach this resourse manually, it works fine and responses within 100ms. The page i'm talking about is http://wtf.maikelzweerink.nl, and the custom fonts come from the main domain maikelzweerink.nl.
The face-fonts are declared at default.css, also from the main domain:
@font-face {
font-family: 'Proximanova Regular';
src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot');
src: url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.eot?#iefix') format('embedded-opentype'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.woff') format('woff'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.ttf') format('truetype'),
url('//maikelzweerink.nl/general/font/Proximanova-Regular/webfont.svg#ProximaNovaRgRegular') format('svg');
}
Even with the correct HTTP headers
In chrome the same deal (click for larger):
The MIME types are set to text/plain on the fonts, rather than what they should be.
In your .htaccess file (assuming Apache), add:
AddType application/vnd.ms-fontobject eot
AddType application/x-font-ttf ttf ttc
AddType font/opentype otf
AddType application/x-font-woff woff
This will fix things, and make sure the fonts work in all browsers.