Automattic / Automattic/custom-fonts
Typekit fonts appear differently in Customizer than on front end
- Dominant language
- PHP
- Stars
- 4
- Forks
- 2
- PR merge metrics
- No merged PRs in 30d
Description
Some Typekit fonts are appearing correctly in the Customizer, but not on the front end. I've tested with Bree, Museo Sans and Chaparral Pro and various themes.
To replicate:
1. Go to Customize > Fonts and assign a Tyepkit font as the Headings or Base font.
2. Publish the Customizer changes.
3. View the front end of the site.
Result:
The Typekit fonts are shown correctly in the Customizer preview, but are not shown correctly when viewing the front end of the site. Often, the generic serif or sans-serif font is shown on the front end instead of the Typekit font.
Expected:
The Typekit font to appear exactly the same in the Customizer preview and the front end of the site.
Bree in Customizer (font is correct):

Bree on the front end (font is incorrect and doesn't match Customizer preview):

The Inspector shows different font-families being assigned in the Customizer vs the front end.
We've seen this happen on AT sites and can often fix it by running `option delete jetpack_fonts` in CLI and re-selecting the fonts in the Customizer, but that can't be done on simple sites.
Originally reported in 8230618-hc and confirmed on the user's site: https://newcatholicreligionteacher.wordpress.com
Reproduced on a test site: https://julesthenoo.wordpress.com/
Possibly related to: https://github.com/Automattic/custom-fonts/issues/286
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the issue in the Customizer and on the front end with Bree, Museo Sans, or Chaparral Pro, then compare the assigned font families in the Inspector. Read the related custom-fonts issue #286 and investigate how the jetpack_fonts option affects the two rendering paths. Done means the selected Typekit font appears identically in the preview and on the published front end without deleting the option manually.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- php, wordpress
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100