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

If you're having trouble applying Radius Kuntoro's solution directly to tinymce.init, here's another approach that might work for you.

This is how I initialize TinyMCE:

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

If you are using TinyMCE version 4.6.3, it appears that this is the recommended approach:

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

According to information on the TinyMCE website, you can include a style sheet in your init function like this:

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

This method works without needing any additional setup. Check it out on the TinyMCE webpage

For those of you utilizing the TinyMCE EditorManager, there are two events available: AddEditor and RemoveEditor. When a new instance of TinyMCE is created and the AddEditor event is triggered, the editor will not be fully initialized yet, resulting in a null value when calling getDoc().

To work around this, you can set up an init listener as shown below.

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 information applies to version 4.3.8 and beyond.

I faced challenges with the solutions provided for tinymce 4.x where I was unable to modify either the font size or font name. After numerous attempts, I finally discovered the solution. I want to acknowledge Jared's response, thank you! The following commands will not work with default settings:

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

The default font size is in "pt," not "px." You can either specify the displayed fontSize as "px" using [fontsize_formats][1] or simply use "pt" for the desired size. Additionally, tinymce does not seem to like when the whole font family is not included such as 'arial, helvetica, sans-serif'. These adjusted commands successfully worked on my site:

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

After trying various solutions without success, I took matters into my own hands and fixed the issue using a custom logic approach.

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(); // ensuring textarea reflects the changes
});

I found a solution that worked for me:

1. To change the font in your WordPress editor, locate the functions.php file in the root of your theme's directory at /wp-content/themes/yourtheme/. Add the following line after the opening PHP tag:

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

2. Create a new file called custom-editor-style.css in the same directory. Add the following CSS code to this file:

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

After making these changes, clear your browser's cache to see the updated font in your WordPress editor.

For detailed instructions, you can visit this link:

I attempted to approach it this way. Using TinyMce 5, the editor generates a body tag within itself. Upon initializing the editor, I specified forced_root_block:'div', ensuring that every time something is entered, the 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';
}

Therefore, I aimed to target all root elements and assign default styles to them.

When making edits, Tinymce wraps any edited content in a span block with a style attribute, overriding any manual styling applied within the editor. If no editing is done in the text editor, the default styling set on the parent element forced_root_block:'div' stands strong.

Consider devising your own solution based on the aforementioned technique to meet custom requirements. It appears that the library lacks robust built-in support for this issue. z

P.S:-

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

This applies to all divs, but my intention was to apply it only to the direct children of the body tag and not all divs (including nested ones). Nevertheless, this could also serve as a viable solution.