When it comes to building themes in WordPress, one of the nicest things that you can do for your users is to implement a stylesheet specifically for the editor so that they get a true WYSIWYG experience.

To be more specific, that is you can (and should!) add a stylesheet specifically for the WYSIWYG editor in the WordPress Dashboard. This stylesheet is normally called `editor-style.css`, but can actually be called whatever it is that you’d like permitting that you enqueue it properly.

With the popularity of web fonts rising – such as those from Google – you have to take a slightly different approach when implementing them in the context of the editor rather than the typical way of doing so with server side hooks.

Add Google Fonts To WordPress Editor

Typically, when we add web fonts to WordPress, we do so using the `wp_enqueue_scripts` hook, a custom function, and a call to the `wp_enqueue_style` function that will include our font(s).

Of course, this is for making the fonts available on the front end of the site.

If you’re looking to get this same functionality in the dashboard of the site, you’ve got to do it a little bit differently.

1. Hook Up Your Editor Styles

First, go ahead and hook up your editor stylesheet, this is done using the `init` hook and your own custom function.

As you can see in the code above, my `editor-style.css` is located in a `css` directory in the my theme’s directory.

Also, for those who are using child theme’s, please see Dan’s comment for how you need to modify this code.

2. @import Web Fonts

Now here’s where the difference comes as it relates to loading stylesheets. You can’t use `admin_enqueue_scripts` to get the same result as above.

A little confusing, I know, but you actually need to use CSS’ `@import` statement. As such, your stylesheet may look something like this:

Note that the code above is just a sample – you’ll obviously need to provide significantly more styles for each of the various elements, but you get the point.

3. Refresh The Editor

At this point, you should have `editor-style.css` defined, importing the web fonts, and have several elements defined. This should then result in something like this:

Using Google Fonts in the WordPress Editor

Using Google Fonts in the WordPress Editor

Of course, if you’ve used different fonts or different styles, then your results will be different, but the point and the method remain.


Leave a Reply