How to change the default font of TinyMCE for Word

Question

I see this question on SO but all answers fail to be specific on how to change that.

What I mean is this: the answers say "add this" but they fail to tell where, I mean, which file and one has to be a rocket scientist to figure that out.

Can someone explain like I am five, ok, make it 3... all steps I have to do to get rid of the infamous Libre Franklin font and put Helvetica as the default on TinyMCE editor for wordpress?

Thanks

Answer 1

This post gives pretty clear instructions.

1) Add a new css file, called it whatever you want, like tinymce_custom_editor.css for example, upload it to the folder "css" in your theme -> wp-content/themes/YOUR-THEME/css/

2) Add a new function in your theme function.php file:

The CSS

Make a file tinymce_custom_editor.css with following code ↓, then add it to folder wp-content/themes/grandblog/css

body#tinymce.wp-editor {
    font-family: Arial, Helvetica, sans-serif !important;
}

The Function

Add following new function to call previously uploaded css file tinymce_custom_editor.css in wp-content/themes/YOUR-THEME/functions.php ↓

function my_theme_add_editor_styles() {
    add_editor_style( 'css/tinymce_custom_editor.css' );
}
add_action( 'after_setup_theme', 'my_theme_add_editor_styles' );