Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try to use the system Segoe UI by default instead of downloading a web font #4206

Merged
merged 13 commits into from
Mar 11, 2018
Merged

Try to use the system Segoe UI by default instead of downloading a web font #4206

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
51e3687
By default, use the system segoe-ui
christiango Mar 7, 2018
019ef95
Fix it more consistently
christiango Mar 7, 2018
368b06d
Rush change
christiango Mar 7, 2018
9f31b32
Snapshot updates
christiango Mar 7, 2018
b4032d3
Make it work for IE and Edge as well.
christiango Mar 7, 2018
755ffdf
Update snapshots
christiango Mar 7, 2018
a0e96d9
Add some snapshots for the before state of createFontStyles
christiango Mar 8, 2018
17007a9
Refactor #1
christiango Mar 8, 2018
7c4414d
Update default font styles
christiango Mar 8, 2018
cc2469d
Another refactor
christiango Mar 8, 2018
19ca47a
Remove unused import
christiango Mar 9, 2018
8af5ec4
Merge branch 'master' of https://github.com/OfficeDev/office-ui-fabri…
christiango Mar 9, 2018
8dc711a
Update snapshot
christiango Mar 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions common/changes/@uifabric/styling/chrisgo-system-font-default_2018-03-07-19-33.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
4 changes: 2 additions & 2 deletions packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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%;
Expand Down
18 changes: 9 additions & 9 deletions ...fice-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason for Segoe UI to be in the stack twice?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is just to avoid having to update the fallback fonts in a one off case

font-size: 12px;
font-weight: 400;
justify-content: flex-start;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion ...s/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
12 changes: 6 additions & 6 deletions packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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%;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ...office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ...ges/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions ...s/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down Expand Up @@ -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%;
Expand Down
Loading