Changing the default font family in TinyMCE

Question

I've successfully changed the default font inside the editor using the documentation here but that leaves me with a problem. The original default font no longer works in the font drop down list.

Original default: Verdana
New default: MyCustomFont

When I type into the editor I see my MyCustomFont font by default. If I try to change that to Verdana (original default) nothing happens. I can change it to any font family except Verdana. I noticed also that when I select MyCustomFont in the drop down list the content gets surrounded with a span with inline styles. This does not happen with the original default font (hence why nothing happens).

It seems to me like there's a key piece of documentation missing - how to tell the editor (the font feature in particular) that the font I've defined by default in the css is the default font.

I've Googled quite a bit but had no results. Everybody else seems to be settling for the documentation mentioned above. Am I the only one having this problem? If not, please help! :)

Please note, the answers to this question do not answer my question.

Pinery

how do you change it to Verdana? – Mojave

I didn't change it to Verdana. It seems that's the editor default. – Pinery

did you try it using the font drop down? – Mojave

When I select Verdana in the font dropdown nothing happens. I suspect it still thinks Verdana is the default font. – Pinery

looks like a bug. in this case you should file a bug report: www.tinymce.com/develop/bugtracker_bugs.php – Mojave

@Thariama. I notice TinyMCE is top of your "skills" list. Are you able to confirm this bug? Is it something you have come across yourself? – Pinery

I have not encountered anything like that before. Maybe it occurs in one single tinymce version only. Which version are you using? – Mojave

Answer 1

maybe too late but...

$('.tinymce').tinymce({
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            ed.execCommand("fontName", false, "Arial");
            ed.execCommand("fontSize", false, "2");
        });
    }
});

EDIT

For TinyMCE 4, as @jason-tolliver and @georg states, the syntax is:

ed.on('init', function (ed) {
    ed.target.editorCommands.execCommand("fontName", false, "Arial");
});

Margay

Awesome answer . Most of the methods focus on CSS , but this is cleaner inline way of doing it . It also helps when you generate PDF from TinyMCE ! – Kazoo

in TinyMCE 4 the syntax is ed.on('init', function (ed) {...}) – Reviere

@JasonTolliver that is throwing an Object doesn't support this property or method 'execCommand'. – Descry

