New Blackbaud Sans font displays as condensed in Safari

[Blackbaud-PaulCrowder]

Expected behavior

In SKY UX applications using SKY UX 2.0.0-rc.7 or later, the standard-width Blackbaud Sans font should be displayed for elements where "Blackbaud Sans" is specified for the font-family CSS rule in all supported browsers.

Actual behavior

When visiting a SKY UX SPA using SKY UX 2.0.0-rc.8 in Safari, most text is displayed as Blackbaud Sans Condensed on elements where "Blackbaud Sans" is specified for the font-family CSS rule. This does not happen in Chrome or Firefox on macOS.

Steps to reproduce

Navigate to https://developer.blackbaud.com/skyux2/ in Safari (either on macOS or iOS) and notice that most of the text is using the condensed font. Note that elements with bold text do display the standard-width Blackbaud Sans font, such as the navbar and the text underneath the three large buttons at the bottom of the home page. If you inspect those elements and change their font-weight CSS values to 500 or lower, the fonts will revert to condensed.

Plunker

Visit this boilerplate alert example in Safari which also exhibits this behavior:
https://plnkr.co/edit/oKGxmV9DXqd67e0pB6v0?p=preview

[Blackbaud-PaulCrowder]

This appears to be because of how we're specifying the condensed font for the font-stretch: condensed which is not supported by Safari. Since the condensed version is the last one specified, it overrides the previously-defined Blackbaud Sans font and substitutes the condensed version.

https://github.com/blackbaud/skyux2/blob/master/src/scss/_fonts.scss#L71

Browser support for font-stretch:

http://caniuse.com/#feat=css-font-stretch

[Blackbaud-PaulCrowder]

9ed0ed3

[Blackbaud-PatrickOFriel]

In 2.0.0-rc.9