Include custom font in editor

Hi Sascha,

The code Tom shared on the same topic here - https://generatepress.com/forums/topic/adding-local-font-to-generateblocks-advanced-typography/#post-1222427 - is required as you'll need a stylesheet that styles content on the backend as well.

But if you really wish to skip the file creation then you can manually type in the styling on a PHP snippet like this:

add_action( 'enqueue_block_editor_assets', function() {
    $css = '.edit-post-visual-editor__post-title-wrapper {
    display: none;
}';
    wp_add_inline_style( 'generate-block-editor-styles', $css );
}, 100 );

Which basically adds the value of $css variable to the stylesheet.

Adjust the value of the $css to the CSS you want to add on the block editor. :D

Hey Elvin,

thanks. I'm still irritated, that GP team does not support the usage of Custom Fonts in an easier way. Sigh … so let's see:

I have added the code you have provided via Code Snippet and activated it.

But the custom-fonts which have been implemented via Media Upload, Customizer CSS & assigned via Typography, are still not rendered in the editor.

I did not undertand what you said with "Adjust the value of the $css to the CSS you want to add on the block editor." and need further help.

Please note nad please bear with me: I'm not a programmer or coder, but use GP & GB extensively, know some CSS and can apply code snippets.

So if you (or David or Tom) can provide a more detailed tutorial, it would be very happy. It's really painfull to search the forum or Google (where only forum posts are presented), and I wish you would extend your docs accordingly.

Thank you in advance and kind regards,
Sascha

Hi there,

if you have your @font-face CSS in the Customizer > Additional CSS then you can use this PHP Snippet:

add_action( 'enqueue_block_editor_assets', function() {
    wp_add_inline_style( 'generate-block-editor-styles', wp_get_custom_css_post()->post_content );
}, 20 );

This will load ALL the Additional CSS in the Editor.

We're working to make this easier in a future GPP update.

Hey guys, none of the snippets are working :(

http://media.macbay.net/_support/GP-local-fonts-issue_27D61394.png

I have added the snippets via "WPCodeBox" plugin, but also tried via "Code Snippets" plugin, without any effect. Caching was flushed & deactivated.

Any chance to help me directly?

Thank you in advance and kind regards,
Sascha

Try this PHP Snippet instead:

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