How can I set the default font style of posts on the backend? I can’t see any global settings in customise as a quick Google search suggests. Have you turned this off?
Hello Daniel,
Thanks for writing in!
WordPress has no setting for this, so the theme has to supply an editor stylesheet. How you do it depends on the kind of theme.
Block theme (e.g. Twenty Twenty-Five): no code needed. Go to Appearance > Editor > Styles > Typography > Text and pick a font. The Site Editor saves it as Global Styles, and both the front end and the post editor use it automatically. The theme’s own theme.json sets the default the same way, under settings.typography / styles.typography.fontFamily .
Classic theme (Pro, X and most older themes): add an editor stylesheet from a child theme.
// child theme functions.php
add_action( 'after_setup_theme', function () {
add_theme_support( 'editor-styles' );
add_editor_style( 'editor-style.css' ); // path relative to the child theme folder
} );
/* child theme: editor-style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
body {
font-family: 'Inter', sans-serif;
font-size: 18px;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Inter', sans-serif;
}
How it works:
-
Selectors: WordPress automatically rewrites
bodyin that file to.editor-styles-wrapper, so the styles only affect the writing area and not the admin screens. -
Iframe: since WP 6.3 the editor content runs inside an iframe.
add_editor_style()loads the file there correctly. Styles added throughenqueue_block_editor_assetsmay not reach the iframe. -
Classic Editor: the same
add_editor_style()call also styles the TinyMCE editor. - Front end: This changes only how the editor looks. The live site’s font is still set by the theme’s own CSS or theme options.
The code above is for demo purposes ONLY. It may or may not work out of the box.
Best Regards.
