Use Google Fonts Locally With GeneratePress

If you want to use Google Fonts locally (e.g. because of GDPR) in combination with GeneratePress, you can follow this tutorial.

Load font files and generate required CSS

First step is to get the desired font files and the corresponding CSS code to include the local fonts. You can get both at a website called google webfonts helper. Select the font from the left side, choose “Modern Browsers” support and set the fonts directory to ./fonts/.

After that, download the font files and copy the generated CSS code to a temporary file.

Apply local font in GeneratePress

Next, you have to add your downloaded font to the GeneratePress Customizer. I recommend a child theme for all your modifications. In your child themes functions.php, add these code snippet:

add_filter( 'generate_typography_default_fonts', function( $fonts ) {
    $fonts[] = 'Open Sans';

    return $fonts;
} );

You have to modify Open Sans and replace it by your desired font family.

Add required CSS to your theme

After that, open your child themes style.css and add the generated CSS code.

To speed up the site loading performance, add font-display: swap; to @font-face, for example:

@font-face {
    font-family: 'Fira Mono';
    font-style: normal;
    font-weight: 400;
    src: local('Fira Mono Regular'), local('FiraMono-Regular'),
    url('../fonts/fira-mono-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('../fonts/fira-mono-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
    font-display: swap;
}

Add CSS to Gutenberg

Create a file named editor-styles.css in your child theme. Add the generated CSS for the fonts to the newly created file. After that, add editor-styles.css to Gutenberg by adding this snippet to your themes functions.php:

add_action( 'enqueue_block_editor_assets', function () {
	wp_enqueue_style( 'custom-css', get_theme_file_uri( '/editor-style.css' ), false );
} );

(Re-)select fonts in GeneratePress

After all these steps, you have to (re-)select your fonts in GeneratePress. You have to select the font from the “System Fonts” section. If you select the font from the “Google Fonts” section, you do not include the locally hosted version!

Leave a Comment