Category: WordPress

WordPress uses Google Fonts to provide Libre Franklin a versatile sans serif font in the Twenty Seventeen theme.

However, There are practical reasons not to rely on third party font hosting. Local development while disconnected from the internet, privacy concerns, unreliable access to Google services, or perhaps you just want to minimize your reliance on a third-party resources whenever possible.

In this post I’ll show you how to remove Google Fonts from the Twenty Seventeen theme and replace it with a locally hosted version. Libre Franklin is licensed under the SIL Open Font License and self hosting is permitted.

To begin I suggest installing Privacy Badger or another browser plugin that will allow you to easily see what third party services are connected to your website.

Precautions

This sort of development can easily break your website. Do not attempt to do this in a live production environment. I strongly suggest using Desktop Server or a local testing environment.

Lets Get Started

You may want to disable Avatar Display in Settings > Discussion to remove Gravitar support so it doesn’t appear in Privacy Badger as a possible tracker.

Create a Child Theme

It’s good practice to Create a Child Theme whenever making customizations to an existing theme. If you haven’t done this before read up on the process before proceeding.

Our child theme will require only two files. style.css and functions.php everything else will be inherited from Twenty Seventeen.

Now create an empty functions.php file. We’ll be doing all our work in that file.

<?php
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );
function twentyseventeen_child_enqueue_styles() {
        wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'twentyseventeen-child-style', get_stylesheet_directory_uri() . '/style.css' );
}
/* Remove Google Fonts from being imported from Google:
 * This will remove Franklin Libre and any other Google fonts
 * imported from the partent theme.
 * https://codex.wordpress.org/Function_Reference/wp_dequeue_style
 * */

add_action( 'wp_print_styles', 'remove_google_fonts', 1);
function remove_google_fonts() {
   wp_dequeue_style( 'twentyseventeen-fonts' );
}
/* A child theme's functions.php runs before the parent.
 * To remove a filter you have to run it later during init
 * */
function remove_google_fonts_preconnect() {
    remove_filter('wp_resource_hints', 'twentyseventeen_resource_hints');
}
add_filter('init', 'remove_google_fonts_preconnect');


/* Disable prefetch of Google Fonts API and s.w.org
 * https://wordpress.org/support/topic/remove-the-new-dns-prefetch-code/
 * https://developer.wordpress.org/reference/functions/wp_resource_hints/
 * Remove broken call to Google API
 * Remove call to WordPress.org for Emoji support
 * Remove it one step after the fonts '2'
 * */
remove_action( 'wp_head', 'wp_resource_hints', 2 );

/* Remove Parent Theme's editor style that imports the Google Fonts API
 * */
add_action( 'admin_init', 'my_remove_parent_styles' );
function my_remove_parent_styles() {
        remove_editor_styles();
?>

1. un-click Avatar Display in Settings > Discussion
2. Create a child theme
   1. In functions.php do the following
   2. dequeue google fonts or any other tracking scripts.
      1. https://codex.wordpress.org/Function_Reference/remove_action
   3. Remove Google Fonts Preconnect filter as it’s no longer needed
   4. use init so it runs after the parent theme scripts load
   5. Remove prefetch of google fonts and WordPress.org
   6. Remove post editor styles that also pull in google fonts
      1. https://core.trac.wordpress.org/ticket/36778?cversion=0#trac-change-9-1488153907292022

Notes

Not all fonts permit self hosting in their license agreement, please refer to your license agreement before substituting your favorite typeface.