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
new file mode 100644
index 0000000000000..a96f71246a551
--- /dev/null
+++ 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"
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
index fc2bf3471f617..31a3fe9326de1 100644
--- 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/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
index 66f878bbda3b8..286b79f76ca97 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
+++ b/packages/office-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/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index c8203ad83af05..bb6e270d861e7 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/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
index c2803b1370a6b..442ee99480d23 100644
--- 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/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
index 0776b8f363c6d..004797c12984c 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
+++ b/packages/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
index fb135d862487e..330abb513c2b7 100644
--- 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
index 1d89aeb736a69..5735242152970 100644
--- 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
index c1be4d56cbdd8..8a5f3a93cddca 100644
--- 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
index 7434557381e4b..3da206e72ab4f 100644
--- 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
index 900e43e349f3e..264a0b9749676 100644
--- 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/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
index d6746105d91f8..a440cb5d7a379 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
+++ b/packages/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/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
index 00e7e210848b5..8ce88ee3d736a 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
+++ b/packages/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%;
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
index a633d7740fa85..836f6122dc63b 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -256,7 +256,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -441,7 +441,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -626,7 +626,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -815,7 +815,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -1000,7 +1000,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -1185,7 +1185,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -1370,7 +1370,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -1559,7 +1559,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -1744,7 +1744,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -1929,7 +1929,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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;
@@ -2114,7 +2114,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker 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/packages/styling/package.json b/packages/styling/package.json
index c18e10215de2f..a47757f08468c 100644
--- a/packages/styling/package.json
+++ b/packages/styling/package.json
@@ -13,7 +13,8 @@
     "build": "node ../../scripts/build.js",
     "clean": "node ../../scripts/clean.js",
     "start": "node ../../scripts/start.js",
