[Resolved] Locally added fonts not loading in block editor

[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

[Elvin]

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.

[Angus]

Thanks for that Elvin. Worked like a charm! 👍

[Elvin]

Nice one. Glad you got it to work. No problem. 😀

[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!

[Elvin]

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.

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

[hichb]

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

[Ying]

It’s answered in your new topic 🙂

[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?

[David]

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

[PxProd]

Hey David,

thank you very much. Work’s like a charm 🙂

[David]

Glad to hear that!

[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.)

[bjbowen]

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

[Author]

Posts