Preamble
Lot of WordPress themes have very cute but complex Theme Editors (from now: "Automagic Theme Editors"). This is a nice feature allowing the stupidest of monkeys (→ like me in the morning) to change whatever wonderful frontend area in a snap without imploding their brain handling evil CSS rules.
This works thanks to hammered minified JavaScript and CSS injected in every page of your website unicorn's magic powder.
Here you can see a live example:
Just some random WordPress theme editors. Look at all these automagic options. Especially font options.
Yes. Just think about a font name, press Save, and start having serious business in Comic Sans + Futura + Times New Roman.
Under the hood, these Fancy Theme Editors with font pickers work thanks to third parts services like "Google Font" (https://en.wikipedia.org/wiki/Google_Fonts). This service effectively allows to load dozen of fonts from a single external don't-care CSS file.
To make things even more efficient (or vendor lock-in?) Google Font smartly returns a different response for each User-Agent. For example:
- if you have Mozilla Firefox - Google Fonts sends you very old font formats (yup, even if Mozilla Firefox supports them all)
- you have Google Chrome - Google Fonts sends you faster font formats (!)
- more features in the FAQ: https://developers.google.com/fonts/faq
This makes Google Font even more automagic and difficult to be replaced.
In short, Google Font is damn widespread.
Description of the issue
In short, Google Font is so widespread that, if you have a WordPress website, very probably:
- Google discovers your visitors' info (exact operating system, exact browser version, your languages, your IP address, and more)
- Google is technically allowed to inject whatever CSS rule in your website (NSA? have you listened this opportunity?)
- it's not a 5-minute fix
- if fix that, you probably have overrided some parts of your Automagic Theme Editor
- causing errors like: «Uh? I've changed the fonts from the editor but it does not work! You are fired! Damn Ghanoo plus Leenoocs nerd!»
In short, you should replace Google Font, but it's not that simple.
Proposed solution
Recently I started playing with Apache HTTPd and its features and I've found out that you can create a KISS (keep-it-simple-and-stupid) Google Font proxy in 5 minutes in any Debian GNU/Linux toaster.
What does it mean:
- you can create a drop-in replacement of Google Fonts: just change one URL to got the hell out of Google Fonts from the visitor perspective
- GDPR super-friendly: you have something in the middle doing requests to Google Fonts (never reveal again your visitors' data to Google)
- netiquette friendly: this solution does not flood Google Fonts with requests from a single server (because it caches similar requests)
- I mean. Yes. Google has enough bandwidth but... let's avoid to be banned for stupid reasons.
- super-simple: the configuration is just a copy-pasta configuration
- zero maintenance: Apache HTTPd is smart enough to kill old cache entries
Further reading:
Implementation for Wikimedia Italia
$ mkdir /var/www/wmi/google-font-proxy
$ a2enmod cache
Enabling module cache.
To activate the new configuration, you need to run:
systemctl restart apache2
$ a2enmod substitute
Enabling module substitute.
To activate the new configuration, you need to run:
systemctl restart apache2
$ # create an amazing homepage with link to this task
$ nano /var/www/wmi/google-font-proxy/index.html
$ # paste my config from https://gitpull.it/T776
$ nano /etc/apache2/include/google-font-proxy.conf
$ # create a couple of dummy virtualhosts including that config
nano /etc/apache2/sites-available/it-wikimedia-test-{txt,ssl}.conf
$ a2ensite it-wikimedia-test-txt.conf
Site it-wikimedia-test-txt already enabled
$ certbot certonly --webroot --webroot-path=/var/www/html -d test.wikimedia.it
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator webroot, Installer None
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for test.wikimedia.it
Using the webroot path /var/www/html for all unmatched domains.
Waiting for verification...
Cleaning up challenges
IMPORTANT NOTES:
- Congratulations! Your certificate and chain have been saved at:
/etc/letsencrypt/live/test.wikimedia.it/fullchain.pem
Your key file has been saved at:
/etc/letsencrypt/live/test.wikimedia.it/privkey.pem
Your cert will expire on 2021-08-09. To obtain a new or tweaked
version of this certificate in the future, simply run certbot
again. To non-interactively renew *all* of your certificates, run
"certbot renew"
- If you like Certbot, please consider supporting our work by:
Donating to ISRG / Let's Encrypt: https://letsencrypt.org/donate
Donating to EFF: https://eff.org/donate-le
$ a2ensite it-wikimedia-test-ssl.conf
Enabling site it-wikimedia-test-ssl.
To activate the new configuration, you need to run:
systemctl reload apache2
$ # enable Apache's cache cleaner builtin in Debian
$ systemctl status apache-htcacheclean
$ apachectl gracefulExample usage:
- https://fonts.googleapis.com/css?family=Open+Sans%3Aregular%2C700|Khand%3A500&subset=latin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext
- https://fonts.wikimedia.it/css?family=Open+Sans%3Aregular%2C700|Khand%3A500&subset=latin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext%2Clatin-ext
Roadmap:
- deploy a test instance in https://test.wikimedia.it/
- deploy a production instance in https://fonts.wikimedia.it/