Try to use the system Segoe UI by default instead of downloading a web font#4206
Conversation
|
@dzearing can you spot check this on your macbook for me? Especially if you don't have Segoe UI installed locally. |
|
@mikewheaton @Jahnp What do you think about this? Can we adjust the font ramp here without creating visual artifacts? I think so, screener seems to as well. |
|
We used to prefer the local version of Segoe UI in Fabric Core, but then removed it due to Chrome on Windows not applying the semilight weight correctly. See issue 960. Here's a CodePen that you can try/modify: https://codepen.io/mikewheaton/pen/rdNVzO?editors=1100 For Chrome on Windows, semilight (font weight 300) text is rendered using the the light weight.
|
| 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; |
There was a problem hiding this comment.
Is there a reason for Segoe UI to be in the stack twice?
There was a problem hiding this comment.
It is just to avoid having to update the fallback fonts in a one off case
|
You are right @mikewheaton , here is an example from the the demo page with and without my changes. The interesting thing is, do we actually need to download 3 variants of the font if we are using font weight anyway? 100KB is more than all of fabric
|
|
Yup, it seems like downloading just regular would break things. Would be great to avoid downloading all 3 fonts just to work around a chrome bug though, it is impacting Office Online's page load time |
|
@mikewheaton I have to do a bit more testing, but how does this codepen look: https://codepen.io/anon/pen/wmvGOb?editors=1100 It doesn't download any fonts on Edge and downloads just Semilight on Chrome |
|
@christiango Nice! That looks to be working in Firefox, Chrome, IE11, and Edge on Windows. As long as we get the fallback web fonts working for macOS/iOS/Android/Linux this should do the trick. Once we have a working and tested solution I'll do the same in Fabric Core. :) |
|
Cool! I'll take a look later today on how to do thid in fabric and test on a Linux VM |
|
Hmm the solution from the codepen needs to set the font family to be different based on if the use is semilight, I don't think we do that today anywhere though. |
|
Still need to do some tests in Ubuntu, but this solution means that Chrome downloads Segoe UI Semilight. We have very few components using semilight, but I verified it works by messing around with checkboxes |
| function _createFont(size: string, weight: IFontWeight, localeCode: string | null): IRawStyle { | ||
| function _createFont(size: string, weight: IFontWeight, fontFamily: string): IRawStyle { | ||
| return { | ||
| fontFamily: _getFontFamily(localeCode), |
There was a problem hiding this comment.
Refactored to avoid repeated calls to the loop over the LanguageToFontMap keys
…c-react into chrisgo/system-font-default
|
Verified that this works on my Macbook that did not have Segoe UI installed. It downloaded all the fonts as expected |
|
@dzearing Given that this change reduces the download size by 100k in some cases, I'm guessing we are ok with a 75 byte increase in the bundle? |
|
75??!! ok finnnne. |
4 participants
Pull request checklist
$ npm run changeDescription of changes
Right now the default styles set for fabric text is "'Segoe UI Web (West European)', 'Segoe UI'". Since the web font is first, we always will download the web font. This is a waste of ~100K (even more on browsers that don't support woff2) if the user already has that font installed:
With this change, we will make the default font "'Segoe UI', 'Segoe UI Web (West European)'", which by default will try to use the system font, otherwise it will fall back to the webfont. With this change we won't download any web fonts by default for Chrome and FF.
Unfortunately, Edge and IE still download the fonts in this case. To make this work in Edge/IE, we have to change the definition of the Segoe UI Web (West European) font face to include
local("Segoe UI").Focus areas to test
Verified that things look correct in IE, Edge, FF, Chrome.