Archived topic
Local fonts issue in editor tablet or mobile view
7 replies · Started by Mauro on March 6, 2023
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.
Hi there,
try using the block_editor_settings_all hook 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-face CSS 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.
The enqueue_block_editor_assets hook is an older core hook, but it doesn't work in the core Preview mode.
For the more recent method you can piggyback on the GP Filter Hook to load the style.css from your child theme:
add_filter( 'generate_editor_styles', function( $editor_styles ) {
$editor_styles[] = 'style.css';
return $editor_styles;
} );This will add the additional editor-wrapper selector to your CSS.
Or if you just want to load a stylesheet for fonts you can use add_editor_style function, 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_assets method :)
Glad to be of help
