cachingfontsprogressive-web-appspreact

PWA Best Practice: Web or Local Fonts?


I am building a preact PWA (Progressive Web Application), and I do not know if I should keep fonts external to reduce my application size, or keep the fonts local to improve offline viewing? What is the best practice?


Solution

  • Update, Feb. 2021: Browsers are generally moving in the direction of partitioning the HTTP cache, meaning that CDN-like URLs, such as Google Fonts, are less likely to result in cache hits due to an unrelated web app having previously requesting the same URL. This eliminates a common argument in favor of using fonts from a CDN. A project like fontsource can automate shipping a local copy of open source fonts, and while that's a bit more work, it's probably what I'd go with if you care the most about performance.

    I don't think that using web fonts hosted by a third-party or a first-party makes a difference based on what you're asking. It's possible to use the Cache Storage API inside of a service worker to cache either first- or third-party requests in general, including web font request, and make use of those cached resources while offline.

    There are some general best practices for loading web fonts, and this article by Zach Leatherman is my go-to reference. Those techniques aren't specific to building an offline-capable PWA, though.