
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:
1 2 3 4 5 6 7 8 9 |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
.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 🙂 .
Thank you for your awesome solution!
I want to change font size in gutenberg editor for long time…
Did not work for me in WP 6.2.2 and TwentyTwentyOne theme.
Super simple yet 100% effective pieces of code, thanks a lot!
I can’t seem to make it work, I’m using Iconic One Pro theme and I’m trying to make the editor to use default Ubuntu font.
This trick is just awesome. I was wondering how to change the editor font. And this works.
Thanks
Awesome Tips. I was wondering how would I achieve this and landed on this page. Thanks for this tips.
It is awesome, thank you PAUL
Worked like a charm!
How do I do the same for the Admin panel’s comments page ? I have a bad eye sight so I was hoping to make the text larger..
This is a great comment editor. How do I add it to my WordPress blog?
Where is the comment editor? Can you send me a screenshot?
Awesome! Just what I was looking for. I’ve added your link to a question I asked earlier in WordPress Stackexchange. Thanks so much!