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

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

• WordPress: Copy the script to your functions.php file, then use get_webfont(string $url) anywhere in your theme, e.g. <link href="<?php get_webfont('https://fonts.googleapis.com/css?family=Roboto'); ?>" rel="stylesheet">
• Any other environment: Copy the script to your server and include it with <?php include '/absolute/path/to/cache_webfonts.php'; ?>, then use get_webfont(string $url) anywhere in your file, e.g. <link href="<?php get_webfont('https://fonts.googleapis.com/css?family=Roboto'); ?>" rel="stylesheet">
• To modify the length of the update cycle, simply change the value on line 4

Pros

• Stylesheets are regularly updated in case there are changes. Google Fonts forces browsers to update their stylesheets once a day, the default value set in this script is once a week
• Font files are going to get cached by the browser for up to one year unless their content changes
• At the end of each update cycle, unused files are deleted

Cons

• Font format can depend on user agent—in my tests, Google Fonts delivered TTF files for a maximum compatibility of 95 percent, but it would have delivered WOFF2 files to a modern browser
• No error handling when file transfer goes wrong

Requirements

• Permission to host the fonts on your server
• PHP 5.1 or higher
• Apache—if you use a different web server, the .htaccess file in the /fonts subfolder won’t restrict script execution, which is a recommended security measure

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