Why does Firefox re-request fonts when the page is resized?

Question

I have a fairly simple Bootstrap3 site with a few custom fonts embedded in the CSS with @font-face rules. It works great. The pages are being generated by Django so when I'm testing it I can also see the local requests the browser makes.

When I resize the browser window, I see hundreds of font requests:

127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_700.woff HTTP/1.1" 200 -
127.0.0.1 - - [04/Dec/2014 13:42:59] "GET /static/fonts/Source_Sans_Pro_400italic.woff HTTP/1.1" 

All for the same custom fonts. Over and over and over again until I stop resizing.

I realise that most people don't resize their browser that often but why is Firefox doing this? Can I stop it?

Chrome does not exhibit this behaviour.

Here's how the file looks with curl. It seems to have the right Content-Type and there's no weird super-uncaching things in there.

HTTP/1.0 200 OK
Last-Modified: Sun, 30 Nov 2014 22:53:43 GMT
Content-Length: 65452
Content-Type: application/x-font-woff
Server: Werkzeug/0.9.4 Python/2.7.4
Date: Thu, 04 Dec 2014 14:13:57 GMT

Answer 1

I ran into this same font reloading issue in Firefox on every browser window resize. Turns out it had to do with specifying local() fonts which weren't installed locally, before specifying url() fonts.

If I use the following css:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url("../fonts/Roboto-Regular.woff2") format('woff2'), url("../fonts/Roboto-Regular.ttf") format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

the behaviour shows up in Firefox if I haven't got Roboto-Regular installed locally, if I then install Roboto-Regular locally, the problem goes away. Since I'm not expecting everyone to have Roboto-Regular installed locally, I removed the local() font references from the @font-face's src tag.

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/Roboto-Regular.woff2") format('woff2'), url("../fonts/Roboto-Regular.ttf") format('truetype');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

That fixes it for me. No more unwanted font reloading on every browser window resize.

Answer 2

Taking a stab at this, but with FF comes a ton of customization (esp if you're running addons).

1. Are you running any page CSS overrides via a plugin/addon via the local browser
2. Is there a version update available for your FF install?
3. Does the issue appear on in SBX/testing or does it also appear "in the wild" on another computer? When browser testing, I prefer to test on multiple machines (and device types) to isolate local configuration issues.
4. Have you run through any litmus/page render tests?