If not self-hosting fonts for better control over the cache, Google fonts are weighty if full families are chosen or if too many (over 3) individual fonts are chosen. When the link is given you for the fonts, navigate to it. There you’ll see your stylesheet Google serves in order to serve the fonts you want. Download it, compress it using this site :
Now, navigate to:
& choose Tools from the menu.
About 1/3 down the page you’ll see
CSP Hash. Paste the code (no style tags, only CSS) into the rectangle and get your sha256 hash of Google’s stylesheet. Now, in the head of your document, type
** goes here</style>
And in your site’s response headers, your
Content-Security-Policy should include style-src `sha256-tw5BgRErBMFGcsFZrw7GIlbGA25wh5d6cWc8wmI4KG4='
Please note the
" surrounding the hash in your document head & the
' in your site’s HTTP response headers.
It’s this link you want:
When you download the
CSS they serve you, edit
font-display:fallback while including system fonts for Apple’s devices, Windows, & Linux. A decent Sans-Serif stack is
'-apple-system',ui-sans-serif,system-ui,Roboto,"Open Sans",Oxygen,Ubuntu,Cantarell,Helvetica,sans-serif; & for code:
'-apple-system',ui-monospace,system-ui,SFMono-Regular,"Roboto Mono","Ubuntu Mono","Oxygen Mono",Menlo,Monaco,Consolas,"Liberation Mono",Courier,monospace;.
This way, if Google doesn’t serve their fonts to you quickly enough, your site will “fallback” to using system fonts. This has the added benefit of fitting in aesthetically with the OS in question.