Pages load with different fonts

juraj.masiar · January 14, 2019, 2:32pm

I’ve noticed for past few weeks (months?) that sometimes MDN page loads with strange looking font:

Refreshing page loads correct font:

Sounds like a bug, right? Or is this a feature where page loads faster first time because it doesn’t wait for the font to download?

Also where should I report this kind of bugs? There is a lot of repositories (79!) on github:

jswisher · January 14, 2019, 7:10pm

Maybe @schalkneethling can answer your core question. I know he’s been making changes to fonts on MDN.

Also where should I report this kind of bugs?

Issues for the MDN platform are tracked in Bugzilla. You can submit a bug report there.

schalkneethling · January 15, 2019, 10:35am

Hey @juraj.masiar

Thanks for reporting. This looks to working as designed. We use the font-display css property with the value of fallback for these fonts for performance reasons. That could sometimes mean that the loading of a specific font is abandoned if it takes to long to load. It might swap in later, or the browser can simply decide to abandon it altogether.

The reason it then loads on a refresh, is most likely because the font is cached, and thus loads almost instantly.

You can see the code here:

github.com

mozilla/kuma/blob/master/kuma/static/styles/base/fonts/opensans.scss

@font-face {
    font-family: 'Open Sans';
    font-display: 'fallback';
    src: url('#{$path-to-fonts}#{"OpenSans-Regular-webfont.woff2"}') format('woff2'),
         url('#{$path-to-fonts}#{"OpenSans-Regular-webfont.woff"}') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';
    font-display: 'optional';
    src: url('#{$path-to-fonts}#{"OpenSans-Semibold-webfont.woff2"}') format('woff2'),
         url('#{$path-to-fonts}#{"OpenSans-Semibold-webfont.woff"}') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Open Sans';

This file has been truncated. show original

And read more about the property here:

juraj.masiar · January 15, 2019, 11:52am

I was afraid of that

But even if it works as designed, something else is not well designed as I’m on MDN almost every day so these fonts should be well cached.

Also if someone asks me to name 3 pages that can be loaded with different font, I’m pretty sure I can name only one.

Maybe it’s just me but I find this inconsistency very annoying.

sphinx_knight · January 15, 2019, 12:04pm

I’ve also found that I get the fallback font on a slow/old machine much more. I didn’t analyze/report yet but I concur that I had inconsistencies between some pages for the same session

sheppy · January 16, 2019, 6:22pm

I think it would be nice if at least similar common fonts were used as the backup font; for instance, it seems obvious that the fallback for Zilla should be Courier or Courier New since they are similar typewriter-style faces. This at least would be a less jarring difference.