Automattic / Automattic/custom-fonts

Font weight appears differently in Customizer and on the front end

Open
#286 4 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
PHP
Stars
4
Forks
2
PR merge metrics
No merged PRs in 30d

Description

Moving from 1895-wpcom-premium-themes
----

The menu font appears thinner in the Customizer preview than on the front end.

To replicate:
1. In the Customizer's Menus panel, assign a custom menu to the Main Menu
2. In the Customizer's Fonts panel, choose Lato or Museo Slab for Headings. (I also spot-checked Merriweather. The issue doesn't seem to be font-specific.)
3. Observe how in the Customizer's preview pane, the headings (including menu items) are thin.
4. Save changes and exit the Customizer.

**Result:** The main menu font is now thicker than it was in the Customizer.

**Expected:** The menu font weight should be the same in the Customizer and on the front end.

**Test Site Screenshot - Customizer**
![image](https://user-images.githubusercontent.com/4550351/39556716-b50fea2a-4ec5-11e8-9739-d0790b585c1d.png)

**Test Site Screenshot - Front End**
![image](https://user-images.githubusercontent.com/4550351/39556721-bfd4b530-4ec5-11e8-9320-b48f01765bc2.png)

Looking at which weights are actually enqueued on the front-end it's no wonder - looks like we enqueue only regular, bold, italic, and bold italic. This makes sense too, since there's no choice in the customizer to select font weight. On the other hand, Customizer enqueues all the fonts in all the widths. That's why it's possible to apply font-weight: 200 from the theme's style.css in preview.

This issue was reported in Gema theme, but affect any theme that uses non-standard font-weight.

Would it be possible to enqueue the same font-widths on the front-end and in Customizer preview?

Possibly related to #269

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the mismatch using the Customizer's Menus and Fonts panels with Lato or Museo Slab, then inspect the theme's style.css and the font enqueue paths used by the preview and front end. Compare the loaded font weights in both contexts; done means the menu renders at the same weight before and after saving.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, wordpress
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.