STCOM-409: Use variable version of source-sans font (#765)

.storybook/config.js

@@ -2,7 +2,6 @@ import React, { Component, Fragment } from 'react';
 import { configure, addDecorator } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import { initializeRTL } from 'storybook-addon-rtl';
-import 'typeface-source-sans-pro';
 import '../lib/global.css';
 
 

lib/fonts.css

@@ -0,0 +1,168 @@
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Roman.woff2') format('woff2-variations');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Roman.woff2') format('woff2-variations');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Roman.woff2') format('woff2-variations');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Roman.woff2') format('woff2-variations');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Roman.woff2') format('woff2-variations');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Roman.woff2') format('woff2-variations');
+  font-weight: 900;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Italic.woff2') format('woff2-variations');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Italic.woff2') format('woff2-variations');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Italic.woff2') format('woff2-variations');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Italic.woff2') format('woff2-variations');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Italic.woff2') format('woff2-variations');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro Variable';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/SourceSansVariable-Italic.woff2') format('woff2-variations');
+  font-weight: 900;
+}
+
+/* fallbacks */
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-ExtraLight.woff') format('woff');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Light.woff') format('woff');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Regular.woff') format('woff');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Semibold.woff') format('woff');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Bold.woff') format('woff');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: normal;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Black.woff') format('woff');
+  font-weight: 900;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-ExtraLight-Italic.woff') format('woff');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Light-Italic.woff') format('woff');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Italic.woff') format('woff');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Semibold-Italic.woff') format('woff');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Bold-Italic.woff') format('woff');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  font-style: italic;
+  src: url('../assets/fonts/SourceSansPro/fallbacks/SourceSansPro-Black-Italic.woff') format('woff');
+  font-weight: 900;
+}

lib/global.css

@@ -1,3 +1,4 @@
+@import "fonts.css";
 @import "normalize.css";
 @import "variables";
 
@@ -10,7 +11,7 @@ html {
   height: 100%;
   margin: 0;
   font-family:
-    'Source Sans Pro',
+    'Source Sans Pro Variable',
     -apple-system,
     BlinkMacSystemFont,
     "Segoe UI",
@@ -40,6 +41,37 @@ html {
   -webkit-font-smoothing: antialiased;
 }
 
+@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+  body,
+  html {
+    font-family:
+      'Source Sans Pro',
+      -apple-system,
+      BlinkMacSystemFont,
+      "Segoe UI",
+      Noto,
+      DroidSans,
+      Roboto,
+      Oxygen,
+      Ubuntu,
+      Cantarell,
+      "Open Sans",
+      "Helvetica Neue",
+      Helvetica,
+      Arial,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Adobe Arabic",
+      "Myriad     abic",
+      "ヒラギノ角ゴ Pro W3",
+      "Hiragino Kaku Gothic Pro",
+      メイリオ    Meiryo,
+      "ＭＳ Ｐゴシック",
+      sans-serif;
+  }
+}
+
 a {
   color: var(--color-link);
   text-decoration: none;

package.json

@@ -100,8 +100,7 @@
     "react-router-dom": "^4.1.1",
     "react-tether": "^1.0.1",
     "react-transition-group": "^2.2.1",
-    "tai-password-strength": "^1.1.1",
-    "typeface-source-sans-pro": "^0.0.44"
+    "tai-password-strength": "^1.1.1"
   },
   "peerDependencies": {
     "@folio/stripes-core": "^2.13.0"