[Resolved] Local Fonts and Gutenberg

Home Forums Support [Resolved] Local Fonts and Gutenberg

Home Forums Support Local Fonts and Gutenberg

Viewing 7 posts - 1 through 7 (of 7 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 โ˜บ๏ธ

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