How to change font of the WordPress post editing window

Change font of WordPress post editing window

Kavita from Cochin asks

Hello.

I have been searching for the answer for “how to change font of the WordPress post editing window” and everywhere there is either a very complicated answer, or people don’t understand the question at all. I don’t want to change the font “in” the editing window (which most of the people trying to give the answer understand), I would like to change the font “of” the post editing window, which often appears very short and is very uninspiring to work with. This is a big reason why I don’t use the WordPress default post editing dashboard. I first write the post using an external word processor and then copy paste the entire content into the post editing box in the WordPress editing area, which is sort of a hassle. Please help.

TechBakBak answers:

Yes, this is a bit confusing question especially for those who can’t imagine that someone would like to change the font of the editing window rather than using the editing window to change the font of the published blog post. What I understand is, you want to change the font, or rather the appearance of the editing window itself, and not the final output.

If that is the case, there are 2 case scenarios:

  1. You are using the child theme of one of the stock themes shipped with the WordPress installation
  2. You are using a WordPress theme that has been built from scratch

If you are using the child theme of the stock theme that came with your WordPress installation, you need to go to the folder of the parent theme (for example if you are using the child theme of twentytwelve you will need to go to the twentytwelve folder) and from there  open editor-style.css. After that go to the portion that contains CSS definitions for the <p> tag:

p {
line-height: 1.714285714;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
}

The above code does not mention what should be the size of the WordPress editing window font. You can make your guesses and enter the font size the way mentioned below:

p {
line-height: 1.714285714;
margin: 0 0 24px;
margin: 0 0 1.714285714rem;
font-size:20px;
font-size:1.250em;
}

Just make sure that you put the values both in px and em (search for px to em converter on Google). Once you have made the changes and saved the file upload it on to the server using the correct path (/blog_path/wp-content/themes/twentytwelve) and now the font of your WordPress post editing window should be changed.

What if you have your own theme from scratch?

Create a brand new editor-style.css and insert the above <p> code. This way also you should be able to change the font of your WordPress post editing window.

 

About Amrit Hallan
Amrit Hallan is the founder of TechBakBak.com. He writes about technology not because "he loves to write about technology", he actually believes that it makes the world a better place. On Twitter you can follow him at @amrithallan

Be the first to comment

Leave a Reply

Your email address will not be published.


*