[Support request] Adobe fonts displaying in the page editor

[Greg]

Strange one, it’s added all the CSS behind the editor windows, but I can’t see an error in there, screenshots below…

Thanks
Greg

[Greg]

View post on imgur.com

View post on imgur.com

View post on imgur.com

(images don’t seem to have loaded in previous post)

Thanks
Greg

[Tom]

Cool, so it is working.

It’s possible that the CSS simply isn’t specific enough to show up in the editor – they have a lot of editor-related CSS which overwrites normal CSS.

Which parts aren’t working?

[Greg]

Ahh okay, thanks Tom – it’s mostly classes I’ve added for styling certain paragraphs of text, and button colours as it makes life easier than updating multiple instances in the page editor.

Thanks
Greg

[Tom]

Yea, in that case you’d need a specific stylesheet for the editor which overwrites the editor CSS. It’s difficult for me to help with in here as I’m not aware of the specific CSS and what needs overwriting.

[Greg]

Okay I understand, is it just a case of using the inspect tool to find the relevant editor CSS rules then copying across the custom ones to a new stylesheet to overwrite them – would it be best to upload that to the uploads file and then use that URL in the snippet?

Thanks for all the help, it’s appreciated!

[Tom]

Exactly – use developer tools to build your CSS, then add that CSS to a .css file.

Then you can upload it in the Media Library or upload it to your server (in a child theme or a custom folder).

Then you can do this:

add_action( 'enqueue_block_editor_assets', function() {
    wp_enqueue_style( 'my-editor-styles', 'URL TO YOUR .CSS FILE' );
} );

[Author]

Posts