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.

Solution 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;

Solution 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; 
}

Solution 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

Comments

[Eldho]

Can i add direct font family in as font-family:Segoe Ui in tinymc editor intialise

[Thariama]

@Eldho: you would have to specifiy font-familiy in the css-file you set using content_css

[Eldho]

I set font in css but still it not working body { font-family: "Segoe UI"; } and i set content css as content_css: '/Design/style/layout.css' still not working

[Thariama]

does the font exist and is it accessible from the tinymce iframe?

[Banov]

This plugin is about TinyMCE for Wordpress. The OP is about the TinyMCE control itself ;)

[Duck]

this fails to tell us where this code should be added.