CODEWITHSUNDEEP
htmlcsswebfont-loader
eldi
eldi

Reputation: 1259

Does Web Font Loader not cache the fonts?

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.

Upvotes: 16

Views: 7239

Answers (2)

Mitul
Mitul

Reputation: 3427

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.

Upvotes: 2

serraosays
serraosays

Reputation: 7869

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.

Upvotes: 4

Related Questions