WordPress.org

Make WordPress Core

#22499 closed defect (bug) (fixed)

Twenty Twelve: add Google Font support to editor stylesheet

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

Description

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 17 months ago.
22499.2.diff (3.8 KB) - added by kovshenin 16 months ago.
22499.3.diff (4.4 KB) - added by obenland 16 months ago.

Download all attachments as: .zip

Change History (19)

comment:1 SergeyBiryukov20 months 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.

comment:2 miqrogroove20 months ago

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.

comment:3 lancewillett20 months 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.

comment:4 MikeHansenMe20 months 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.

comment:5 SergeyBiryukov20 months 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.

comment:6 MikeHansenMe20 months 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.

comment:7 lancewillett20 months ago

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

comment:8 kovshenin17 months 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.

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

Version 0, edited 17 months ago by kovshenin (next)

comment:9 lancewillett17 months 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.

kovshenin17 months ago

comment:10 kovshenin17 months 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.

comment:11 kovshenin17 months ago

#23467 was marked as a duplicate.

comment:12 lancewillett17 months ago

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

comment:13 lancewillett16 months 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.

comment:14 lancewillett16 months ago

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

kovshenin16 months ago

comment:15 kovshenin16 months ago

  • Keywords needs-refresh removed

Refreshed in 22499.2.diff

obenland16 months ago

comment:16 lancewillett16 months 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.