[Resolved] Custom font set up in typography, but it’s not visible in the editor

[scometamus]

As described in the title, I don’t see the local font while editing, only on the published page. Any ideas here what I have set up wrong here maybe?

Best regards and thanks a lot in advance.

[Ying]

Hi there,

What’s the name of the font and can you point us to the section where this font is being used?

Can you make sure you followed this guide to install the local fonts?
https://docs.generatepress.com/article/adding-local-fonts/

Let me know!

[scometamus]

Hi! The fonts used are called IBM Plex Serif + IBM Plex Sans and they are used on the complete site, every pages. We used the method installing the fonts via the method you describe in the doc, except the uploading part, we did this ourselves via ftp.

Everything is displayed fine, except when being in the wordpress/gutenberg editor, then we see Times or some default Browser font.

[Ying]

That’s odd, the editor is using the IBM Plex Serif font, but the font doesn’t seem to be loading in the editor.
https://www.screencast.com/t/Ezrk7YwjSLQs

I will test some more and get back to you.

[scometamus]

Hey Ying, I tried out this code mentioned here, and it worked:

https://generatepress.com/forums/topic/local-font-not-rendering-in-editor/#post-2121652

However, I’m removing it now, so you can do more tests and maybe help me find out what the issue is.

Thanks !

[Ying]

So the issue is that the editor doesn’t load @font-face CSS.

You can give this method a try:

1. Add this to your child theme’s functions.php:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'local_fonts_in_editor', get_stylesheet_directory_uri() . "/block-editor.css", false, '1.0', 'all' );
} );

2. Create a block-editor.css file in your child theme folder, add all the@font-face CSS along with other CSS that you want it to load in the editor.

Let me know if this works.

[scometamus]

Interesting, will do later and report back.

Thanks a lot for the investigation.

Any ideas what causes the issue?

[scometamus]

Update: it worked 🙂 – would be nice to know that feature base-kit of GP though

[Ying]

You are welcome 🙂

The editor is actually controlled by WP, so WP editor doesn’t load the @font-face CSS.

We use the PHP code to make it load the block-editor.css file 🙂

[Author]

Posts