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

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

Home Forums Support Strange behavior when in block editor for adobe fonts

  • This topic has 20 replies, 4 voices, and was last updated 2 years ago by Markus.
Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #2158068
    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?

    #2158140
    Ying
    Staff
    Customer Support

    Hi Markus,

    Have you tested on an actual mobile device?

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

    #2158219
    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?

    #2158276
    Ying
    Staff
    Customer Support

    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 ๐Ÿ™‚

    #2158280
    Markus

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

    #2158305
    Ying
    Staff
    Customer Support

    That’ll be nice. you can use the private info field ๐Ÿ™‚

    Thanks!

    #2158371
    Markus

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

    #2158381
    Markus

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

    #2158623
    Tom
    Lead Developer
    Lead Developer

    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;
    } );
    #2158731
    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?

    #2159650
    Tom
    Lead Developer
    Lead Developer

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

    Thanks!

    #2161683
    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.

    #2162818
    Tom
    Lead Developer
    Lead Developer

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

    Thanks!

    #2162966
    Markus

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

    #2164159
    Tom
    Lead Developer
    Lead Developer

    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?

Viewing 15 posts - 1 through 15 (of 21 total)
  • You must be logged in to reply to this topic.