Support » Themes and Templates » Setting different font for Visual editor in RTL mode

  • I’ve added RTL support to my theme and now wanted to also create an editor-style-rtl.css.
    I already have an rtl.css file which has all the changes to style the editor so that users have a great visual of what the post will look like in the visual editor.

    My theme base font is set to Georgia. In my editor-style-rtl.css I’ve set the following:

    html .mceContentBody {
    	direction: rtl;
    	unicode-bidi: embed;
    * {
    	font-family: Arial, Helvetica, sans-serif;

    I’ve tried adding the font-family to body, to html, to *, to everything, I can not get the editor to display the font in Arial. I’ve read that it’s important to use sans-serif fonts for RTL languages and thus wanted to get the visual editor to display arial, but I can’t get it to work.

    I went on the as well and tried a few themes that have Serif fonts, changed my language to Farsi and the visual editor doesn’t change the font-family. Perhaps this is not possible to do? Have anyone had any success?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Have you tried !important?

    * {
    	font-family: Arial, Helvetica, sans-serif !important;

    What I would like to recommend is to use body instead of * or html in both stylesheets editor-style.css and editor-style-rtl.css


    I haven’t been able to get this to work. Having said that, Twenty Eleven has a editor-style.css which has fonts set to : “Helvetica Neue”, Helvetica, Arial, “Nimbus Sans L”, sans-serif;

    The editor-style-rtl.css is set to arial, and I can’t see the changes either. Perhaps the RTL tester is simply not sophisticated.

    Unfortunately I haven’t been able to find someone with a Farsi, Hebrew or other RTL language to do some real testing, so I’ll have to release and hope for the best.

    If you really need to test it, my sister uses (write, speak, write) Arabic. If you can setup the site, I can ask her to login and test and let you know.

    Wasn’t sure if this will be against the forum, but if for the sake of helping the community, then I’m in.

    Hi Mohd,
    Thanks for your offer to help. I went ahead and updated my theme.
    If you want to go ahead and ask your wife to test it for me that would be great.
    I hope I did it correct and that it will work well for Arabic speakers.


    What happens if you edit the file editor-style-rtl.css and set the font there? It seems that another stylesheet is overriding the font family in your theme’s editor-style.css.

    I am wanting to learn how to customize my tiny editor and perhaps this rtl.css is a good first step. I already know about editor-style.css and the changes it made in versions 3+ (I’m using v. 3.5). Can someone give me a quick rundown on rtl.css please? or point to docs on-line? Thanks!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Setting different font for Visual editor in RTL mode’ is closed to new replies.