Phi 9 Official Blog

Web Hosting Phenomenon

Archive for the ‘wordpress tinymce font’ tag

WordPress editor and its font

comments

You have to admit, WordPress is a pretty damn serious blogging tool. From start to end it’s just designed for you to make you write. Take a look at its editor, for instance. It goes in full screen mode and hides its tool bar. Though this editor, TinyMCE has everything you need to begin but the default font *Georgia* in it is just hard coded and cannot be easily changed. It’s inherited from a file called content.css in tinymce directory but overriding it directly in that file may not be a good idea, because:

  • WordPress system updates will revert the changes, and
  • Even if you directly edit the content.css file, you’ll still see Georgia font when you’ll use the editor in full screen

Because this blog uses a different web font, Open Sans, so the best I would like to see when writing a post is that the editor carries the same font as well.

STEP # 1:

Look for functions.php in root of your themes directory inside /wp-content/themes/yourtheme/, open it up and add one line after php tag.

add_editor_style('custom-editor-style.css');

STEP # 2:

In the same directory, create a file called custom-editor-style.css with below lines in it

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
* { font-family: 'Open Sans', sans-serif, Arial, Helvetica;}

Go ahead, clear your browsers cache and this is what you’ll see. Note the title font, it’s set to sans-serif, taken from my browser settings  (I’m using Firefox on Linux).

Written by Phi 9 World

October 13th, 2012 at 10:38 am