How to Apply CSS and Change Fonts in WordPress Visual Editor

Css style to visual editor

While writing blog posts in WordPress visual editor, you may get quickly bored by the default font that WordPress offers you. You may feel like you need to change font family, font size or the color of the text in the editor. With a little tweak, WordPress visual editor would be your most favorite editor for writing blog posts.

WordPress, as it is incredibly flexible, allows you this. In this blog post, I'll explain you how to apply CSS style to the visual editor.

How to apply a custom CSS style to the WordPress visual editor?

For this, you need to upload a file to the theme directory of your WordPress installation. For accessing the theme directory in your WordPress installation, you have two options.

  • Logging into CPanel file manager provided by your host.
  • Using FTP softwares like Filezilla or Cyberduck to connect to your remote file system.

For achieving connection to your file system, you need to get your IP address and login details of your CPanel.

Here are the tutorials to do this in major hosting providers.

In this tutorial, I'm using Filezilla as the FTP software of choice.


Just enter your server IP address, username and password of your CPanel. Click on Quickconnect.

Create a new file. You may use any text editor for the process. In case of Windows, you can use Notepad.

Css file creation

Inside the file write the below CSS code.

 font-family: 'Verdana', sans-serif;
 color: #000000;

Save the file as custom-editor-style.css. The file name is important.

As you may be already aware of, the above piece of code applies the font "Verdana" to the visual editor body and sets the color of the font to black. If you are familiar with CSS coding, you can add more attributes like line height, heading color, etc. Here for the sake of simplicity, I'm adding only the code to change the font color and family.

Now head over to /public_html/wp-content/themes on your remote site. Or in case of add-on domains choose your domain name and head over to the themes folder. Go to your theme folder. In this case, I'm using Genesis child theme.

Upload the file to your theme directory. Just drag and drop.

Upload CSS file to the server

Close the FTP software.

Open the WordPress theme editor. Edit your functions.php file.

Add the following code.

function my_theme_add_editor_styles() {
 add_editor_style( 'custom-editor-style.css' );
add_action( 'init', 'my_theme_add_editor_styles' );



Save the file.

Open your WordPress visual editor. Create a new post. Enter the content of the post. Notice the changes in font family and color. If the changes are not reflected in your visual editor, just force refresh your browser (CTRL+F5 or CMD+SHIFT+R).

The changes will be seen in the visual editor and as well as full-screen distraction free mode.

Change in font
Notice the change in font

Also, notice that the file you just created is also presented in the appearance editor section of your WordPress.

Appearance editor WordPress

From therein, you can just edit the CSS code as you wish.

After I  applied this hack on my WordPress editor, I write all my blog posts directly on WordPress visual editor. Now the pleasure of writing in WordPress visual editor with your own font, color and style is great.


4 thoughts on “How to Apply CSS and Change Fonts in WordPress Visual Editor

  1. Hi Akshy,

    I tried to apply the changes but it doesn't reflect on the whole site. Is it possible to change the Font on the whole website?

Leave a Comment