In this blog post, I’ll show you how to easily include Google fonts locally in your GeneratePress theme. It is a good option both for avoiding GDPR issues for those, like me, who need to take care of this (not so funny) EU Privacy Regulation, and for performance.

Before starting with this tutorial I strongly suggest to create a GeneratePress child theme. It’s easy and not time consuming.

Now, let’s start!

Create your assets folder

First step it’s really easy as you just need to create an “/assets” folder inside your child theme.

This is the place where all the Google fonts you need for your project will be stored.

Download your Google fonts

Now it’s time to get the Google fonts you need. To make it super-fast you can use this awesome web application: Google Webfonts Helper. I will never stop telling people how much I love it and how many time I used it. It is simply fantastic!

Once inside the website, just search for the Google font family you need. There’s an input field over there on the top-left corner of the page. Type the name of the font family and click on it when the filter will display it or just scroll the list in the page and choose one you like.

Now select charsets and styles. For best performance try to load only those you really need for your project. Inside the CSS section choose Modern Support (woff2), Legacy Support (woff2 and ttf) or Historic Support (woff2, woff, ttf, svg, eot).

Modern or Legacy Support are good choices according to Can I Use.

Targeting modern browsers means downloading only “.woff2” file formats. As we saw before, according to the website Can I Use that kind of files will work perfectly with almost 97% of all browsers out there (only Opera Mini is essentially excluded).

You have now a zipped folder in your computer. Extract it and copy all those files inside your “/assets” folder. It would be great to organize this last one. I like to create a sub-folder inside it and call it “/fonts“.

Load your local fonts with your stylesheet

Now that you have your fonts inside your theme, it’s time to load them with CSS.

Inside Google Webfonts Helper there is a section called “Copy CSS” with an helper input called “Customize folder prefix“.

Delete everything inside that input and just write: “assets/fonts/“. It magically writes out for you all the CSS that you need to load your fonts in your theme.

Something like this:

/* inter-100 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  src: url('assets/fonts/inter-v12-latin-100.woff2') format('woff2'),
       url('assets/fonts/inter-v12-latin-100.woff') format('woff');
}

/* inter-200 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('assets/fonts/inter-v12-latin-200.woff2') format('woff2'),
       url('assets/fonts/inter-v12-latin-200.woff') format('woff');
}

Add your font families inside the GeneratePress Customizer

Now it’s time to add a font family inside the GeneratePress customizer.

To do it you can follow these simple steps. First from your WordPress Dashboard go to Appearance > Customize and when the customizer will be open click on Typography.

In the section Font Manager click Add Font then search your font within the input field. Click on it and toggle off Use Google Fonts API. Then click on close.

Now it’s time to use it in your project. Click on Add Typography then in Target Element choose, for example, Body and inside the Font Family dropdown menu choose the one you loaded before inside Font Manager.

Customize the font size, line height, and font weight to match your preferences. Finally click Publish to save all of your changes.

You can follow this same process for adding font families to other elements of your website, such as headings or navigation menus.

Enqueue your fonts in Gutenberg

Your Google Fonts are locally loaded and your frontend works great. Great!

Now the final step is to load your fonts also inside your Gutenberg editor. Above all if you want a great development experience with it and want all your blocks to appear the same both on the editor and on the frontend.

Go inside your functions.php file and add this code snippet. It will use the generate_editor_styles hook, a filter, to enqueue your style.css (or another stylesheet file of your choice) to the Gutenberg editor.

/**
 * Add local fonts to editor
 */
function mb_add_local_fonts_to_editor( $editor_styles ) {
  $editor_styles[] = 'style.css';

  return $editor_styles;
}

add_filter( 'generate_editor_styles', 'mb_add_local_fonts_to_editor' );

Now everything will look good and work like a charm.

As you have seen loading local fonts to GeneratePress is not that hard. I really hope this tutorial will help you and save you some time.

Code Long and Prosper!