[Support request] Include custom font in editor

Home Forums Support [Support request] Include custom font in editor

Home Forums Support Include custom font in editor

  • This topic has 5 replies, 3 voices, and was last updated 2 years ago by David.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2053899
    Sascha

    I have uploaded custom fonts and included them via @font-face declaration in Customizer > CSS.

    Just realized that this way the fonts are not being rendered in the Gutenberg Editor.

    I know that I can include them via Child-Theme, but would prefer to use a Code Snippet for including them in a way that will render the custom fonts in the editor, too.

    I have checked this suggestion already: https://generatepress.com/forums/topic/adding-local-font-to-generateblocks-advanced-typography
    but prefer a Code Snippet based solution instead of adding more files or creating Child Theme.

    Any chance to help me with this?

    Thank you in advance and kind regards,
    Sascha

    #2054090
    Elvin
    Staff
    Customer Support

    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. 😀

    #2055233
    Sascha

    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

    #2055409
    David
    Staff
    Customer Support

    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.

    #2145144
    Sascha

    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

    #2145221
    David
    Staff
    Customer Support

    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;
    } );
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.