Try to use the system Segoe UI by default instead of downloading a we…

…b font (microsoft#4206) * By default, use the system segoe-ui * Fix it more consistently * Rush change * Snapshot updates * Make it work for IE and Edge as well. * Update snapshots * Add some snapshots for the before state of createFontStyles * Refactor #1 * Update default font styles * Another refactor * Remove unused import * Update snapshot
kysedate · Mar 11, 2018 · a384191 · a384191
1 parent fa97fa9
commit a384191
Show file tree

Hide file tree

Showing 19 changed files with 367 additions and 69 deletions.
diff --git a/common/changes/@uifabric/styling/chrisgo-system-font-default_2018-03-07-19-33.json b/common/changes/@uifabric/styling/chrisgo-system-font-default_2018-03-07-19-33.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "By default, try to use the system font before downloading a web font",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "christianjordangonzalez@gmail.com"
+}
diff --git a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -70,7 +70,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 100%;
@@ -171,7 +171,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 100%;

diff --git a/...fice-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/...fice-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -163,7 +163,7 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -242,7 +242,7 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -519,7 +519,7 @@ exports[`ActivityItem renders with a single persona correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -651,7 +651,7 @@ exports[`ActivityItem renders with a single persona correctly 1`] = `
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             color: #666666;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 10px;
             font-weight: 400;
           }
@@ -673,7 +673,7 @@ exports[`ActivityItem renders with an icon correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -741,7 +741,7 @@ exports[`ActivityItem renders with an icon correctly 1`] = `
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             color: #666666;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 10px;
             font-weight: 400;
           }
@@ -763,7 +763,7 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -1055,7 +1055,7 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             color: #666666;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 10px;
             font-weight: 400;
           }

diff --git a/...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -213,7 +213,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
                     box-sizing: border-box;
                     cursor: pointer;
                     display: inline-block;
-                    font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                     font-size: 14px;
                     font-weight: 400;
                     height: 32px;

diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Button renders ActionButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 40px;
@@ -124,7 +124,7 @@ exports[`Button renders CommandBarButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         min-width: 40px;
@@ -270,7 +270,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: auto;
@@ -366,7 +366,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
               color: #666666;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 12px;
               font-weight: 400;
               line-height: 100%;
@@ -399,7 +399,7 @@ exports[`Button renders DefaultButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 32px;
@@ -497,7 +497,7 @@ exports[`Button renders IconButton correctly 1`] = `
         box-sizing: border-box;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 32px;

diff --git a/...office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/...office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
               {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
-                font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                 font-size: 12px;
                 font-weight: 400;
               }

diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           color: #333333;
           cursor: text;
           display: block;
-          font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 14px;
           font-weight: 400;
           height: 32px;
@@ -173,7 +173,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
             color: #666666;
             cursor: default;
             display: inline-block;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 12px;
             font-weight: 400;
             height: 32px;

diff --git a/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`Dialog renders Dialog correctly 1`] = `
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             color: #333333;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 21px;
             font-weight: 100;
             margin-bottom: 0;

diff --git a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap
@@ -150,7 +150,7 @@ exports[`Facepile renders Facepile correctly 1`] = `
               box-sizing: border-box;
               cursor: pointer;
               display: inline-block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               outline: transparent;

diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
@@ -94,7 +94,7 @@ exports[`Nav renders Nav correctly 1`] = `
                       color: #333333;
                       cursor: pointer;
                       display: block;
-                      font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                       font-size: 14px;
                       font-weight: 400;
                       height: 36px;

diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
               color: #333333;
               cursor: pointer;
               display: inline-block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 40px;
@@ -133,7 +133,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
               color: #333333;
               cursor: pointer;
               display: inline-block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 40px;

diff --git a/...ges/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/...ges/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 32px;

diff --git a/...s/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/...s/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
@@ -167,7 +167,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               color: #333333;
               cursor: default;
               display: block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 50%;
@@ -272,7 +272,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               color: #333333;
               cursor: default;
               display: block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 50%;