16

Just wanted to test the ability of the Web Font Loader and surprisingly I have discovered that when I need to load the same font in another page then the loader performs new download instead of using a cached version of the font. Is this normal? If so, is there a simple way to check if the font is available for the browser, in other words whether it is cached?

Here's is how I load the font:

 <script>
    WebFont.load({
        custom: {
            families: ['Univers45custom', 'Univers45customIE']
        }
    });
</script>

I am using Web Font Loader v1.5.10.

Addendum by BramVanroy: this 'lack of caching' is also present when using Google's webfonts. FOUT (a Flash of Unstyled Text) briefly occurs on a website that uses the font loader even after reloading the page multiple times.

Edit by eldi: Hi BramVanroy -> Right now I am not really sure how I went around this issue, but probably I just used the @font-face. The reason why I tested the Web Font Loader was the FOUT in the first place. The Loader adds css class to html element which provide you a way to style your page without the right font, when the fonts are loaded then the class is gone and your "standard" styling is present. That was working as expected but with the 'lack of caching' exception, which in my situation was not acceptable. I believe that staypuftman workaround with modifying HTTP header would do the job, I do not have time to test it, especially I would need to do some research to find the way to set it in asp.net hosting provider as setting it from application will add additional processing time.

eldi
  • 1,239
  • 11
  • 19

2 Answers2

4

Web Font Loader doesn't have a caching provision but your browser is caching the font if - and only if - you are actually using it in your site somewhere. Check to make sure the font is invoked on the page in question somewhere.

You can make sure things are cached by forcing the HTTP cache control header (good run down of this at Google Developers). I usually set this through Apache, like so (there are many other ways to do this though):

#Set cache-control HTTP header for public with max time
Header set Cache-Control "max-age=290304000, public"

If all of that fails, the best way I can think of taking matters into your own hands would be to set a cookie, check for it and load fonts accordingly. In your situation, the code would look something like this:

// 1- Check for cookie, if it's not present we enter this conditional
if (!font_is_cached) {
  $(window).load(function() {

    // 2- Load your webfont, this would put the font in cache
    WebFont.load({
      custom: {
          families: ['Univers45custom', 'Univers45customIE']
      }
    });

    // 3- Set cookie indicating fonts are cached
    // This leverages Filament Group's cookie.js as a dependency
    // https://github.com/filamentgroup/cookie/blob/master/cookie.js
    // Sets a one-day session cookie
    cookie( "font_is_cached", "true", 1 );
  });
}

Additional Resources

  • Filament Group has a great font-loading rundown. They don't use web font loader but you could follow what they are doing.
  • CSS-tricks outlines something similar to what I have in mind but they are explicitly setting the cookie on the back-end before doing the front-end check/set function I laid out.
serraosays
  • 7,163
  • 3
  • 35
  • 60
  • Maybe it's better to wrap that Cache-control in an if-module, specific for fonts? Something like this maybe? ` Header set Cache-Control "max-age=31536000, public" `. Not that you set the caching to around ten years. I thought the max allowed was one year. – Bram Vanroy Oct 25 '15 at 09:17
  • Yeah, that's a good point if that's the desired implementation. I was just trying to show basics with this answer, since there are bunch of potential approaches. – serraosays Oct 26 '15 at 02:47
2

WebFont Loader will cache the font into the web browser for the 1 year here is the detail how can you load webfont end detail home much time it will be in browser cache.

http://peterwilson.cc/caching-google-webfont-loader/

Web Font Loader

Web Font Loader gives you added control when using linked fonts via @font-face. It provides a common interface to loading fonts regardless of the source, then adds a standard set of events you may use to control the loading experience. The Web Font Loader is able to load fonts from Google Fonts, Typekit, Fonts.com, and Fontdeck, as well as self-hosted web fonts. It is co-developed by Google and Typekit.

Anant Dabhi
  • 10,864
  • 3
  • 31
  • 49
Mitul
  • 3,431
  • 2
  • 22
  • 35
  • 5
    due all respect but provided link is about caching WebFont Loader.js when using it asynchronously from CDN not actually fonts – eldi Oct 28 '15 at 07:53
  • You can also set the caching to CDN http://www.foxycart.com/blog/caching-and-cdn `The solution was clear: Add a CDN and some Cache-Control headers. BOOM! Problem solved. In our first month, our CDN did something like 50GB worth of traffic, serving entirely tiny CSS and JS files. Big, big win for our servers' load, our hosting costs, and our users (a la faster pageloads).` – Mitul Oct 28 '15 at 08:05
  • 1
    sure like staypuftman's suggested modifying HTTP headers sound good and it would do the same job for the js files. Nevertheless this question was about caching the fonts not the WebFontLoader script. So for me your answer is off-topic:-) – eldi Oct 28 '15 at 08:58
  • Yes but you can add same thing with fonts ad you have said You are using CDN thats why i have added link which work with js you do same with fonts – Mitul Oct 28 '15 at 09:01
  • 2
    I accidentally assigned the bounty to you, even though I think staypufftman deserves the bounty :( As @eldi says, this is not the answer that we asked for, in other words we're talking about the fonts, not the font script. – Bram Vanroy Oct 28 '15 at 16:05
  • Hi have give the ans about the font issue i have just give an example with JavaScript he can use the same logic with fonts – Mitul Oct 28 '15 at 16:44