Local Segoe UI Semilight not working on Chrome

[mikewheaton]

On Windows systems where the Segoe UI font is installed locally, we prefer using it to downloading the web fonts for performance reasons. However, we've recently noticed that Segoe UI Semilight isn't working correctly in Chrome. See this CodePen demo for an example that can be tested across browsers.

I've filed bug 710539 on Chromium in the hopes that this can be fixed, as it's working in all of the other major browsers. In the meantime, the options I see are to:

• Leave it as is. We get a performance boost on Windows, but we lose the Semilight weight on Chrome.
• Go back to always using web fonts. There's a slight performance penalty (the same as we have on all non-Windows systems) but we have all of the weights available consistently.

Thoughts?

[mikewheaton]

Found a better option. If we define a new @font-face for local Segoe UI, we can ensure that IE/Edge use semilight like so:

@font-face {
  font-family: 'Segoe UI Local';
  src: local('Segoe UI Semilight');
  font-weight: 300;
  font-style: normal;
}

This means we can have a single font-family, Segoe UI Local, which selects the correct font based on the font-weight. Systems that don't have a local copy will fall back to the web font, which will be included next in the font stack like:

font-family: 'Segoe UI Local', 'Segoe UI Web (West European)';

The only remaining problem is Chrome on Windows, which will incorrectly use the local copy of Segoe UI with light instead of semilight. I don't see a way to target semilight specifically (we no longer have a separate class for each weight) but we can use a CSS hack to target Chrome and prevent it from using the local font:

body:not(*:root) {
  font-family: 'Segoe UI Web (West European)';
}

Here's a CodePen of the final result. I've also added a grey background color whenever the browser hack is in use. It's working well across our browser matrix. The only unfortunate part is that Chrome and Opera won't use local fonts, even for the weights that could work. I don't see a way around this without completely changing how we deal with font families and weights. While not perfect, it's still a performance improvement over using the web fonts everywhere and doesn't add a lot of complexity.