Define a local web font and prevent Chrome/Opera from using it

[mikewheaton]

Fixes #960 by replacing 'Segoe UI' with a new web font, 'Segoe UI Local', that is defined to only use local fonts. This fixes a bug in IE/Edge where the correct weight was not being applied for Semilight. It also adds an override that targets Chrome and Opera, making those browsers use the web font even where the local font is available. This fixes a bug where those browsers always showed Light instead of Semilight.

See this CodePen for a simplified example.

Behavior across browsers:

• macOS: Safari (web font, override so doesn't attempt local)
• macOS: Chrome (web font, override so doesn't attempt local)
• macOS: Firefox (web font, fallback after attempting local)
• Windows 10: Edge (local font)
• Windows 10: IE11 (local font)
• Windows 10: Firefox (local font)
• Windows 10: Chrome (web font, override so doesn't attempt local)
• Windows 10: Opera (web font, override so doesn't attempt local)

[Jahnp]

Approved

Cool solution--thanks for demoing the behavior.

[mikewheaton]

We've decided to go with the approach in #966 for now, as it's the safest way to ensure that the correct fonts are shown. We'll be investigating methods of loading local fonts in our products and will bring that functionality back to Fabric when it's been tested thoroughly in production.

While this approach worked in simple scenarios, we're concerned that it will conflict with others like language-specific font stacks and custom font-family overrides because the CSS hack relies on specificity. We also haven't had a chance to thoroughly test this approach in real products, and we'd rather err on the side of caution (even if performance takes a small hit) than risk breaking basic functionality like showing the correct font weight.