-    "start-test": "node ../../scripts/start-test.js"
+    "start-test": "node ../../scripts/start-test.js",
+    "update-snapshots": "node ../../scripts/build.js jest -u"
   },
   "devDependencies": {
     "@types/webpack-env": "1.13.0",
diff --git a/packages/styling/src/styles/DefaultFontStyles.ts b/packages/styling/src/styles/DefaultFontStyles.ts
index 6e086a503ac93..cea5135d3e0a9 100644
--- a/packages/styling/src/styles/DefaultFontStyles.ts
+++ b/packages/styling/src/styles/DefaultFontStyles.ts
@@ -18,13 +18,17 @@ export const DefaultFontStyles: IFontStyles = createFontStyles(getLanguage());
 function _registerFontFace(
   fontFamily: string,
   url: string,
-  fontWeight?: IFontWeight
+  fontWeight?: IFontWeight,
+  localFontName?: string
 ): void {
   fontFamily = `'${fontFamily}'`;
 
+  const localFontSrc = localFontName !== undefined ? `local('${localFontName}'),` : '';
+
   fontFace({
     fontFamily,
     src:
+      localFontSrc +
       `url('${url}.woff2') format('woff2'),` +
       `url('${url}.woff') format('woff')`,
     fontWeight,
@@ -36,14 +40,15 @@ function _registerFontFaceSet(
   baseUrl: string,
   fontFamily: string,
   cdnFolder: string,
-  cdnFontName: string = 'segoeui'
+  cdnFontName: string = 'segoeui',
+  localFontName?: string
 ): void {
   const urlBase = `${baseUrl}/${cdnFolder}/${cdnFontName}`;
 
-  _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light);
-  _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight);
-  _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular);
-  _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold);
+  _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light, localFontName && localFontName + ' Light');
+  _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight, localFontName && localFontName + ' SemiLight');
+  _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular, localFontName);
+  _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold, localFontName && localFontName + ' SemiBold');
 }
 
 export function registerDefaultFontFaces(baseUrl: string): void {
@@ -58,7 +63,7 @@ export function registerDefaultFontFaces(baseUrl: string): void {
     _registerFontFaceSet(fontUrl, LocalizedFontNames.Greek, 'segoeui-greek');
     _registerFontFaceSet(fontUrl, LocalizedFontNames.Hebrew, 'segoeui-hebrew');
     _registerFontFaceSet(fontUrl, LocalizedFontNames.Vietnamese, 'segoeui-vietnamese');
-    _registerFontFaceSet(fontUrl, LocalizedFontNames.WestEuropean, 'segoeui-westeuropean');
+    _registerFontFaceSet(fontUrl, LocalizedFontNames.WestEuropean, 'segoeui-westeuropean', 'segoeui', 'Segoe UI');
     _registerFontFaceSet(fontUrl, LocalizedFontFamilies.Selawik, 'selawik', 'selawik');
 
     // Leelawadee UI (Thai) does not have a 'light' weight, so we override
diff --git a/packages/styling/src/styles/__snapshots__/fonts.test.ts.snap b/packages/styling/src/styles/__snapshots__/fonts.test.ts.snap
new file mode 100644
index 0000000000000..15a77d38d6077
--- /dev/null
+++ b/packages/styling/src/styles/__snapshots__/fonts.test.ts.snap
@@ -0,0 +1,247 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fonts tests creates the correct font styles for ar 1`] = `
+Object {
+  "large": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "17px",
+    "fontWeight": 300,
+  },
+  "medium": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "14px",
+    "fontWeight": 400,
+  },
+  "mediumPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "15px",
+    "fontWeight": 400,
+  },
+  "mega": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "72px",
+    "fontWeight": 100,
+  },
+  "small": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "12px",
+    "fontWeight": 400,
+  },
+  "smallPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "13px",
+    "fontWeight": 400,
+  },
+  "superLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "42px",
+    "fontWeight": 100,
+  },
+  "tiny": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "10px",
+    "fontWeight": 600,
+  },
+  "xLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "21px",
+    "fontWeight": 100,
+  },
+  "xSmall": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": 400,
+  },
+  "xxLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "28px",
+    "fontWeight": 100,
+  },
+}
+`;
+
+exports[`fonts tests creates the correct font styles for en 1`] = `
+Object {
+  "large": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "17px",
+    "fontWeight": 300,
+  },
+  "medium": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "14px",
+    "fontWeight": 400,
+  },
+  "mediumPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "15px",
+    "fontWeight": 400,
+  },
+  "mega": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "72px",
+    "fontWeight": 100,
+  },
+  "small": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "12px",
+    "fontWeight": 400,
+  },
+  "smallPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "13px",
+    "fontWeight": 400,
+  },
+  "superLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "42px",
+    "fontWeight": 100,
+  },
+  "tiny": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "10px",
+    "fontWeight": 600,
+  },
+  "xLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "21px",
+    "fontWeight": 100,
+  },
+  "xSmall": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": 400,
+  },
+  "xxLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "28px",
+    "fontWeight": 100,
+  },
+}
+`;
+
+exports[`fonts tests creates the correct font styles for ja 1`] = `
+Object {
+  "large": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "17px",
+    "fontWeight": 300,
+  },
+  "medium": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "14px",
+    "fontWeight": 400,
+  },
+  "mediumPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "15px",
+    "fontWeight": 400,
+  },
+  "mega": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "72px",
+    "fontWeight": 100,
+  },
+  "small": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "12px",
+    "fontWeight": 400,
+  },
+  "smallPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "13px",
+    "fontWeight": 400,
+  },
+  "superLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "42px",
+    "fontWeight": 100,
+  },
+  "tiny": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "10px",
+    "fontWeight": 600,
+  },
+  "xLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "21px",
+    "fontWeight": 100,
+  },
+  "xSmall": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": 400,
+  },
+  "xxLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "28px",
+    "fontWeight": 100,
+  },
+}
+`;
diff --git a/packages/styling/src/styles/fonts.test.ts b/packages/styling/src/styles/fonts.test.ts
new file mode 100644
index 0000000000000..b2794ae4b0796
--- /dev/null
+++ b/packages/styling/src/styles/fonts.test.ts
@@ -0,0 +1,15 @@
+import { createFontStyles } from './fonts';
+
+describe('fonts tests', () => {
+  it('creates the correct font styles for en', () => {
+    expect(createFontStyles('en')).toMatchSnapshot();
+  });
+
+  it('creates the correct font styles for ar', () => {
+    expect(createFontStyles('ar')).toMatchSnapshot();
+  });
+
+  it('creates the correct font styles for ja', () => {
+    expect(createFontStyles('ja')).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/packages/styling/src/styles/fonts.ts b/packages/styling/src/styles/fonts.ts
index 8f796040dc7ec..25194c5aa90c7 100644
--- a/packages/styling/src/styles/fonts.ts
+++ b/packages/styling/src/styles/fonts.ts
@@ -40,6 +40,10 @@ export namespace LocalizedFontFamilies {
   export const WestEuropean = `'${LocalizedFontNames.WestEuropean}'`;
 }
 
+// By default, we favor system fonts for the default.
+// All localized fonts use a web font and never use the system font.
+const defaultFontFamily = `'Segoe UI', '${LocalizedFontNames.WestEuropean}'`;
+
 // Mapping of language prefix to to font family.
 const LanguageToFontMap = {
   'ar': LocalizedFontFamilies.Arabic,
@@ -101,39 +105,54 @@ export namespace IconFontSizes {
   export const large = '20px';
 }
 
+function _fontFamilyWithFallbacks(fontFamily: string): string {
+  return `${fontFamily}, ${FontFamilyFallbacks}`;
+}
+
 export function createFontStyles(localeCode: string | null): IFontStyles {
-  return {
-    tiny: _createFont(FontSizes.mini, FontWeights.semibold, localeCode),
-    xSmall: _createFont(FontSizes.xSmall, FontWeights.regular, localeCode),
-    small: _createFont(FontSizes.small, FontWeights.regular, localeCode),
-    smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular, localeCode),
-    medium: _createFont(FontSizes.medium, FontWeights.regular, localeCode),
-    mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular, localeCode),
-    large: _createFont(FontSizes.large, FontWeights.semilight, localeCode),
-    xLarge: _createFont(FontSizes.xLarge, FontWeights.light, localeCode),
-    xxLarge: _createFont(FontSizes.xxLarge, FontWeights.light, localeCode),
-    superLarge: _createFont(FontSizes.superLarge, FontWeights.light, localeCode),
-    mega: _createFont(FontSizes.mega, FontWeights.light, localeCode)
+  const localizedFont = _getLocalizedFontFamily(localeCode);
+  let fontFamilyWithFallback = _fontFamilyWithFallbacks(localizedFont);
+  let semilightFontFamilyWithFallback = fontFamilyWithFallback;
+
+  // Chrome has a bug where it does not render Segoe UI Semilight correctly, so we force the webfont to be used in that case
+  if (localizedFont === defaultFontFamily) {
+    semilightFontFamilyWithFallback = _fontFamilyWithFallbacks(LocalizedFontFamilies.WestEuropean);
+  }
+
+  const fontStyles = {
+    tiny: _createFont(FontSizes.mini, FontWeights.semibold, fontFamilyWithFallback),
+    xSmall: _createFont(FontSizes.xSmall, FontWeights.regular, fontFamilyWithFallback),
+    small: _createFont(FontSizes.small, FontWeights.regular, fontFamilyWithFallback),
+    smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular, fontFamilyWithFallback),
+    medium: _createFont(FontSizes.medium, FontWeights.regular, fontFamilyWithFallback),
+    mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular, fontFamilyWithFallback),
+    large: _createFont(FontSizes.large, FontWeights.semilight, semilightFontFamilyWithFallback),
+    xLarge: _createFont(FontSizes.xLarge, FontWeights.light, fontFamilyWithFallback),
+    xxLarge: _createFont(FontSizes.xxLarge, FontWeights.light, fontFamilyWithFallback),
+    superLarge: _createFont(FontSizes.superLarge, FontWeights.light, fontFamilyWithFallback),
+    mega: _createFont(FontSizes.mega, FontWeights.light, fontFamilyWithFallback)
   };
-}
 
-function _getFontFamily(language: string | null): string {
-  let fontFamily = LocalizedFontFamilies.WestEuropean;
+  return fontStyles;
+}
 
+/**
+ * If there is a localized font for this language, return that. Returns undefined if there is no localized font for that language.
+ */
+function _getLocalizedFontFamily(language: string | null): string {
   for (let lang in LanguageToFontMap) {
     if (LanguageToFontMap.hasOwnProperty(lang) && language && lang.indexOf(language) === 0) {
       // tslint:disable-next-line:no-any
-      fontFamily = (LanguageToFontMap as any)[lang];
-      break;
+      return (LanguageToFontMap as any)[lang];
     }
   }
 
-  return `${fontFamily}, ${FontFamilyFallbacks}`;
+  return defaultFontFamily;
 }
 
-function _createFont(size: string, weight: IFontWeight, localeCode: string | null): IRawStyle {
+function _createFont(size: string, weight: IFontWeight, fontFamily: string): IRawStyle {
   return {
-    fontFamily: _getFontFamily(localeCode),
+    fontFamily: fontFamily,
     MozOsxFontSmoothing: 'grayscale',
     WebkitFontSmoothing: 'antialiased',
     fontSize: size,