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 🙂 .
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!