- This topic has 20 replies, 4 voices, and was last updated 2 years ago by Markus.
-
AuthorPosts
-
March 17, 2022 at 8:12 am #2158068Markus
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?
March 17, 2022 at 9:06 am #2158140YingStaffCustomer SupportHi Markus,
Have you tested on an actual mobile device?
Can you link us to the page where we can see the issue?
March 17, 2022 at 10:04 am #2158219MarkusHi 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?
March 17, 2022 at 10:38 am #2158276YingStaffCustomer SupportHum.. 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 ๐
March 17, 2022 at 10:42 am #2158280MarkusThanks, I can provide a URL and a login if you want to take a closer look.
March 17, 2022 at 11:04 am #2158305YingStaffCustomer SupportThat’ll be nice. you can use the private info field ๐
Thanks!
March 17, 2022 at 11:57 am #2158371MarkusGreat, I have left the login credentials in the private field.
March 17, 2022 at 12:02 pm #2158381MarkusI just noticed that the background color are lost as well when I change to tablet or mobile. Something weird is going on…
March 17, 2022 at 7:26 pm #2158623TomLead DeveloperLead DeveloperHi 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; } );
March 17, 2022 at 11:40 pm #2158731MarkusHi 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?
March 18, 2022 at 7:56 pm #2159650TomLead DeveloperLead DeveloperAny chance you can show me a screenshot of the issue so I can try to reproduce on my end?
Thanks!
March 21, 2022 at 12:54 am #2161683MarkusSeems to happen when you set the background color in the customizer. If I set the background color in GenerateBlocks container it works just fine.
March 21, 2022 at 7:35 pm #2162818TomLead DeveloperLead DeveloperWhat exactly is happening though? Are you able to take a screenshot for me?
Thanks!
March 21, 2022 at 11:37 pm #2162966MarkusHi Tom, I did a screen recording to show the problem: Screen recording
March 22, 2022 at 8:00 pm #2164159TomLead DeveloperLead DeveloperHuh, what is going on there…
What is your body/content background set to? White or grey? Is the desktop or tablet/mobile views correct?
-
AuthorPosts
- You must be logged in to reply to this topic.