WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to change fonts on Visual Editor mode (14 posts)

  1. sgonzaga
    Member
    Posted 10 months ago #

    Hi everyone,

    I know this topic has been addressed several times before, but they're dated 3-5 years ago and may not work for the latest version of WordPress.

    Could anyone provide a solution on how to change the default fonts used for the Visual Editor of WordPress 3.6.1? I'm especially looking to change the default font used for headings.

    Much appreciated! :)

  2. Zakir Sajib
    Member
    Posted 10 months ago #

    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.

  3. sgonzaga
    Member
    Posted 10 months ago #

    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: http://cl.ly/image/2U2I0z1g2N0g

  4. Zakir Sajib
    Member
    Posted 10 months ago #

    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.

  5. sgonzaga
    Member
    Posted 10 months ago #

    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 http://thefreelancepinoy.com/new (demo site)

  6. Zakir Sajib
    Member
    Posted 10 months ago #

    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(http://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(http://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(http://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(http://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(http://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(http://themes.googleusercontent.com/static/fonts/robotoslab/v2/dazS1PrQQuCxC3iOAJFEJRLE7eCesZRIBkkq27EgTqg.woff) format('woff');
    }
    body{
    font-family:'Roboto Slab', Arial, sans-serif;
    }
  7. Zakir Sajib
    Member
    Posted 10 months ago #

    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(http://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(http://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(http://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*/
    }
  8. Zakir Sajib
    Member
    Posted 10 months ago #

    For further information, read the wp codex:

  9. sgonzaga
    Member
    Posted 10 months ago #

    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(http://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(http://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(http://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.

  10. Zakir Sajib
    Member
    Posted 10 months ago #

    Yes should work.

    Check and test.

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

  11. sgonzaga
    Member
    Posted 10 months ago #

    Wow it worked! Thank you very much Zakir! :)

  12. Zakir Sajib
    Member
    Posted 10 months ago #

    Pleasure :)

  13. krishnarajvk
    Member
    Posted 7 months ago #

    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

  14. sallam
    Member
    Posted 3 months ago #

    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.

Reply

You must log in to post.

About this Topic