search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
730 stars 63 forks source link

help.codecademy.com - Incorrect font displayed for "Featured Articles" section's title #63749

Open softvision-oana-arbuzov opened 3 years ago

softvision-oana-arbuzov commented 3 years ago

URL: https://help.codecademy.com/hc/en-us

Browser / Version: Firefox 86.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Something else Description: Incorrect font displayed for "Featured Articles" section's title. Steps to Reproduce:

  1. Navigate to https://help.codecademy.com/hc/en-us .
  2. Reach the "Featured Articles" section.
  3. Observe the fonts used in "Featured Articles" section's title.

Expected Behavior: Correct font is displayed (Nunito Sans).

Actual Behavior: Incorrect font is displayed (Times New Roman).

Notes:

  1. Screenshot attached.
  2. Chrome and Edge are displaying similar fonts between them (font - Nunito Sans), while Firefox displays the default font - Times New Roman.
  3. The issue is also reproduced in "Browse by category" section title.

Watchers: @softvision-oana-arbuzov @cipriansv

View the screenshot Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

wisniewskit commented 3 years ago

Actually, the font they're specifying for those headers is "Regular Bold", not Nunito Sans:

.section h2 {
    font-family: "Regular Bold";
    font-weight: bold;
    margin-bottom: 40px;
    text-align: left;
}

@font-face {
 font-family: Regular Bold;
 src: url(//theme.zdassets.com/theme_assets/1030455/50106ddcdcc071d4e3d00a78b4b525f1b698bcc5.woff2) format("woff2"), url($assets-regularbold-regular-webfont-eot) format("woff");
 font-weight: 400;
 font-style: normal
}

And it turns out that this is only an issue on nightly builds; Regular Sans is actually used on regular release builds of Firefox. But that Regular Sans woff2 font has bugs which cause it to not pass strict font validation in nightly builds unless you disable the about:config option gfx.downloadable_fonts.otl_validation:

Layout: bad start coverage index. (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)
Layout: Failed to parse backtrack coverage 0 in chain context format 3 (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)
Layout: Failed to parse chaining context format 3 subtable (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)
Layout: Failed to parse lookup subtable 5 (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)
Layout: Failed to parse subtable 0 (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)
Layout: Failed to parse lookup 20 (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)
GSUB: Failed to parse lookup list table (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)
GSUB: Failed to parse table (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)rejected by sanitizer (font-family: "Regular Bold" style:normal weight:400 stretch:100 src index:0)

Also, that $assets-regularbold-regular-webfont-eot part looks suspiciously like a templating bug on CodeAcademy's end, but it does not seem to affect anything.

It might be worth reaching out to zdnet to fix the bugs in that font for the sake of nightly users, which is being served from https://theme.zdassets.com/theme_assets/1030455/50106ddcdcc071d4e3d00a78b4b525f1b698bcc5.woff2