How to set the font-family as specified when editing post in wordpress?

Admin 1
Viewed 307

I have created a child themes, set font-family as my desired DejaVu Sans Mono for every html element.

vim /var/www/html/wp-content/themes/twentyfourteen-child/style.css
*{
    font-family:"DejaVu Sans Mono" !important;
}

I use twentyfourteen-child as my wordpress theme.
Every character in edit status is not DejaVu Sans Mono.
enter image description here

Every character in post is DejaVu Sans Mono after published.
enter image description here

How can i set the font-family as DejaVu Sans Mono when editing post?

wordpress font-family
2 Answers

There is simple solution to change editor styles . Add this in functions.php:

function myFunc123( $settings ) {
    $settings['content_style'] .= 'body#tinymce {font-family: DejaVu Sans Mono;}'; return $settings;
}
add_filter( 'tiny_mce_before_init', 'myFunc123' );
user_23773430

You could use your browser developer tools, to see the actual file for the stylesheet.
You only edited the stylesheet for the theme - so only applying to the frontend of your website!

On my wordpress system I got the url for the stylesheet you need. It is:

your.site.com/wp-includes/css/editor.min.css

There you can possibly find something like

.wp-editor-area {
    font-family: Consolas,Monaco,monospace;
}

Change that to

.wp-editor-area {
    font-family:"DejaVu Sans Mono" !important;
}

If you want to change the styles for the backend you can also have a look at the stylesheets in /wp-includes/ and /wp-admin/ .

Please keep in mind, that those changes are back to normal after any updates.

Hope it helps!

user_92939340
Related