Home › Forums › Legacy Support › Support queries › How-to & Troubleshooting › fonts not caching in CDN
- This topic has 4 replies, 2 voices, and was last updated 4 years, 1 month ago by logan.
-
AuthorPosts
-
February 25, 2020 at 10:21 am #243714ateya3dSpectatorHello, i use CDN to speed my website load all fonts used by the theme not cached by CDN i talk to the CDN Support and he say this is from the theme , talk to the theme support what i can do now ?February 26, 2020 at 11:47 am #243811loganMemberHello, what fonts you are using?? how are you using this like uploaded the custom font or using other CDN to render the fonts??February 26, 2020 at 12:41 pm #243832ateya3dSpectatorThis reply has been marked as private.February 27, 2020 at 7:25 am #243915loganMemberHello, you need to follow this tip: https://stackoverflow.com/questions/12229844/amazon-s3-cors-cross-origin-resource-sharing-and-firefox-cross-domain-font-loa/25305915#25305915
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.
also make sure: Your server is returning a valid content-type for the .woff font file.Cache-Control: max-age=604800 Expires: Fri, 27 May 2016 17:27:48 GMT Content-Type: text/plain; charset=UTF-8
February 27, 2020 at 7:26 am #243916loganMemberalso visit on this: https://www.digitalocean.com/community/questions/loading-web-font-through-cdn -
AuthorPosts
- The topic ‘fonts not caching in CDN’ is closed to new replies.