TL;DR

The problem: If you use custom font which has lighter, normal, and bold font-weight to WordPress editor using add_editor_style(), WordPress editor keeps using the lightest font-weight of the font.

The solution: don’t add the lighter font-weight of the font

The Issue

I intended to use Lato through Google Webfonts on the WordPress editor. So here was what I wrote on functions.php:

// Adding editor style
add_editor_style( array(
        'http://fonts.googleapis.com/css?family=Lato:300,400,900,300italic,400italic,900italic',
        'editor.css'
) );

on the editor.css, what I basically did was:

body#tinymce{
  font-family: "Lato", Helvetica, Arial, sans-serif;  
  font-weight: 400;
}

And here’s how it looked like, too thin for a 400 weight:

How Lato on font-weight: 400 initially looked like. Too thin.
How Lato on font-weight: 400 initially looked like. Too thin.

Then I tried changing the font-weight to 300 or 900. It didn’t look good either:

Setting the font-weight to 300. It should be thin, obviously
Setting the font-weight to 300. It should be thin, obviously

 

Setting the font-weight to 900. It shouldn't look like this
Setting the font-weight to 900. It shouldn’t look like this

The Solution

After quite some hair-pulling time, I realized that the solution is quite simple. Do not include the 300 weight version of the font:

// Adding editor style
add_editor_style( array(
        'http://fonts.googleapis.com/css?family=Lato:400,900,400italic,900italic',
        'editor.css'
) );

Now this looked like a 400 weight font:

Correct appearance of Lato on font-weight:400
Correct appearance of Lato on font-weight:400

Hence the TL;DR conclusion I mentioned on the beginning of this post.

Share Your Thought