How to host Google Fonts locally in your WordPress theme

If you are in the EU, due to GDPR host Google fonts used in your WordPress website locally. How? It’s “easy”, just follow these steps.

NOTE: Although the title mentions that the manual is primarily for WordPress, it’s in fact a universal solution. It works for Drupal, Laravel as well as any other framework or website.

Download Google’s style sheet and fonts itself

Download CSS with info about embedded fonts from Googleapis.com. Example link:

https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic|Montserrat:400,700&subset=latin,latin-ext

Or its newer version:

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap

Save the file right into your child theme directory so it’s now:

https://www.example.com/wp-content/themes/theme-child/fonts.css

When you open this fonts.css file, there is content which looks like this:

/* latin-ext */
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
...

Save font from “url” in newly created folder “fonts” in your child theme and replace path in fonts.css so it’s:

src: url(wp-content/themes/theme-child/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');

In my case, there were 60+ fonts to download. Therefore, I wrote simple PHP Downloader which I will be glad to open-source if somebody asks.

NOTE:
I host locally only woff2 fonts. The format is widely supported by modern browsers and has the smallest size. It will fit 95% of your visitors… and what about the rest? You cannot have Mercedes experience while driving Peugeot 206 🙂

Deregister Google Fonts added by your theme or plugin

In order to successfully deregister Google fonts off your WordPress website, first of all you need to find its “registration id“. You can manually seek through theme or temporally enable plugin “WP Remove Assets” from Cozmoslabs.com. Plugin adds simple table to the end of the page with list of registered scripts and style sheets.

If your Google Fonts are added using standard WordPress way, not hardcoded in theme, “registration id” will be in this table. In my case it was called “screenr-fonts“.

Now deregister CSS itself by placing following code to the functions.php in child theme or to your custom plugin.

/**
 * Remove external Google Fonts 
 */
 function jasomdotnet_dequeue_my_css() {
 wp_dequeue_style( 'screenr-fonts' );
 wp_deregister_style( 'screenr-fonts' ); 
 }

 add_action( 'wp_enqueue_scripts', 'jasomdotnet_dequeue_my_css', 100 );

You can set also action priority. My winning combination was priority 100 and snipped located in custom plugin. If you will face problem with font deregister, read deeply article from Cozmoslabs for more hints.

If everything went well, when you refresh the page, you should see no Google Fonts in the table added by “WP Remove Assets“. You can disable and remove this plugin, now. It did the job.

Add fonts.css to your child theme

Last step is to register your custom fonts.css in your child theme. Add following code to the end of functions.php:

/**
 * Add local fonts 
 */
 function jasom_add_local_fonts() {
 wp_enqueue_style( 'local-fonts', get_stylesheet_directory_uri() . '/fonts.css', array(), filemtime( dirname( FILE ) . '/fonts.css' ) ); 
 }
 add_action( 'wp_print_styles', 'jasom_add_local_fonts' );

Flush all caches and check the source code for the presence of following line:

<link rel="stylesheet" id="local-fonts-css" href="https://www.example.com/wp-content/themes/theme-child/fonts.css?ver=1607598699" type="text/css" media="all">

If you see something like this (and the line is not causing 404), you just local-hosted Google Fonts for your WordPress theme or plugin. Great job!