CODEWITHSUNDEEP
phpcsswordpresstinymce
Mr. Jo
Mr. Jo

Reputation: 5251

Unable to change the WordPress tinymce editor font

I'm currently trying to change the WordPress tinymce editor font but it's not working.

First I've created a tinymce-custom-editor.css with the following content:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

* {
    font-family: "Open Sans", Arial, sans-serif !important;
}

After saving and uploading I've included it in my themes functions.php file this way:

/**
 * Add editor styles
 */
add_action( 'after_setup_theme', 'add_custom_editor_style' );
function add_custom_editor_style() {
    add_editor_style( get_stylesheet_directory_uri() . '/css/tinymce-custom-editor.css' );
}

I'm getting no error that the file can't be found so I expect that it's getting included successfully. When I delete the cache and reload the page, the font is still the wrong one:

font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;

enter image description here

It must looks like this here:

enter image description here

What I'm doing wrong here?

Upvotes: 0

Views: 386

Answers (2)

Mr. Jo
Mr. Jo

Reputation: 5251

Now I've found the problem. The file get's required but the filter I've found on SO seems to be the wrong one. So I've gone deep into the tinymce and found the right filter. So if you want to:

Edit the tinymce css styles (in my case the font-family)

You have to do use this filter:

/**
 * Add custom editor styles to tinymce editor
 */
add_filter( 'mce_css', 'add_custom_editor_style' );
function add_custom_editor_style() {
    return get_stylesheet_directory_uri() . '/css/tinymce-custom-editor.css';
}

You can now put everything you want into your custom editor style CSS file.

Upvotes: 0

tao
tao

Reputation: 90013

First of all, you should make sure the css resource is loaded (look for it in the page source). If it's loaded, you're on the right path. If it's not, figure out where WP is trying to load it from and correct the path.

Your second problem is that your * selector is way too general (it will affect everything that doesn't already have a set font-family) and way too weak (it will be overridden by virtually any other selector applying font-family, to any element).

So, if the stylesheet is loading correctly, all you managed to do is apply font-family to any element that did not yet have it set.

You need to inspect the element you're trying to style and find the specificity of the selector that's currently applying the font-family property. Once your selector is stronger than the one applying, your font-family will apply (if your stylesheet loads later, the specificity can be equivalent and your value will still apply).

Upvotes: 1

Related Questions