styleselect no longer displaying webfont from editor style

[smerriman]

Webfonts enqueued as an editor style no longer render in the styleselect dropdown. They definitely used to; perhaps a change in 4.8.

Steps to replicate:

• add in the styleselect dropdown and a simple style:

add_filter('mce_buttons_2','my_mce_buttons_2');
function my_mce_buttons_2( $buttons ){
    array_splice( $buttons, 0, 0, 'styleselect' );
    return $buttons;
}
add_filter('tiny_mce_before_init', 'my_mce_mod');
function my_mce_mod( $init ) {
    $style_formats = array (
        array( 'title' => 'Test', 'block' => 'p', 'classes'=>'test'),
    );
    $init['style_formats'] = json_encode( $style_formats );
    $init['style_formats_merge'] = false;

    return $init;
}

• enqueue an editor style which uses font-face, and apply the styling to the test class.

The font appears fine in the editor, but has a big ugly default in the styleselect dropdown.

I'm hoping there is a solution to this that doesn't include having to repeat the whole font definition in wp-admin itself.

[azaozz]

I think the problem is that the font css is loaded only in the editor iframe, and the styleselect drop-down is outside in the main window. Try to load the webfont in the main window too.

Alternatively can turn off font-family preview in the drop-down, see ​https://www.tinymce.com/docs/configure/editor-appearance/#preview_styles.

[azaozz]

No response in quite a while. Considering this needed loading of the font in the main window.