Users of one of the fresh imports are complaining the FA icons occasionally do not display. One potential solution that comes to mind is leveraging browser caching of FA. First, is it a good idea? Second, I've done it with images, but exactly how would one go about it for FA (assuming a positive response to the first)? Thanks! :)
One quick thing you can try is to use a CDN to deliver the fonts (and font css), the CDN should set the correct Etag or Cache Control headers so the browser knows when to refresh or not.
To test that, open sources/Load.php
// Load font Awesome fonts
loadCSSFile('font-awesome.min.css');
// Load font Awesome fonts
//loadCSSFile('font-awesome.min.css');
loadCSSFile('https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css');
If you want to serve the fonts from your server, then you need to add the cache directives to your server files. For nginx it would be something like:
location ~* \.(?:ttf|ttc|otf|eot|woff|woff2)$ {
expires 1M;
access_log off;
add_header Pragma public;
add_header Cache-Control "public";
}For Apache it would be done using its mod_expires module (I think, been so long since I used Apache I can hardly remember it :P ) and then propbably you have to add those extension types and then set a time limit for the types. Something like
ExpiresByType application/x-font-woff "access plus 1 month"
thats just a guess, I'd do a web search for what the correct commands are or you will end up with a nice 500 white page.
I thought we can already choose FA source in admin cp or do we still to hack the code?
I also use cache directives and mod_expires for apache. Some of the code already shared in Minifying JS topic, few weeks back.
Perfect. That's precisely how the image caching has been done for my sites. Good to know it will work for FA as well. Thanks! That should alleviate member "concerns". :)
Unless they are having other problems with FA (from time to time my own browser go nuts and doesn't show FA properly).
True. And there are certain assumptions made here.
It's actually happened to me as well. The icons don't show, or maybe one or two are missing. Refresh the page and....voila! It seems more likely to occur with slow connection speeds from a marginal mobile signal level.
So the monkey is swinging to the conclusion mobile browsers may goof due to nonloading FA. And that caching could alleviate the issue. But the wrong cage has been chosen before. What are your thoughts emanuele?
Thanks for all the help guys!
Unfortunately I have no ideas on the subject... I know that from time to time it gives an odd result, but I don't know what could be the reason...
In my "example" .. be sure to also include woff, woff2 & ttf ... I think there are a couple of other .ext ones in the webfonts directory so be sure to add them all to the expires. Different browsers/OS use different formats so you have to cache them all.
The topic was opened by
@CrimeS to be exact for you to find the shared code.
And if you use defer or async as suggested by google pagespeed, disable it. That may be one of the reason why.
When i do some seo check, i get suggested to fix Leverage browser caching. Will CDN fix the leverage browser caching issue?