On episode 607 of the Syntax podcast, Wes and Scott interviewed the co-founders of Termageddon, a consulting company that helps websites create and maintain compliant policies. One of the topics that Termageddon has discussed in the past is Google Fonts. Google Fonts – when served from Google’s APIs – have been ruled not GDPR compliant. However, if you serve Google Fonts up locally, they are GDPR compliant. As such, I’ve started to host them on my own web server.
To be honest, I know very little about how Fonts work. That was kind of the magic of using Google Fonts – they just worked without any additional effort. As such, I didn’t really know how to move forward with hosting fonts myself.
Thankfully, Martin Schaible pointed me to Google Webfonts Helper by Mario Ranftl. This website hand-holds you through downloading the desired font files and generates both a ZIP file (of the optimized font selection) and a CSS snippet that you can apply to your own site.
I believe I still have some changes to make (beyond just fonts) to bring my site into full GDPR compliance. But, this is now one less thing to worry about.
CAUTION: I am not entirely sure if serving the fonts through a CDN (Content Delivery Network) keeps me in compliance? In their “Trust Hub”, Cloudflare talks about being GDPR compliant; and, about being a “privacy-first company.” As such, I hope that serving the font files through the Cloudflare CDN doesn’t negate my efforts.
Static assets, that I serve up through the CDN, are hosted on a different domain. My blog is at bennadel.com, and my CDN domain is at bennadel-cdn.com. Using a different domain holds a few advantages; but, when it comes to Fonts, it is a bit problematic. When I initially pushed the change to my production server, I started seeing CORS (Cross-Origin Resource Sharing) errors due to loading font-files from a different host.
To fix this, I went into my Cloudflare Rules, and added a Transform Rule that sets the Access-Control-Allow-Origin HTTP header in the outbound response for font-related requests:
ASIDE: I was already injecting this CORS header for my compiled JavaScript files. As such, I just appended a condition for my font files.
I believe that the * here is the lazy man’s approach to Access-Control-Allow-Origin. But, I didn’t want to take the time to test my root domain.
