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:
Of course, if you’ve used different fonts or different styles, then your results will be different, but the point and the method remain.