Change default font type/size in TinyMCE

Question

How do you change the default font type and font size in TinyMCE?

I'm using the advanced skin and I've changed the body, td, pre style in default/content.css but it still doesn't change.

Answer 1

Well, there are several content.css and only one is used to style your editor depending on your configuration settings.

You should use the content_css configuration option and name an own css file where you can overwrite the editors defaults (the content.css you were recently looking for). In your init function use something like

content_css: "http://localhost/css/my_tiny_styles.css",

and in my_tiny_styles.css or whatever file you choose you use

font-family: myfont1, myfont2, sans-serif;

Answer 2

Here's another way to resolve this problem.

By adding your own custom styles into our CSS file by defining tinymce id.

#tinymce .mceContentBody p {
   font-family: your_font_name !important; 
}

Answer 3

If you want to change the default of the dropboxes rather than the display css only, with tinyMCE 4 it is now:

setup : function(ed) {
 ed.on('init', function(ed) {
  ed.target.editorCommands.execCommand("fontName", false, "Calibri");
  ed.target.editorCommands.execCommand("fontSize", false, "11pt");
 });
}

EDIT: this is the setup option of the init function as explained here: https://www.tinymce.com/docs/configure/integration-and-setup/#setup

Answer 4

For people having troubles adding a stylesheet because of path troubles or whatever reason, this should do it pretty simple:

setup : function(ed) {
     ed.on('init', function(){
         $(this.getDoc()).find('head').append('<style>p{margin:0;}</style>');
     });
}

Note I used jQuery, but can of course be done without it as well.

Answer 5

Here's how to do it without touching CSS or any other codes.

1. Use the plugin 'TinyMCE Advanced'
2. Activate it in settings.

More detailed instructions here.