[Resolved] Strange behavior when in block editor for adobe fonts

[Markus]

Hi, I’m using the Adobe Font Sofia Pro on my site which I’m adding using wp_enqueue_style like this:

add_action( 'wp_enqueue_scripts', 'custom_styles_and_scripts', 100 );
function custom_styles_and_scripts() {
    wp_enqueue_style( 'fonts', 'https://use.typekit.net/raz5vrv.css', false, NULL, 'all' );
}

I’m also adding to the block editor using this code:

add_action( 'enqueue_block_editor_assets', 'custom_editor_styles_and_scripts');
function custom_editor_styles_and_scripts(){
    wp_enqueue_style( 'fonts', 'https://use.typekit.net/raz5vrv.css' );
}

Choosing the font in the font manager in the customizer which works great. Now to the problem. When in block editor and previewing tablet or phone mode, all the headlines and text looses the font and gets a default serif font. The font show correctly in desktop mode. Very strange, have not happened to me before. Using GeneratePress Premium and GenerateBlocks Pro, the latest versions. Any ideas?

[Ying]

Hi Markus,

Have you tested on an actual mobile device?

Can you link us to the page where we can see the issue?

[Markus]

Hi Ying, its not on the front end, it happens when I’m in the block editor, using GenerateBlocks. If I use for example the container block and switches the preview for desktop, tablet and mobile, all the text looses its fonts. Maybe this is a GenerateBlocks issue… Can you see any errors in how I add the Adobe font?

[Ying]

Hum.. the code you added looks right to me, but I can’t figure out the behavior in responsive mode, I’ll ask Tom to take a look 🙂

[Markus]

Thanks, I can provide a URL and a login if you want to take a closer look.

[Ying]

That’ll be nice. you can use the private info field 🙂

Thanks!

[Markus]

Great, I have left the login credentials in the private field.

[Markus]

I just noticed that the background color are lost as well when I change to tablet or mobile. Something weird is going on…

[Tom]

Hi there,

In WP 5.9 WordPress made it so the enqueue_block_editor_assets hook is only for the editor page – not for the content. Anything added to that hook is not loaded within the tablet/mobile previews.

I’m still not sure how they expect people to enqueue third-party resources like this for the content. From my understanding, add_editor_style (their suggestion) only accepts relative URLs, not ones from third-party resources.

You could try doing something like this:

add_filter( 'block_editor_settings_all', function( $editor_settings ) {
    $editor_settings['styles'][] = array( 'css' => '@import "https://use.typekit.net/raz5vrv.css";' );

    return $editor_settings;
} );

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

[Markus]

Hi Tom, thanks for having a look at it. Your code works great! I noticed that the background color that I set in the customizer also looses its value and turns white from light gray. Is that related to the same problem?

[Tom]

Any chance you can show me a screenshot of the issue so I can try to reproduce on my end?

Thanks!

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

[Markus]

Seems to happen when you set the background color in the customizer. If I set the background color in GenerateBlocks container it works just fine.

[Tom]

What exactly is happening though? Are you able to take a screenshot for me?

Thanks!

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

[Markus]

Hi Tom, I did a screen recording to show the problem: Screen recording

[Tom]

Huh, what is going on there…

What is your body/content background set to? White or grey? Is the desktop or tablet/mobile views correct?

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

[Author]

Posts