How to change fonts on Visual Editor mode

not sure how knowledgable you are about wp and server management…

i assume u want to use some thrid party fonts like google web fonts or premium fonts.

in this case you need to access via ftp and chnage/add code.

or go to appearance and then editor (if it shows) and go to header.php.

before wp_head() copy the google web font code there .

and then go to style.css

find body

find font-family:

and then change the font name to google font name.

Thanks but you’re probably referring to the font used for body content. I’m referring to the default font used to render text when on Visual Editor mode when writing and publishing a post.

Please see screenshot: https://cl.ly/image/2U2I0z1g2N0g

I see.

In that case, You need a separate style sheet.
Create a css file in your theme folder and name it “custom-editor-style.css”

And open functions.php or create a file and name it functions.php (if does not exist)

and paste this following code:

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

Now whatever style you want write in that css file and it will be applied to your visual editor mode when writing and publishing a post.

Thanks Zakir. I’ve very minimal CSS skills, so this is all new to me.

What should I place within custom-editor-style.css though? Is it simple enough to just add:

font-family:'Roboto Slab', Arial, sans-serif;

Or is there something else that I need to include? If you need to look at the actual site, it’s https://thefreelancepinoy.com/new (demo site)

You have to write like this:

body{
font-family:'Roboto Slab', Arial, sans-serif;
}

It seems Roboto slab is a custom font so you need to add this as well.

So before above code, write:

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJXZ4362_PV5aPD5jU0S2ELI.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/y7lebkjgREBJK96VQi37ZqfTCPadK0KLfdEfFtGWCYw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJRLE7eCesZRIBkkq27EgTqg.woff) format('woff');
}

so in a nutshell, custom-editor-style.css should contain at least:

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJXZ4362_PV5aPD5jU0S2ELI.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/y7lebkjgREBJK96VQi37ZqfTCPadK0KLfdEfFtGWCYw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJRLE7eCesZRIBkkq27EgTqg.woff) format('woff');
}
body{
font-family:'Roboto Slab', Arial, sans-serif;
}

So your custom-editor-style.css file should contain at least:

@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Slab Light'), local('RobotoSlab-Light'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJXZ4362_PV5aPD5jU0S2ELI.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/y7lebkjgREBJK96VQi37ZqfTCPadK0KLfdEfFtGWCYw.woff) format('woff');
}
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Slab Bold'), local('RobotoSlab-Bold'), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJRLE7eCesZRIBkkq27EgTqg.woff) format('woff');
}

body{
font-family:'Roboto Slab', Arial, sans-serif;
font-weight: 300; /*change according to your desire*/
}

For further information, read the wp codex:

Just to clarify, since I’d like to change the headings and not the body content itself, the code would look like:

@font-face {
font-family: ‘Roboto Slab’;
font-style: normal;
font-weight: 300;
src: local(‘Roboto Slab Light’), local(‘RobotoSlab-Light’), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJXZ4362_PV5aPD5jU0S2ELI.woff) format(‘woff’);
}
@font-face {
font-family: ‘Roboto Slab’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto Slab Regular’), local(‘RobotoSlab-Regular’), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/y7lebkjgREBJK96VQi37ZqfTCPadK0KLfdEfFtGWCYw.woff) format(‘woff’);
}
@font-face {
font-family: ‘Roboto Slab’;
font-style: normal;
font-weight: 700;
src: local(‘Roboto Slab Bold’), local(‘RobotoSlab-Bold’), url(https://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJRLE7eCesZRIBkkq27EgTqg.woff) format(‘woff’);
}

h1,
h2,
h3,
h4,
h5,
h6{
font-family:’Roboto Slab’, Arial, sans-serif;
}

Please let me know if this is correct.

Yes should work.

Check and test.

also put
font-weight: 300; /*change according to your desire*/

Wow it worked! Thank you very much Zakir! ??

Pleasure ??

Hai everyone,
I am Krishnaraj from India, i am a beginner in wordpress.
I am using Mazaya Theme(yoo theme ,warp framework)
I am planning to build a regional News Web site
So that we decide to use our regional language font for our website, for that we configured the font also, its working fine.But when we posting a new post with our regional language in the wordpress default text editor we cant able see the content in the editor, after publishing we can clearly see in the web sit

Please help me to how to integrate regional font into the default text editor/Visual editor

Thanks Zakir Sajib for your code.
I’ve noticed that when I enlarge the font size, the lines touch each others, so I’ve added a couple of css lines. Here is the content of my css file now:

body{
font-family: Arial, sans-serif;
font-size: 150%; /*change according to your desire*/
font-weight: 600; /*change according to your desire*/
line-height: 1.4; /*change according to your desire*/
}

and now its working great.
Thanks again.