stripe.com - Incorrect font in the editor from "Designed for developers" section

[digitarald]

URL: https://stripe.com/

Browser / Version: Firefox 80.0 Operating System: Mac OS X 10.15 Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items are misaligned Steps to Reproduce: Scroll down to "Designed for developers" and wait for the animation to load.

Firefox shows the wrong font for the animation and positions the caret+menus off to the right.

Chrome shows code-animation with the right font and caret positioning.

Browser Configuration

• gfx.webrender.all: false
• gfx.webrender.blob-images: true
• gfx.webrender.enabled: true
• image.mem.shared: true
• buildID: 20200706095144
• channel: nightly
• GPUs:
  • active: true
  • description:
  • deviceID: 0x3e9b
  • vendorID: 0x8086
  • driverVersion:
• hasTouchScreen: false
• mixed active content blocked: false
• mixed passive content blocked: false
• tracking content blocked: false

View console log messages

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report @digitarald , I was able to reproduce the issue.

Tested with: Browser / Version: Firefox Nightly 80.0a1 (2020-07-07) Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[reinhart1010]

Worksforme in Firefox Stable 78.0.1, Linux (Ubuntu 20.04).

I guess this is related to font validation in Nightly.

[wisniewskit]

Yes, this is related to their SourceCodePro webfont not passing Firefox's font sanitizer, which is on in the nightly builds. According to the devtools console:

15:59:01.657 downloadable font: Layout: DFLT script doesn't satisfy the spec. DefaultLangSys is NULL (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:0) source: https://b.stripecdn.com/mkt/assets/1a930247.woff2
15:59:01.657 downloadable font: Layout: Failed to parse script table 0 (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:0) source: https://b.stripecdn.com/mkt/assets/1a930247.woff2
15:59:01.657 downloadable font: GSUB: Failed to parse script list table (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:0) source: https://b.stripecdn.com/mkt/assets/1a930247.woff2
15:59:01.657 downloadable font: GSUB: Failed to parse table (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:0) source: https://b.stripecdn.com/mkt/assets/1a930247.woff2
15:59:01.657 downloadable font: rejected by sanitizer (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:0) source: https://b.stripecdn.com/mkt/assets/1a930247.woff2
15:59:01.993 downloadable font: Layout: DFLT script doesn't satisfy the spec. DefaultLangSys is NULL (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:1) source: https://b.stripecdn.com/mkt/assets/ac6713d5.woff
15:59:01.993 downloadable font: Layout: Failed to parse script table 0 (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:1) source: https://b.stripecdn.com/mkt/assets/ac6713d5.woff
15:59:01.993 downloadable font: GSUB: Failed to parse script list table (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:1) source: https://b.stripecdn.com/mkt/assets/ac6713d5.woff
15:59:01.993 downloadable font: GSUB: Failed to parse table (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:1) source: https://b.stripecdn.com/mkt/assets/ac6713d5.woff
15:59:01.993 downloadable font: rejected by sanitizer (font-family: "SourceCodePro" style:normal weight:500 stretch:100 src index:1) source: https://b.stripecdn.com/mkt/assets/ac6713d5.woff

I think the version of SourceCodePro on the Google Webfonts Helper page passes those checks, so that might be an route for Stripe to fix this.