- This topic has 5 replies, 3 voices, and was last updated 2 years ago by David.
-
AuthorPosts
-
December 19, 2021 at 12:39 pm #2053899Sascha
I have uploaded custom fonts and included them via @font-face declaration in Customizer > CSS.
Just realized that this way the fonts are not being rendered in the Gutenberg Editor.
I know that I can include them via Child-Theme, but would prefer to use a Code Snippet for including them in a way that will render the custom fonts in the editor, too.
I have checked this suggestion already: https://generatepress.com/forums/topic/adding-local-font-to-generateblocks-advanced-typography
but prefer a Code Snippet based solution instead of adding more files or creating Child Theme.Any chance to help me with this?
Thank you in advance and kind regards,
SaschaDecember 19, 2021 at 9:25 pm #2054090ElvinStaffCustomer SupportHi Sascha,
The code Tom shared on the same topic here – https://generatepress.com/forums/topic/adding-local-font-to-generateblocks-advanced-typography/#post-1222427 – is required as you’ll need a stylesheet that styles content on the backend as well.
But if you really wish to skip the file creation then you can manually type in the styling on a PHP snippet like this:
add_action( 'enqueue_block_editor_assets', function() { $css = '.edit-post-visual-editor__post-title-wrapper { display: none; }'; wp_add_inline_style( 'generate-block-editor-styles', $css ); }, 100 );
Which basically adds the value of
$css
variable to the stylesheet.Adjust the value of the $css to the CSS you want to add on the block editor. 😀
December 21, 2021 at 12:35 am #2055233SaschaHey Elvin,
thanks. I’m still irritated, that GP team does not support the usage of Custom Fonts in an easier way. Sigh … so let’s see:
I have added the code you have provided via Code Snippet and activated it.
But the custom-fonts which have been implemented via Media Upload, Customizer CSS & assigned via Typography, are still not rendered in the editor.
I did not undertand what you said with “Adjust the value of the $css to the CSS you want to add on the block editor.” and need further help.
Please note nad please bear with me: I’m not a programmer or coder, but use GP & GB extensively, know some CSS and can apply code snippets.
So if you (or David or Tom) can provide a more detailed tutorial, it would be very happy. It’s really painfull to search the forum or Google (where only forum posts are presented), and I wish you would extend your docs accordingly.
Thank you in advance and kind regards,
SaschaDecember 21, 2021 at 4:48 am #2055409DavidStaffCustomer SupportHi there,
if you have your @font-face CSS in the Customizer > Additional CSS then you can use this PHP Snippet:
add_action( 'enqueue_block_editor_assets', function() { wp_add_inline_style( 'generate-block-editor-styles', wp_get_custom_css_post()->post_content ); }, 20 );
This will load ALL the Additional CSS in the Editor.
We’re working to make this easier in a future GPP update.
March 7, 2022 at 3:21 am #2145144SaschaHey guys, none of the snippets are working 🙁
http://media.macbay.net/_support/GP-local-fonts-issue_27D61394.png
I have added the snippets via “WPCodeBox” plugin, but also tried via “Code Snippets” plugin, without any effect. Caching was flushed & deactivated.
Any chance to help me directly?
Thank you in advance and kind regards,
SaschaMarch 7, 2022 at 4:36 am #2145221DavidStaffCustomer SupportTry this PHP Snippet instead:
add_filter( 'block_editor_settings_all', function( $editor_settings ) { $css = wp_get_custom_css_post()->post_content; $editor_settings['styles'][] = array( 'css' => $css ); return $editor_settings; } );
-
AuthorPosts
- You must be logged in to reply to this topic.