I am using the Gutenberg editor for my posts. My site is using the Avenir font for content and heading. So I was wanting the same font on Gutenberg editor also. But default Gutenberg editor is using the Google font “Noto Serif”. I replaced it with following tricks:
I opened the functions.php file of active theme and dropped this small PHP codes there:
function paul_guten_block_editor_assets() { wp_enqueue_style( 'paul-editor-style', get_stylesheet_directory_uri() . "/editor.css", array(), '1.0' ); } add_action('enqueue_block_editor_assets', 'paul_guten_block_editor_assets');
enqueue_block_editor_assets is a Gutenberg hook. You can add the custom JS and CSS scripts for your editor. I used it and loading my custom editor.css file.
My editor.css file is containing the following CSS codes:
.editor-post-title__block .editor-post-title__input, .edit-post-visual-editor, .edit-post-visual-editor p { font-family: "Avenir", sans-serif; } .editor-post-title__block .editor-post-title__input { font-size: 42px; font-weight: 400; line-height: 50px; text-align: center; } .edit-post-visual-editor, .edit-post-visual-editor p, .editor-rich-text__tinymce.mce-content-body { font-size: 20px; line-height: 30px; }
It’s work like a charm. Happy coding.