Using @font-face slows load time. Can I force the

Question

Update: Looks like the header request information is the culprit. How would I change the max-age property of the request header? TIA.

---

Hi, I'm using @font-face on a website and i'm experiencing delayed loading of the text (presumably due to the loading of the font every page). I understand the client has to download the font once to display properly, but every page?

Is there a way I can force the browser to cache that file? Or is there another alternative to speed up the font's loading time? (Is this a question more appropriate to post on Server Fault?)

Thanks in advance. Worst case, I'll live with the delay, so I don't need any "take off @font-face" answers... ;)

Additional Information:

• I've tested this in both Safari (4) and Firefox (3.5RC1) on both Mac and Windows (XP and 7)
• All the browsers I've tested on are currently set up to allow caching (it's on by default)
• The URL is not dynamic, it's simply "/fonts/font.otf"
• The font URL is correct, as the page loads the font and displays it correctly, albeit slower then normal

• Request Header :

  Cache-Control:max-age=0
  If-Modified-Since:Wed, 24 Jun 2009 03:46:28 GMT
  If-None-Match:W/"484d9f2-a5ac-46d10ff2ebcc0"
  Referer:http://testurl.com/
  User-Agent:Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6; en-us) AppleWebKit/530.13 (KHTML, like Gecko) Version/4.0 Safari/530.15

• Response headers:

  Connection:Keep-Alive
  Date:Thu, 25 Jun 2009 02:21:31 GMT
  Etag:"484d9f2-a5ac-46d10ff2ebcc0"
  Keep-Alive:timeout=10, max=29
  Server:Apache/2.2.11 (Unix) mod_ssl/2.2.11 OpenSSL/0.9.8i DAV/2 mod_auth_passthrough/2.1 mod_bwlimited/1.4 FrontPage/5.0.2.2635

Answer 1

Are you sure your font files are cachable? Just like other static content, they should have far-future expires dates, and their headers should be configured to allow them to be cached. If you are hosting your fonts on a server farm, you will want to make sure your etag header is normalized across all the servers in the farm...otherwise subsequent requests for the font may force it to be re-downloaded from an alternative server even though the same data was already downloaded from another server.

Answer 2

You can never force a browser to cache something, only encourage it. I can think of no reason why a font file with the correct expires headers wouldn't be cached which brings us to:

• It's a browser bug (you don't say which browser)
• Your cache control headers are missing or wrong
• Your browser is configured to not cache anything (do images cache?)
• Your font URL is dynamic so the browser thinks each request is for a different resource
• The font face file is actually missing or or the URL misspelt.
• The delay is NOT caused by the font download (you did say you presume this is the issue)

I think more information is in order.

EDIT: To set cache control is a server and language specific thing. Look at mod_expires for information on caching in Apache.