Make WordPress Core

Opened 12 years ago

Closed 11 years ago

#22499 closed defect (bug) (fixed)

Twenty Twelve: add Google Font support to editor stylesheet

Reported by: miqrogroove's profile miqrogroove Owned by: lancewillett's profile lancewillett
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.5
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:


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'.

Attachments (3)

22499.diff (3.8 KB) - added by kovshenin 11 years ago.
22499.2.diff (3.8 KB) - added by kovshenin 11 years ago.
22499.3.diff (4.4 KB) - added by obenland 11 years ago.

Download all attachments as: .zip

Change History (19)

#1 @SergeyBiryukov
12 years ago

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.

#2 @miqrogroove
12 years ago

The preview version has an extra style sheet being loaded from

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.

#3 @lancewillett
12 years ago

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.

#4 @MikeHansenMe
12 years ago

  • Cc mdhansen@… added

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.

#5 @SergeyBiryukov
12 years ago

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.

#6 @MikeHansenMe
12 years ago

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.

#7 @lancewillett
12 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from new to closed

#8 @kovshenin
11 years ago

  • Cc kovshenin added

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.

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

Last edited 11 years ago by kovshenin (previous) (diff)

#9 @lancewillett
11 years ago

  • Cc obenland added
  • Milestone set to 3.6
  • Resolution wontfix deleted
  • Status changed from closed to reopened

Note: s/lancewillet/lancewillett/ :)

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

11 years ago

#10 @kovshenin
11 years ago

  • Keywords has-patch added

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.

#11 @kovshenin
11 years ago

#23467 was marked as a duplicate.

#12 @lancewillett
11 years ago

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

#13 @lancewillett
11 years ago

  • Keywords needs-refresh added

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.

#14 @lancewillett
11 years ago

  • Summary changed from Twenty Twelve editor-style Needs Work to Twenty Twelve: add Google Font support to editor stylesheet

11 years ago

#15 @kovshenin
11 years ago

  • Keywords needs-refresh removed

Refreshed in 22499.2.diff

11 years ago

#16 @lancewillett
11 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from reopened to closed

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.

Note: See TracTickets for help on using tickets.