Adobe fonts displaying in the page editor

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 :)

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

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

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

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

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

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?

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

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

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

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

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

Hi Greg,

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

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

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