[Resolved] remote fonts not showing in editor

[Ben]

I have fonts hosted at typgraphy.com that are linked to our domain.

The fonts aren’t showing in backend editor but are showing in front end.

I’m using an element to have the css linked in header, via wp_head

<link rel=”stylesheet” type=”text/css” href=”https://cloud.typography.com/774752/6209832/css/fonts.css&#8221; />

Then font is setup in typography customizer area. All works.

However, fonts are not showing in editor.

I’ve tried:

add_action( 'after_setup_theme', function() {
    add_editor_style( 'https://cloud.typography.com/774752/6209832/css/fonts.css' );
} );

But that doesn’t seem to work

Any ideas?
Ben

[David]

Hi there,

the block_editor_settings_all filter is the best hook to use to get styles in the editor, as that will also handle responsive views.

To add an external stylesheet try this:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $editor_settings['styles'][] = array( 'css' => '@import "https://cloud.typography.com/774752/6209832/css/fonts.css";' );

    return $editor_settings;
} );

[Ben]

Perfect, that works, many thanks

[David]

Glad to hear that!

[Author]

Posts