@font-face is causing slow load times

Question

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):

Jurgen

Do the fonts load eventually, or do they never load? – Kial

Requests to the .woff file never ends, but the font does load on the screen. If it's from the cache or an other file format, i have no clue. – Jurgen

Strange. Have you tried putting the font files onto a different server (e.g. an Amazon S3 account) to see if you get the same results? – Kial

Answer 1

I used base64 enconding to embed the font inside the CSS to reduce the amount of requests. The base64 has the downside of costing more initial bandwith but hey, it works! This fixed it.

Ofcourse i'm not really happy with a CSS file that is 180KB in size :/

Edit: It turned out to be the ISP that was the problem. When I mannualy loaded the font it retrieved it from cache (dammit chrome!). Somehow these fonts where not directly available on the ISP service and requests/reads from the harddisk would take a while.

Jurgen

Maybe CSS is being cached, while the font files are not – Bunns

I have a similar problem. When loading my font over wifi, JS scripts would sometimes hang for 30s (the CSS file the @font-face declaration was in would download but, I'm guessing, the fonts wouldn't be parsed until the 30s timeout) and then make a request to the server (locally). If I pushed the same files to a remote server and loaded the page through data, the problem would disappear. This is an issue for me on iOS (9.2.1) Safari. Base64 encoding seemed to help but even if I remove the @font-face file - it still hangs - though much more infrequently. – Mattos

Answer 2

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.

Roarke

Added these Content Type headers to my .haccess file and the headers are visible with the request, but it doesn't seem to solve my problem? Even after a full cache clear. – Jurgen

Ah, that sucks. Well, this will have solved problems you don't have, so that's a good thing! – Roarke

Just an update: The mime type for woff is now application/font-woff. Read: w3.org/TR/WOFF/#appendix-b – Armorial

Answer 3

You need to preload or prefetch your font like that

<link rel="preload" as="font" href="/fonts/Pacifico-Regular.ttf" type="font/ttf" crossorigin="anonymous">

more information How to load web fonts to avoid performance issues and speed up page loading

Dicentra

Answer 4

It's not just the fonts...

If I reload the page over and over in Chrome I see images getting stuck too

You can see the images being slow in this waterfall here - http://www.webpagetest.org/result/120904_JN_85ef2c2901df72a0b0ec4b3181eeec77/1/details/

Guam

Isn't this because the loading of images in HTML is synchronous and first starts loading the css because it's in the HEAD tag? After it fails to load the font-face it loads the images, but this causes a lot of block time because the images are waiting on the font request to be finished. – Jurgen

If you look at request 18, you'll see in take 2.3 seconds waiting for the server to start sending back the image. Start of rendering will wait for CSS but fonts (in this case) are being loaded after page has started rendering – Guam