Set fonts in Gutenberg editor to the theme's fonts

Hi there,

if the fonts are a) in the Customizer > Typography and b) they are Google loaded fonts then you should see them in the block editor.

If there locally loaded fonts then it requires a little snippet of code.

Let me know.

Hello David

Sorry, I should have explained it better.

It is a locally loaded customer font as recommended in
https://generatepress.com/forums/topic/local-custom-font-does-not-show-up-in-font-manager/

Andy

How did you add the @font-face CSS? Was it in a Child Theme stylesheet to the Customizer ?

- The CSS was added in Appearance > Customize > Additional CSS
- No Child theme was added

CSS:
/* Add custom font */
@font-face {
font-family: NeueSansPro;
src: url(/wp-content/uploads/2022/04/NeueSansPro-Normal.woff2);
}

Add this PHP Snippet to your site:

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

That will load your Customizer > Additional CSS in the editor.

Thanks - Works perfectly. Exactly what I was looking for!

Andy

Awesome - glad to hear that