- This topic has 7 replies, 2 voices, and was last updated 3 years, 3 months ago by
.
-
Posts
-
Hello there,
I’ve included a local font to avoid GDPR issues with the Google ones available in the theme.
Everything works well in the front-end and, after having enqueued it in the editor, as suggested by Tom himself, with editor-style.css, also in the back-end it works fine, until I toggle the responsive block buttons of GenerateBlocks (in container, grids, headings…).
In that case, both in tablet or mobile views, the font is missing.
I can tweak it declaring the font per block, but, as you suggested in another similar topic, it’s not great for developing, because if I decide to change font later I need to go back and change it in any block I used.
Is it possible to solve it ? I was thinking about using theme.json, but don’t know how it would work with all the theme experience.
Thanks for your time.Customer Support
Hi there,
try using the
block_editor_settings_allhook to load your styles in the editor:
Heres an example:add_filter( 'block_editor_settings_all', function( $editor_settings ) { $css = 'p { padding-bottom: 3px; }'; $editor_settings['styles'][] = array( 'css' => $css ); return $editor_settings; } );This should make sure the responsive views attract the same styles.
Nope, I tried that filter, both with html {font-family: ‘Poppins’;} or loading directly all font faces, but it doesn’t work on tablet and mobile view
Where is your
@font-faceCSS located ?In my child theme. For the frontend inside style.css and for the editor in a editor-style.css enqueued with “enqueue_block_editor_assets” hook, as suggested in this forum
Theres lots of methods of loading the styles in the editor.
Theenqueue_block_editor_assetshook is an older core hook, but it doesn’t work in the corePreviewmode.For the more recent method you can piggyback on the GP Filter Hook to load the
style.cssfrom your child theme:add_filter( 'generate_editor_styles', function( $editor_styles ) { $editor_styles[] = 'style.css'; return $editor_styles; } );This will add the additional
editor-wrapperselector to your CSS.Or if you just want to load a stylesheet for fonts you can use
add_editor_stylefunction, and hook it in after the theme setup:add_action( 'after_setup_theme', function() { add_editor_style( 'https://your_url/style.css' ); } );Oh yeah! Your are absolutely great and professional. It works perfect now. I didn’t know “enqueue_block_editor_assets” does not work in preview. Thanks a lot for your help and have a good day!
Yeah, WP updated the preview system which broke the
enqueue_block_editor_assetsmethod 🙂Glad to be of help
- You must be logged in to reply to this topic.
