Adobe fonts displaying in the page editor

[Greg]

Do you know why some Adobe fonts added to GP will display in the Gutenberg page editor (like they do on the front end) whilst others don’t and reverts to a fallback font?

I have two sites with the same setup where one shows the custom fonts in the backend editor, but the other doesn’t.

Would be great if I can figure out why, as it looks much nicer for letting the client edit with the typography matching to the front end.

Thanks for any help
Greg

[Tom]

Hi Greg,

Fonts will only display in the editor if you’ve added them using @font-face.

If they’re displaying anyways, it means your computer has that font installed.

Let me know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Greg]

Thanks for the reply Tom.

That’s odd as I’ve set both up with Adobe fonts, and I have both fonts installed locally, maybe just a naming quirk of certain Adobe fonts then that it matches some locally but not others?

Thanks
Greg

[Tom]

It could be the naming thing for sure. If the name of the font matches the one on your computer, it should display.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Greg]

Ahh that must be it then, Adobe has slight variations in font names for locally installed versions vs webfonts – is there anyway of setting a different font for the editor in Simple CSS? Would be great to just setup a standard sans serif fallback?

Thanks
Greg

[Tom]

You can add your CSS from Simple CSS into the editor like this:

add_action( 'enqueue_block_editor_assets', function() {
    $options = get_option( 'simple_css' );

    if ( isset( $options['css'] ) ) {
        wp_add_inline_style( 'generate-block-editor-styles', $options['css'] );
    }
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Greg]

Missed this reply, thanks Tom.

However, I just tried it out and I’m still seeing all the standard fonts in the editor, any ideas?

Thanks
Greg

[Tom]

Hi there,

So your @font-face stuff is in Simple CSS, but your fonts in the editor haven’t updated?

If you right-click + Inspect the text in the editor, can you see the font-family attributed to it?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Greg]

Hi Tom

Adobe fonts rather than @font-face, so I’ve added them to GP using this method – https://www.youtube.com/watch?v=ZSbhJ-twIDk – then just adjustments through Simple CSS (changed to rem’s, letter spacing, line height, etc.)

When I check the inspect CSS I can see it’s tried to load the font, but assume it’s not loading the Adobe Font CSS (as that’s setup as an element hooked to wp_head), is there anyway to run that same element in the WordPress backend?

Thanks
Greg

[Tom]

Ah, Elements won’t load in the editor.

You could try this:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'my-fonts', 'YOUR TYPEKIT URL' );
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Greg]

Sorry for the slow reply, I must have missed the email.

That’s worked perfectly, thanks for all your help Tom!

[Greg]

One extra question on this, is it also possible to load the Simple CSS in the page editor? I’ve tried adding the previous code supplied, but it doesn’t seem to make a difference.

Thanks for your time
Greg

[Tom]

Hi Greg,

That’s what this CSS should do: https://generatepress.com/forums/topic/adobe-fonts-displaying-in-the-page-editor/#post-1237970

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Greg]

Hi Tom

That’s what I thought, and tried to add back in but using the inspect tool I can see it’s not adding in the custom CSS, any other ideas on what might be causing that?

Thanks
Greg

[Tom]

We can debug it. If you add the following, does it add anything at the top of the editor when you refresh?:

add_action( 'enqueue_block_editor_assets', function() {
    $options = get_option( 'simple_css' );

    var_dump($options);

    if ( isset( $options['css'] ) ) {
        wp_add_inline_style( 'generate-block-editor-styles', $options['css'] );
    }
} );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts