How to set a default font and Size for WP Edit

Hello Daniel,

Well, are you meaning what displays as default in the dropdown boxes; OR, do you mean the actual font and font size used when the editor initializes (when you begin typing).

I meant the actual font and font size used when the editor initializes (when you begin typing.

Unfortunately… the free version of WP Edit does not offer this option.

However, if you are familiar with a WordPress Child Theme; and are using one currently; I can point you towards some code which will allow you to achieve this result.

Thanks – I am using a child theme – a link would be appreciated.

Okay…. here we go:

1) We are going to use the content_css hook, provided by TinyMCE.

2) We are going to use the tiny_mce_before_init WordPress filter, to hook into this from our child theme.

3) You’ll need to create a stylesheet; perhaps something like “my_tinymce_styles.css”… and save it in your child theme folder.

Now… we can create the function (goes in child theme functions.php file):

function my_tinymce_before_init($init) {

    // Let's define the path to the stylesheet we created
    // The stylesheet should be in the child theme root folder
    $my_css = get_template_directory_uri() . '/my_tinymce_styles.css';

    // First we check to see if the filter already has any stylesheets
    if($init['content_css'] && $init['content_css'] != '') {

        // If it does... we have to append ours to the end
        $init['content_css'] = $init['content_css'] . ',' . $my_css;
    } else {

        // If not, then we just add ours to the filter
        $init['content_css'] = $my_css;
    }

    // Don't forget to return the data
    return $init;
}
add_filter('tiny_mce_before_init', 'my_tinymce_before_init');

Okay… that should get your stylesheet loaded into the tinymce editor.

The next step is to define the font, and font size you want to use (don’t forget, you may have to use the !important declaration to override any existing styles).

So, something like this in your stylesheet should suffice:

.mceContentBody {

    font-size: 16px;
    font-family: arial;
}

Of course, you can adjust those values to whatever you like.