[Resolved] Local Fonts and Gutenberg

[Sebastian]

Hi there,

I want to get rid of Google Fonts and host them locally. My Website is working fine (frontend and backend) with Google Fonts. To host the fonts locally, I followed your tutorial here:

https://docs.generatepress.com/article/adding-local-fonts/

Everything works fine, as long as I stay in the frontend. The website loads the correct fonts (the local versions). But: The backend (Gutenberg editor) does not load the self hosted fonts. Before using the self hosted ones, Gutenberg loads the Google Font versions and I had the frontend fonts in the backend. After switching to self hosted, I can see the fonts only on frontend – not at the backend.

Is this a bug or a feature? Is there a way to get the self hosted version of a Google Font to work in the Gutenberg editor?

Thanks and best regards
Sebastian

[Tom]

Hey Sebastian,

Ah, good point! Gutenberg won’t load the CSS you added in this step by default.

Did you add the CSS using a child theme, or did you add it in the Customizer?

Let me know 🙂

[Sebastian]

Hi Tom,

I am using a child theme and tried both ways. Add the CSS to the child themes style.css and added it to the Customizers CSS section. Both ways are not working.

Best regards
Sebastian

[Tom]

So in your child theme, add a CSS file named editor-style.css and include the @font-face CSS inside of it.

Then, add this to your child theme functions.php file:

add_action( 'after_setup_theme', function() {
    add_theme_support( 'editor-styles' );
    add_editor_style( trailingslashit( get_stylesheet_directory_uri() ) . 'editor-style.css' );
} );

Let me know if that helps or not 🙂

[Sebastian]

Hi Tom,

the code you provided was not working for me, but I found a solution:

// Add backend styles for Gutenberg.
add_action( 'enqueue_block_editor_assets', function () {
	// Load the theme styles within Gutenberg.
	wp_enqueue_style( 'custom-css', get_theme_file_uri( '/editor-style.css' ), false );
} );

Thanks and best regards
Sebastian

[Tom]

Awesome – thanks for sharing! 🙂

[Michele]

This Is awesome Sebastian! I am facing exatly the same problem, After a performance optimization I made for my website.

I’ll give a try soon and maybe Tom could insert this Little trick into the GP documentation ☺️

[Sascha]

Hey there,

I have created a new folder /fonts on my wp-root-directory, uploaded my local google-fonts into this directory and added the CSS from https://google-webfonts-helper.herokuapp.com/ to the Customizer > Additional CSS.

In Customizer, I have also disabled the Google Font in dyn. Typo settings. The frontend will display the content using the local fonts, but after I have tried to add both your snippets via “Code Snippet” plugin, the Gutenberg Editor is still not loading them.

Any other idea about how to solve this?

Thank you in advance and kind regards,
Sascha

[David]

Hi there,

you can you try this to load the Customizer > Additional CSSS in the editor:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $css = wp_get_custom_css_post()->post_content;
    $editor_settings['styles'][] = array( 'css' => $css );

    return $editor_settings;
} );

[Ramona]

Thank you, Sebastian, your solution works fine for my website.

I’m so happy, that there is every time a helpful feedback and working solution here in the support for generate press.
Whether by users or developers.

Kind regards
Ramona

[Author]

Posts