I am trying to optimise my theme with Gutenberg, I have loaded block styles and checking with https://wordpress.org/plugins/block-unit-test/ this plugin. The only thing I am missing is matching fonts, could anyone please tell me how can I match fonts in editor styles and front-end. In front-end I have added Google fonts, but how can I include Google fonts in editor-styles? Please help and thanks in advance.
Try this code inside functions.php, it will load your google font in the gutenberg editor
function gutenberg_styles() {
wp_enqueue_style('gutenberg-styles', get_template_directory_uri() . "gutenberg_styles.css", array(), false);
wp_enqueue_style('google-font-name', 'google-font-url' , array(), false );
}
add_action('enqueue_block_editor_assets', 'gutenberg_styles');
now you can add your font inside a css file named gutenberg_styles.
Example:
.editor-post-title__input {
font-family: "YOUR FONT", sans-serif
}
Thanks a lot. It is working!!! Thanks again for your valuable help.
Glad I could help