[Resolved] Locally added fonts not loading in block editor

Home Forums Support [Resolved] Locally added fonts not loading in block editor

Home Forums Support Locally added fonts not loading in block editor

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #1628454
    Angus

    Hi, I have gone through your process of adding a font locally. It’s working fine in the customizer and front end, but they fall back to a system font when using the block editor. I’ve looked up this issue on the forum here but all the solutions are for a child theme, and I don’t use a child theme. This is the code I have in a snippet

    add_filter( 'generate_typography_default_fonts', function( $fonts ) {
        $fonts[] = 'beyond_infinity-webfont';
        return $fonts;
    } );

    and this is the CSS I have in the Additional CSS section of the customizer

    @font-face {
        font-family: 'beyond_infinity-webfont';
        src: url('URL/wp-content/uploads/2020/09/beyond_infinity-webfont.woff2') format('woff2');
        font-weight: normal;
        font-style: normal;
    }

    Is there a way of having the font work in the block editor? Thanks

    #1628619
    Elvin
    Staff
    Customer Support

    Hi there,

    You’ve probably read Tom’s reply here already:
    https://generatepress.com/forums/topic/how-to-show-custom-fonts-in-block-editor-gutenberg/#post-1459136

    You don’t necessarily have to create a child theme but you must create a .css file with the @font-face{...} to enqueue to the block editor’s assets.

    You can upload your .css file with the @font-face{} on the site through FTP and use this PHP snippet:

    add_action( 'enqueue_block_editor_assets', function() {
        wp_enqueue_style( 'your-handle', 'URL TO YOUR FILE' );
    } );

    Change the your-handle to your preferred handle and change the URL TO YOUR FILE to the path pointing to your uploaded css file with the @font-face{}.

    While you can simply edit block-editor.css found in generatepress\assets\css\admin to add your @font-face{}, we don’t recommend doing this because any changes your make on the default theme files will be wiped if/when the theme updates. This is the reason why child theme is recommended.

    #1629540
    Angus

    Thanks for that Elvin. Worked like a charm! πŸ‘

    #1632024
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it to work. No problem. πŸ˜€

    #1845824
    hichb

    Hi,
    I’m testing out the method you suggested without success.
    There must be something I’m missing in your tutorial.
    This is the path to the CSS file: https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/custom-fonts.css

    And this is the snipped I added:

    
    add_action( 'enqueue_block_editor_assets', function() {
        wp_enqueue_style( 'adding-custom-fonts-to-generateblocks-editor', 'https://wordpress-273320-2007441.cloudwaysapps.com/wp-content/uploads/custom-fonts.css' );
    } );
    

    And this is the page in question: https://wordpress-273320-2007441.cloudwaysapps.com/new-page

    It should load the Didot Font as the live site here: https://thefashionglobe.com/

    Thanks in advance!

    #1845847
    Elvin
    Staff
    Customer Support

    Hi Hich,

    The block is actually attempting to load it but the value is wrong. See this. https://share.getcloudapp.com/BluK27JJ

    The text swap means the fonts actually load on the site. The only issue left is the incorrect value of the css property.

    Can you share the PHP snippet you’ve added for it to appear on the dropdown? Let us know.

    #1846142
    hichb

    Hi Elvin,

    Thanks a lot for taking a look. I’ve already shared the snippet added as well as the CSS path above.
    I’m not sure what I’m doing wrong..

    #1846705
    hichb

    Sorry, I’m really stuck with this…Can someone help me??

    #1846914
    Ying
    Staff
    Customer Support

    It’s answered in your new topic πŸ™‚

    #2207493
    PxProd

    Hello everyone.

    This works at first glance, but when I use the responsive previews (through Generateblocks?) the fonts won’t load.
    I tried to define them via admin_enqueue_scripts too and get the same problem.

    Any ideas?

    #2207517
    David
    Staff
    Customer Support

    Hi there,

    you need to use this filter for the WP previews to get the styles:

    add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    	$css = 'p {
                padding-bottom: 3px;
            }';
    
    	$editor_settings['styles'][] = array( 'css' => $css );
    
    	return $editor_settings;
    } ); 

    NOTE: No need to use the class .editor-styles-wrapper or body or other editor prefixes as they will be added by core automatically.

    Heres an example using that filter to load the Customizer > Additional CSS:

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

    Or if you like you can use the GeneratePress filter that works as above.

    add_filter( 'generate_editor_styles', function( $editor_styles ) {
        $editor_styles[] = 'your-editor-style.css';
    
        return $editor_styles;
    } );
    #2207549
    PxProd

    Hey David,

    thank you very much. Work’s like a charm πŸ™‚

    #2207562
    David
    Staff
    Customer Support

    Glad to hear that!

    #2242629
    bjbowen

    Does this mean that we need to set the fonts in the style.css sheet as well as in the customizer? With fonts set only in the Customizer, but not specified in the style.css sheet, I couldn’t get my headings to show. (Locally hosted fonts.)

    #2242631
    bjbowen

    Or maybe “editor-styles.css” is different from my child theme css. I can’t find the answer to that.

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