How to use Google Fonts locally with the Twenty Fifteen WordPress theme

So this website was pretty much free of trackers with one notable exception, the fonts provided by the Twenty Fifteen theme. By its use of the Google Fonts API, most visitors were still leaking data back to the great chocolate factory. However, as the fonts are open source we’re free to use them outside of Google’s realm.

In order to download the fonts locally I’m using a shell script hosted on github, google-font-download from neverpanic (thank you sir!).

I would recommend getting the following font formats: woff2, woff and ttf (for legacy devices). By entering the commands below you’ll download the fonts used by the Twenty Fifteen theme (check the script requirements if you have issues).

git clone https://github.com/neverpanic/google-font-download.git
cd google-font-download

./google-font-download -f woff2,woff,ttf \
"Noto Sans:400" "Noto Sans:700" "Noto Sans:400italic" \
"Noto Sans:700italic" "Noto Serif:400" "Noto Serif:700" \
"Noto Serif:400italic" "Noto Serif:700italic" \
"Inconsolata:400" "Inconsolata:700"

The script will additionally generate a font.css file containing the necessary @font-face rules for our (now) locally hosted fonts.

For the record, the next part is the quick and dirty edition. Instead of editing the Twenty Fifteen theme directly you should make a child theme and override the functions.

Sure, I’ve never bothered to do that myself, but those in the know say it’s important ;-) Just be aware that a theme update will flush all your changes.

Lets upload our new font collection to the Twenty Fifteen theme’s css folder located at wp-content/themes/twentyfifteen/css/.
Next we’ll make a small change to the theme’s functions.php located at wp-content/themes/twentyfifteen/functions.php.

Locate the function named twentyfifteen_fonts_url() and perform a simple search and replace on the following snippets:

# Original code:
return $fonts_url;

# Modified code:
return get_template_directory_uri() . '/css/font.css';

We also need to trim the wp_enqueue_style() function:

# Original code:
wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null ); 

# Modified code:
wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url() );

Save the changes and refresh your website to confirm that fonts are no longer loaded from external domains by examining the HTML source.

As an added bonus your website will load a few milliseconds faster. And of course, no more tracking which is really the main point of doing this exercise.

Related