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 why. It’s not exactly a modern font. 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, for whatever reason.
Getting Georgia out of your Visual Editor
The key to liberating your visual editor from the travesty of Georgia is to create a file that defines the styling that’s used. This file is called editor-style.css and it’s not part of the default WordPress installation. It’s theme-based. But just two quick steps will allow you to be rid of this problem once and for all.
Step One: Add Your Own editor-style.css File
What I usually do is create a file in my child theme folder called editor-style.css. Then I copy and paste the typography section of the existing style.css file in my theme into that file and save it. I’ll grab the styling for paragraphs, headings, blockquotes, buttons, etc… anything that would show up in the content area.
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 to your functions.php file to tell WordPress to look for changes you just added.
[sourcecode language=”php”]
// Styling the visual editor with editor-style.css to match the theme style.
add_editor_style();
[/sourcecode]
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!
Nice one, Nathan. That’s something I’ve been thinking about for a while, and you’ve saved me some time. WordPress newbies never get that without explanation.
Glad you found it helpful Janie! Let us hear how it goes when you implement it for a client!
I haven’t even finished reading this and I’m excited about this. I knew it would be possible and is particularly helpful for clients.
Ooh rah! Thanks for even more great info, Nathan!
This is a nice way of doing it.
Have you tinkered with any front-end editing plugins or hacks? That’s what I’m really trying to get nailed down.
How to make TyneMCE looks like same wordpress? with word count
Mariela, I’ve sent you an email.
Bloody hell, you’ve just saved my life 🙂
I did exactly as you said to do. I created a new file, I named it editor-style.css and then copied everything from style.css over to it and saved it.
I copied the code you have provided and I put it at the top for line 1 and 2. saved it.
I go to edit a page and it still shows up in that god awe-full editing font what ever it is. I can use Tiny to change he font to Verdana but as soon as I hit enter to start a new line it goes back to that same crappy font. I’m so fricken frustrated with all of this right now I could cry. Why don’t they just make it so we can see the same font in the editor as we have on our web page? Anything I type in the editor does fortunately come on on my web page with Verdana, but not in the editor. Extremely frustrated.
Michael, I understand your frustration. The answer to why WordPress is designed this way is that the font shown on the front end will change from theme to theme. The backend editor, however, is based on simply editing content. Styling is done after the fact. This is really a better approach in the long run as it makes it easier to change themes in the future since your content doesn’t have any embedded styles.
I’m happy to help you if you’re still having issues, but we would need to set up some kind of hourly consulting arrangement.
Do you know how to edit the layout of the post-new.php? How the boxes are layed out OR the content inside the boxes?
That’s likely going to depends on your theme and how it handles things. Your theme may have options to control this or you may have to edit your page template directly.
Also, how can I do what you just did here (pull the style) but then make the editor text dark black (just in editor, not on front end)?
You can edit the editor-style.css just as you would any other css file to add the styling you want. It will only show up in the editor.