How do you change the Gutenberg editor’s default font?

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.