Why doesn’t the font match?
I can’t tell you how many times I’ve had clients ask that question when using the WordPress Visual Editor for the first time. They simply can’t understand why they have to enter text in the antiquated “Georgia” font and why it looks different when it actually appears on their site. Answering their question requires a lengthy explanation that delves into the principles of a content management system and why it’s important to separate the content of a web site from it’s style… blah, blah, blah. Then I get the deer in the headlights look and the answer gets simplified to the time-tested response of a frustrated parent to a petulant child: “Because I said so.”
Yeah, but why doesn’t the font match?
WordPress has for years made the decision that the default font for the Tiny MCE Visual Editor would be Georgia. I have no explanation. Maybe it’s for the same reason that the LOOKUP button in the HTML editor links to answers.com (it’s true, try it).
After some digging, I found the font for the visual editor is controlled by a css file buried deep in the recesses of WordPress. To be precise: wp-includes/js/tinymce/themes/advanced/skins/wp_theme/content.css. On line two of that file, you’ll find the font settings, which default to Georgia.
You can change the font settings in the content.css file…
Simply changing the font face in the content.css file will get you quick results. Your visual editor will immediately display your preferred font the next time it loads. But much like a sugar rush, this quick solution will give you fast results but will soon end in a disappointing crash. Because, as soon as WordPress pushes out a new update, all your changes to the content.css file will be overwritten. We need a better way.
You could try to add styling in your theme’s styles.css…
Good luck with that. I spent some time using Firebug to discover what the magic classes were that controlled the Visual Editor’s font display. I used “The Dangit Method” for this process. Try one class or id… Dangit, that didn’t work. Try another one, and so on. Let me advise you to learn from my wasted time. It doesn’t work. Or, at least nothing I tried worked. There’s a better way.
Stealing ideas from the Twenty-Eleven theme…
After a while, I remembered that the Twenty Eleven theme has a nice Helvetica Neue font by default in its Visual Editor. So, like any good WordPress developer, I decided I would dig into it and see what I could find. Lo and behold, Firebug revealed a different CSS file being referenced by the Visual editor called editor-style.css located in the root of the theme folder. Here’s where the magic begins.
Step One: Add Your Own editor-style.css File
What I usually do is duplicate the existing style.css file in my theme and rename it editor-style.css. Then I view a page in the visual editor to see if anything doesn’t look right.
Sometimes you’ll get a background image (if it was applied to the body tag) or other extraneous bits from the styling that you don’t want in the visual editor. Take a moment to go through and remove these and other unneeded CSS (like widget styling, etc.) from the file.
Step Two: Tell WordPress to look for the editor-style.css file
Just adding the editor-style.css file to your theme folder will not make the change on its own. You need to add the following code (again
stolen borrowed from Twenty-Eleven) to your functions.php file.
// Styling the visual editor with editor-style.css to match the theme style. add_editor_style();
Save your changes and reload your editor and you’re done! In two easy steps, your Visual Editor should now be pulling in the styling form the front end of your web site.
Nifty, huh? And now truly WYSIWIG.
The best part? No more having to explain why the font doesn’t look the same!