Twenty Twelve: add Google Font support to editor stylesheet

[miqrogroove]

Swapping between the editor and a preview, it occurred to me that they aren't even using the same font now. It's causing a bit of a content width mismatch, but the underlying problem appears to be with editor-style.css.

Found in 3.5-beta3-22637 using Chrome 23 on XP.

The preview and editor are both showing

• font-family: 'Open Sans', Helvetica, Arial, sans-serif;
• font-size: 14px;

However, the editor appears to be using Helvetica, whereas the preview is using 'Open Sans'.

[SergeyBiryukov]

Confirmed the difference. Twenty Twelve currently loads Open Sans on front end only.

Helvetica actually looks similar, but it's a bit more narrow, so there's indeed a content width mismatch.

[miqrogroove]

The preview version has an extra style sheet being loaded from fonts.googleapis.com.

My guess is "Open Sans" is not available in the editor unless the user has the font installed locally. This would explain why it works for some users.

[lancewillett]

We talked about this during development, and decided not to match the font in the editor since it was another API call to Google Fonts.

Suggest "wontfix" for this ticket.

[MikeHansenMe]

I think the problem has to do with font size. In the editor the font size is 1rem and on the post it is 100%. If you change it on the front to 1rem your get the same line breaks in the editor and on the post.

[SergeyBiryukov]

From my testing, changing the font size on front end or in the editor doesn't actually help much in terms of consistent line breaks. I agree with the wontfix.

[MikeHansenMe]

Went back to reproduce the change again and realized I had turned off Open Sans via firebug. I agree with wontfix. The theme is responsive anyways and there is no way to make it match up all the time.

[kovshenin]

I disagree :) I don't think it's about the font size, or the weight, or the letter spacing, or height, or content width or whatever. It's about Open Sans and Helvetica being two different font families, even though they look alike. It's rather easy to add Open Sans to TinyMCE and there's a working patch in #23467.

@lancewillet: do you think we can give this a second thought?

[lancewillett]

Note: s/lancewillet/lancewillett/ :)

I'm open to discussion, yes. Please add a patch here.

[kovshenin]

Sorry Lance :)

22499.diff​ wraps the font URL retrieval into a new twentytwelve_get_font_url function and uses it in a mce_css filter, in addition to wp_enqueue_scripts.

[kovshenin]

#23467 was marked as a duplicate.

[lancewillett]

Noting #23551 for Twenty Thirteen editor styles (open task).

[lancewillett]

Noting we should update this patch to remove the 'twentytwelve_get_font_url' filter it is unnecessary -- giving only one point to remove the custom font. Simpler.

[kovshenin]

Refreshed in 22499.2.diff​

[lancewillett]

In 23713:

Twenty Twelve: load our special Google Font in the visual editor to improve user experience. Props to the Konstanthemes: kovshenin and obenland.

Closes #22499. See also r23672.