I created this child theme purely for educational and experimental purposes.
This simple child theme that does nothing. It’s an empty stylesheet, and has a functions.php file that imports the parent and a placeholder screenshot.png.
Feel free to download it, add your custom code. The Twenty Seventeen theme remains stock and will receive updates and pass those along to the child theme. twentyseventeen-empty-child.zip
For today’s presentation please download the theme boiler-plate if you’d like to follow along on your computer. This theme requires the Twenty Seventeen theme to function.
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.
An example of my Twenty Seventeen Child theme style.css
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();
?>
un-click Avatar Display in Settings > Discussion
Create a child theme
In functions.php do the following
dequeue google fonts or any other tracking scripts.