Why aren't Google Fonts caching on Firefox?

StackOverflow https://stackoverflow.com/questions/4265074

  •  27-09-2019
  •  | 
  •  

Question

I'm trying to use the embedded Google fonts on my website and I have included the link to download the font from Google fonts API every time someone visits the website, but I am having a problem with Firefox because it seems like its trying to download the font every time a refresh or click a new link.

On all the other browsers it only download once and cache the font through out the site like any other cached things.

The link to Google font API stylesheets is as follows:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans&subset=latin' rel='stylesheet' type='text/css'>
Was it helpful?

Solution

I noticed the same behaviour; loading the fonts with JavaScript seems to solve the problem. Just replace 'Ubuntu' with 'Droid' in your case and insert the following block of code after your <head> tag:

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Ubuntu' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
        '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();
</script>

More info can be found here on Google Developers' Font site.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top