Today one of our Developers walked up to me and mentioned that Web fonts are loaded properly, just not on one of the subsites. As usual, this is a “Server Issue” and I’m happy to dive into those things.
One thing I saw pretty quickly is following (open your eyes) and look for the Referrer Header:
The site which is working sends the Headers out:
And on the other hand, the site which is not working (which happens just to be a subsite of the first one)
Weird, isn’t it? After some back and forth I learned about the Referrer Policies Metatag
<meta name=”referrer” content=”no-referrer” />
This instructs the browser to omit the referrer when sending out requests, which is nice from a privacy standpoint, but totally breaks if you use a web-service which checks on the domain which an asset is used on (to prevent hotlinking of web-fonts for example). The Referrer Policy is adopted by quite a few browsers by now.
By setting the Metatag to “origin-when-cross-origin” you can get the functionality back without handing over all information of the site you’re visiting.
<meta name=”referrer” content=”origin-when-cross-origin” />
This also makes the web-fonts happy again and will be served as intended.