`font-weight` was changed to 300, text is difficult to read and inconsistent

This change is live right now and seems to have been applied no more than 20 minutes ago.

There have been no other typeface changes, so bold text is too bold now and code isn’t as thin as body text.

When reloading a page, the text is normal, then becomes thin after a moment, as if it were being set by a script when the page finishes loading or by a late-loading stylesheet.

Code

Before

After

5 Likes

Thank you for the report! Our team will look into this.

No changes were made to styling yesterday, were you seeing this before?

1 Like

This started happening sometime after I opened the first tab and before I opened the second tab in the before/after images in the OP. I did not see this happen before then.

Specifically, I opened the New section in a new tab, which looked like the screenshot labeled Before.
I then opened a few threads/links from there in a new tab, each of which had the font weight issue.
After this, I opened the New section in another tab specifically to check whether this is really happening.

In that time, I did not intentionally or knowingly perform any action related to theming, and only opened links.

With this change came a few layout changes, such as the DevForum logo at the top left moving slightly to the right and a footer being added to all pages. I assumed these were intentional and the font weight change was unintentional.

I was on an old version of Firefox on xfce on Arch Linux. Between creating this thread and posting this reply, I have upgraded my browser and system and the issue persists. (I will have to verify whether this still happens when logged out of the devforum)

When I open devforum.roblox.com on a mobile device (i.e. not this browser, not this device), the styling is normal.

I would like to highlight that the font weight changes as soon as the page loads and is normal during loading.

This is the style of the body as seen in the Inspector:


Computed says that the weight comes from an inline style.
Specifically the one that looks like this:

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after {
  box-sizing: inherit;
}
strong, b {
  font-weight: 800;
}
body {
  src: url(https://d348twzf7a8p5.cloudfront.net/font/6d664816f1213208f8132c37b83ce6ef.woff2) format('woff2'), url(https://d348twzf7a8p5.cloudfront.net/font/30fc8c0bd07122c4d2736e20bf17f245.woff) format('woff');
  color: #FFFFFF;
  margin: 0;
  font-size: 14px;
  font-style: normal;
  font-family: HCo Gotham SSm;
  font-weight: 300;
  line-height: 140%;
  font-display: swap;
  letter-spacing: 0.15px;
  background-color: #1D1D1D;
}
@media print {
  body {
    background-color: #FFFFFF;
  }
}
body::backdrop {
  background-color: #1D1D1D;
}
@font-face {
  font-family: HCo Gotham SSm;
  src: url(https://d348twzf7a8p5.cloudfront.net/font/6d664816f1213208f8132c37b83ce6ef.woff2) format('woff2'), url(https://d348twzf7a8p5.cloudfront.net/font/30fc8c0bd07122c4d2736e20bf17f245.woff) format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: HCo Gotham SSm;
  src: url(https://d348twzf7a8p5.cloudfront.net/font/76ca9edf99ced5d7e13395e02da9e030.woff2) format('woff2'), url(https://d348twzf7a8p5.cloudfront.net/font/9e7201c2e0badfd5b0f2a5d0716f4849.woff) format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: HCo Gotham SSm;
  src: url(https://d348twzf7a8p5.cloudfront.net/font/0db24f7f760d4a5881ce835d302995c0.woff2) format('woff2'), url(https://d348twzf7a8p5.cloudfront.net/font/8ff97095f39bcf0ab79c00e46ceb659c.woff) format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: Fira Mono;
  src: url(https://d348twzf7a8p5.cloudfront.net/font/08b283aa43aba936400a2e133c714bf5.woff2) format('woff2'), url(https://d348twzf7a8p5.cloudfront.net/font/290dbae9f31383746f5ca9b2785d85b7.woff) format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

Disabling the font-weight (from the checkbox that the CSS viewer provides) reverts the weight to what it was before the change in question.

The stylesheet can be found in element #data-preloaded, which contains a giant hunk of data in its data-preloaded attribute, including this style. It looks like this data is processed and the style in there is added to the page when the page finishes loading.
That stylesheet is to blame.

This is still happening.

I had installed uMatrix on my browser yesterday and whitelisted doy2mn9upadnk.cloudfront.net to make the DevForum work.
On the other hand, the script that applies the above-mentioned style is hosted on d348twzf7a8p5.cloudfront.net.

Therefore, blocking that domain is an effective workaround for this issue.

This is not a good solution, you’re haphazardly blocking domains that web resources are loaded from. There is no guarantee your setup will keep working as devforum is updated over time.

2 Likes

I’ve noticed this for the first time 15 minutes ago at Recent and Upcoming Changes to Roblox Web APIs.
The text is so thin, I struggle to read it.

I’ve had to switch my DevForum theme to “Roblox Dark”, which uses a different font that does not have the readability issue. I hadn’t touched my theme settings before this, but it was on “Light”, so I guess that’s the default.

2 Likes

Are you still experiencing the issue? There was a font change that has since been reverted.

2 Likes

The issue is now resolved when I switch back to “Light” theme. However, I’m going to keep it on “Roblox Dark” because it looks quite nice :slight_smile:

I can still reproduce this issue on the same OS and browser as earlier (SystemRescue Linux on Firefox):

Note how the font weight is reasonable before the page finishes loading and the new style is applied by the script.

This also happens on Firefox on Windows, provided that I unblock the script responsible for this. However, the reduced (from 400 to 300?) font-weight has no visual effect on Windows, as it seems.