[Resolved] Local Fonts and Gutenberg

Home Forums Support [Resolved] Local Fonts and Gutenberg

Home Forums Support Local Fonts and Gutenberg

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #838146
    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

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #838250
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #838356
    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

    #838941
    Tom
    Lead Developer
    Lead Developer

    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 ๐Ÿ™‚

    #839414
    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

    #840005
    Tom
    Lead Developer
    Lead Developer

    Awesome – thanks for sharing! ๐Ÿ™‚

    #895944
    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 โ˜บ๏ธ

    #2123801
    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

    #2123956
    David
    Staff
    Customer Support

    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;
    } );
    #2352004
    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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.