ed.on('init', function(ed) { ed.target.editorCommands.execCommand("fontName", false, "Calibri"); should be the way to go with Version 4 – Pasto

@Pasto - Thanks! This is the full correct answer for version 4; my edit of answer was denied, so I hope people look down here and find your answer. – Biennial

Unfortunately this sets the focus to the editor. Can this be avoided? Cant find a way to do it... – Tayler

For TinyMCE 7, the following works: init_instance_callback: (editor) => { editor.execCommand("FontName", false,"Helvetica");} – Bysshe

Answer 2

// Init TinyMCE
$('#content').tinymce({
    setup : function(ed)
    {
        ed.on('init', function() 
        {
            this.getDoc().body.style.fontSize = '12px';
            this.getDoc().body.style.fontFamily = 'serif';
        });
    }
});

Silver

Answer 3

For those who init timymce with tinymce.init({ and cannot implement Radius Kuntoro answer directly.

My init looks like

tinymce.init({
            selector: '#editor',
            menubar: false,
            plugins: ['bbcode'],
            toolbar: 'undo redo | bold italic underline',    
            setup : function(ed)
            {
                ed.on('init', function() 
                {
                    this.getDoc().body.style.fontSize = '12';
                    this.getDoc().body.style.fontFamily = 'Arial';
                });
            },
        });    

Butcherbird

Works on Tinymce 5.x – Figural

Answer 4

For TinyMCE 4.6.3 this seems to be the way to go:

tinymce.init({
    setup: function (ed) {
        ed.on('init', function (e) {
            ed.execCommand("fontName", false, "Verdana");
        });
    }
});

Scorpius

Answer 5

As refer to TinyMce website you can embed style sheet within your init function like this :

tinymce.init({
    content_css : 'path/to/style/sheet',
    body_class: 'define-class-name-without-dot-at-the-first'
});

It works and you do not need to setup anything. check it out on tinyMCE webpage

Snapp

Answer 6

Some of you will be working within the confines of the TinyMCE EditorManager, which offers two events: AddEditor and RemoveEditor. When a new instance of TinyMCE is being spawned and AddEditor is fired, the editor isn't actually initialized and so calling getDoc() will return null.

What you need to do is create an init listener within.

tinyMCE.EditorManager.on('AddEditor', function (event) {
    ... other code ...

    event.editor.on('init', function() {
      this.activeEditor.getDoc().body.style.fontSize = '12px';
      this.activeEditor.getDoc().body.style.fontFamily = 'Times New Roman';
    });

    ... other code ...
  }
});

This is at least true as of version 4.3.8

Pendentive

Answer 7

I had difficulties with all solutions here in tinymce 4.x I couldn't change neither fontsize nor fontname. After trying out a lot I found the solution. First of all I can confirm Jareds answer, thank you for it! Those two commands will not work by default settings:

tinymce.EditorManager.execCommand("fontName", false, "12px");
tinymce.EditorManager.execCommand("fonSize", false, "Arial");

The default fontsize size is "pt", not "px." So either define displayed fontSize as "px" by [fontsize_formats][1] or just handover the desired size with "pt". With tinymce.EditorManager.execCommand tinymce is also not happy. You have to handover the whole font-family like 'arial, helvetica, sans-serif'. These commands worked on my site:

tinymce.EditorManager.execCommand("fontName", false, "12pt");
tinymce.EditorManager.execCommand("fonSize", false, "arial, helvetica, sans-serif");

Coadjutress

Answer 8

This worked for me:

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');
   

2. In the same directory, create a file called custom-editor-style.css with the following 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 browser's cache and this is what you’ll see.

Refer link: https://blog.phi9.com/wordpress-editor-and-its-font/

Scottie

Answer 9

None of the above solutions worked for me. So, somehow I managed to fix it using custom logic.

editor.on('change', function (e) {
    let node = e.target.selection.getNode();
    if (node.nodeName === 'P' || node.parentNode.nodeName === 'BODY') {
        editor.dom.setStyle(node, 'font-size', "16px");
    }

    tinymce.triggerSave(); // to keep your textarea synced with above changes
});

Lilongwe

Answer 10

I tried doing this way. I use TinyMce 5 and inside the editor there is a body tag generated. While initialising the editor I set the forced_root_block:'div', which means everytime something is being typed my root element will always be a div.

 let tinyMceBody = tinymce.activeEditor.getBody();
      let divs = $(tinyMceBody).children('div');
      for(let i =0; i<divs.length; i++) {
        divs[i].style.fontFamily = 'Nunito';
}

So I try catching all the root elements and set default styles to them.

When you edit something, tinymce surrounds whatever you have edited with a span block with a style attribute, so what ever you manually edit in the editor will be overrided. If you don't edit the text in editor then the default styling that we have attached on the parent element forced_root_block:'div' will be retained.

Try formulating a solution as per your custom req. using the above mentioned technique. Seems like the library doesn't have a prominent internal support for this. z

P.S:-

tinymce.activeEditor.dom.setStyles(tinymce.activeEditor.dom.select('div'), {'font-family' : 'Nunito'});

applies to all divs , but I wanted to apply only for the first level children of the body tag and not all divs( includes children of children). Otherwise this could be a solution too.

Mould

Answer 11

Solution for TinyMCE 7.x

After trying the very dated existing answers on this question without success, we found the following to work in our team's situation.

menubar: true,
toolbar: "blah blah",
init_instance_callback: (editor) => {
    editor.execCommand("FontName", false, "Helvetica");
    editor.execCommand("FontSize", false, "14pt");
}

Bysshe

Answer 12

For tinymce 5 you can add fullpage plugin to plugins array then new key called fullpage_default_font_family but i don't know if it works the same way for old versions or not.

Shouldst

Answer 13

This is the Answer. It work for me:

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.

Tony Ngo

Scottie

This seems to duplicate another answer by the same user. Please delete this, after checking if there is something which should be merged into your other answer. – Szombathely