Using @font-face slows load time. Can I force the client to cache the font?

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 di…

Accepted Answer

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.

Using @font-face slows load time. Can I force the client to cache the font?

Solution

Problem