Search code examples
cssangularcachingbrowser-cachewebfonts

What is the proper way to cache fonts on an angular app

I'm building an online photoshop-mini-like web app using Angular, for the sake of decreasing the load time, especially the fonts where I thought about fetching them from my backend (Google fonts don't include all the needed fonts).

So, what I really want is to cache each font a user chooses to use, so when he switches back to a loaded font the application won't fetch the backend for an existing one.

What I thought about is using fontFaceObserver a Webfont loading. Simple, small, and efficient. But, I didn't find a way to cache the fonts.

Solution

  • Did you try to use PWA? then you would cache all assets on the client side (service worker). https://angular.io/guide/service-worker-getting-started

    However, you need to have signed SSL certificate