Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

font-face

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

like image 924
mclaughj Avatar asked Jun 24 '09 03:06

mclaughj


People also ask

Should I cache fonts?

Proper caching is a must # You should not store fonts using localStorage or IndexedDB; each of those has its own set of performance issues. The browser's HTTP cache provides the best and most robust mechanism to deliver font resources to the browser.

Should you preload fonts?

In summary, without font preloading, you might run into a situation where a browser is ready to load your site's text, but it can't because the font isn't available yet. That is, it needs to download the font before it can paint the text.

Are web fonts cached?

Fonts are easy to use/install. It's easy to change the typefaces during the design process or to make a global change. Because they are third party files, they easily be cached by users.


2 Answers

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.

like image 78
SpliFF Avatar answered Sep 27 '22 22:09

SpliFF


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.

like image 34
jrista Avatar answered Sep 28 '22 00:09

jrista