Proudly made on earth

How to host webfonts on your server with a few simple lines of PHP

The uppercase letter P in a bright orange colour is painted on a white wall next to an ornate white door.

Unsplash: Alex Read

The web is going crazy. Cookies, they scream, watch out! Cookies here, cookies there, cookies everywhere. A word that once evoked memories of chocolate chips, cold milk and careless crumbs in the corners of our mouths has been turned into a battlecry. And maybe that’s not even as bad as I’m making it sound.

The web we have is broken. It is ruled by a handful of companies running most of the servers, holding vast amounts of personal data, and finally analysing all that data to serve us laughably bad ads. The General Data Protection Regulation was designed to give some control back to users in the EU, and I’m watching in amazement as even the biggest platforms in faraway California are throwing up their hands in despair, suddenly realising that there’s a limit to their power.

This is the bright side of the GDPR. On the dark side, there are frantic freelancers, frightened bloggers and all-around confused individuals, because nobody knows exactly what the legal interpretation of this new regulation will look like. Instead of trusting most experts who claim that very little is going to change for this demographic, people are shutting down their websites and, ironically, turning to platforms like Facebook or Google—the sort of companies with large enough legal departments and sufficient lobbying power to easily get through these times of uncertainty.

Instead of giving more power to the people, the GDPR might very well strengthen the existing tech oligopoly. It shouldn’t be this way, and it doesn’t have to. Tools like WordPress now come with built-in features and a large collection of plugins to make your website privacy friendly.

One aspect that hasn’t received enough attention so far is webfonts. Google Fonts are embedded on 40 percent of the top one million websites, and even though Google doesn’t use tracking cookies in this context, the visitor’s IP address and the request header are enough to tell Google what specific site somebody is browsing.

It is completely unnecessary to send your visitors to Google if you can simply host webfonts on your own server, and thanks to open source licences, you have every right to do so. I wrote a little script that will make things easier. Consider it my microscopic contribution towards decentralising the web.

What this script does

Once a week (or as frequently as you wish), a CSS file containing the @font-face rule is fetched from an external server, for example Google Fonts, and stored on your local server. The individual font files referenced in that stylesheet are then copied to your server as well and all urls in the stylesheet are replaced.

If you have settled on a specific font that you want to use across all of your template, you probably don’t need this script. Instead, you could use a tool like the great Google Webfonts Helper, which will give you a neat ZIP file of your fonts that you can upload to your server once and then forget about.

This script could be for you if your selection of fonts changes from time to time, say in a development context, and you don’t want to deal with manually copying new files and deleting unused ones. It will also update your existing selection of fonts on a regular basis in case there are changes to the individual glyphs.

How to use it




Feel free to ask for help in the comments or to make suggestions on how this code could be improved.

Florian Lehmuth
24 May 2018

Keine Kommentare

What’s your take?