System Font Stacks: update to match GitHub #36

davidrans · 2022-08-24T15:01:05Z

See some analysis by Federico here: iFixit/react-commerce#626 (comment)

As well as some additional references:

https://bitsofco.de/the-new-system-font-stack/ (2016 - very specific
on the -apple-system/BlinkMacSystemFont distinction)
https://markdotto.com/2018/02/07/github-system-fonts/ (2018)
https://medium.com/towards-more-beautiful-web-typography/survey-system-font-stack-5f73a3b39776 (2020)
https://css-tricks.com/snippets/css/system-font-stack/ (2022)
https://make.wordpress.org/core/2016/07/07/native-fonts-in-4-6/ (2016)
https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/#fn:10 (2020)

Merge checklist

Bump the package version by running npm version [patch | minor | major] from the command line (if applicable).

Note: In the context of Core Primitives, significant changes to the library or workflow, or removing primitives would be considered a major update, adding or updating primitives would be considered a minor update, and fixing primitives would be considered a patch. Non-code changes (e.g. documentation) do not require a version bump.

See some analysis by Federico here: iFixit/react-commerce#626 (comment) As well as some additional references: - https://bitsofco.de/the-new-system-font-stack/ (2016 - very specific on the -apple-system/BlinkMacSystemFont distinction) - https://markdotto.com/2018/02/07/github-system-fonts/ (2018) - https://medium.com/towards-more-beautiful-web-typography/survey-system-font-stack-5f73a3b39776 (2020) - https://css-tricks.com/snippets/css/system-font-stack/ (2022) - https://make.wordpress.org/core/2016/07/07/native-fonts-in-4-6/ (2016) - https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack/#fn:10 (2020)

ianrohde · 2022-08-24T15:28:17Z

Was system-ui considered instead of -apple-system and BlinkMacSystemFont?

Glyphs are taken from the default user interface font on a given platform. Because typographic traditions vary widely across the world, this generic is provided for typefaces that don't map cleanly into the other generics.

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#system-ui
https://caniuse.com/font-family-system-ui

I still have nightmares of tracking down that Chrome issue with BlinkMacSystemFont. 😆

ianrohde · 2022-08-24T16:29:47Z

https://css-tricks.com/snippets/css/system-font-stack/ confirms:

More recently, Chrome and Sadari shipped a system-ui, which is a generic font family that can replace -apple-system and BlinkMacSystemFont. That means the GitHub snippet could be reduced to this:

/* System Fonts with system-ui */
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

davidrans · 2022-08-24T16:32:20Z

Seems like there might be some internationalization issues with system-ui?
https://infinnie.github.io/blog/2017/systemui.html
twbs/bootstrap#22377

That's a little old, but GitHub and Bootstrap didn't add it back it seems 🤷

ianrohde · 2022-08-24T16:43:30Z

We're going to find all sorts of conflicting opinions. I'll spend some time today testing. IIRC have a Windows VM installed on one of my computers

ianrohde · 2022-08-24T16:46:20Z

Ughhhh more Blink issues that were patched https://bugs.chromium.org/p/chromium/issues/detail?id=1018581

jarstelfox · 2022-08-24T16:47:14Z

index.json

+    "lato": "Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
    "mono": "'Roboto Mono', Monaco, 'Lucida Console', 'Courier New', Courier, monospace",
-    "monoSystem": "Monaco, 'Lucida Console', 'Courier New', Courier, monospace",
-    "sansSystem": "-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif",
+    "monoSystem": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",


@davidrans, see https://github.com/iFixit/ifixit/pull/37335, #21, and https://bugs.chromium.org/p/chromium/issues/detail?id=781344&q=BlinkMacSystemFont&can=1&sort=-modified

In short, BlinkMacSystemFont causes a whole page reflow hurting LCP, FID and CLS of course only in chrome

No good then, that's ~75% of traffic and all those metrics are important to rank, UX, etc

I'm trying to trace back what the problem with BlinkMacSystemFont was but I'm struggling a bit because the issue is referencing a Dozuki Slack discussion I've no access to.

Moreover, by skimming through the chromium issue, I have the sensation that they are discussing something slightly different:

They are profiling an animation of the <text> block inside the SVG

The performance hit seems to be related to the number of fonts specified, not to using BlinkMacSystemFont or not using it.

I've seen that there is a comment from you @jarstelfox but I'm not seeing any CLS by testing the react-commerce branch with the BlinkMacSystemFont font family on chrome.

Also the other chromium issue referenced in #21 seems not to be reproducible anymore.

Can you please give me a little bit more of context?

Can you please give me a little bit more of context?

💯

Part of the problem is that the issue we were seeing on the website doesn't seem to be well documented. I searched multiple repos, slack and emails to work back to the exact error.

From my understanding, we were seeing a large reflow during page loads and all of our digging led us to the chrome bug.

We were not sure this was the error:

Jarred Stelfox
19:40
Hey I found it. it’s BlinkMacSystemFont
removing that from the critical css fixes the CLS shifting
tailwindlabs/tailwindcss#1402
^ suggested from here

Ian Rohde
19:41
:whoa:
That’s part of the primitive stack. "sansSystem": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif", I can make a new version for it later tonight. IIRC we pulled the stack from github, so I’m good with removing it, especially if it’s causing problems

Jarred Stelfox
19:48
https://www.google.com/search?q=BlinkMacSystemFont+chrome+bug&oq=BlinkMacSystemFont+[…]g&aqs=chrome..69i57j0i22i30.3051j0j7&sourceid=chrome&ie=UTF-8
A quick google search shows chrome hates that font family
https://bugs.chromium.org/p/chromium/issues/detail?id=1057654#c35
^ found the bug!
Actually, I think it’s: https://bugs.chromium.org/p/chromium/issues/detail?id=781344&q=BlinkMacSystemFont&can=1&sort=-modified
tl;dr: They had a series of rendering bugs that happened a year ago. Now they notice a CLS with it.
One other note: https://bugs.chromium.org/p/chromium/issues/detail?id=554590&q=BlinkMacSystemFont&can=2
It looks like chrome intends to deprecate the font family

I know that thread is not the most helpful, but it seems we were hitting some kind of Layout shifting that went away if we removed the font from the stack. What's tricky is that it's an apple font, so you have to be on a mac only to receive the shifting.

Related, but it looks like the chrome team has put time into fixing bugs with this font overall. Maybe it's safe to use now.

BlinkMacSystemFont may be safe to use now, but is it reliable long-term? My proposal here achieves the same functionality without relying on it.

BlinkMacSystemFont may be safe to use now, but is it reliable long-term? My proposal here achieves the same functionality without relying on it.

The linked font stack will make MacOS Chrome render either Helvetica or Arial before SF though

we were hitting some kind of Layout shifting that went away if we removed the font from the stack. What's tricky is that it's an apple font, so you have to be on a mac only to receive the shifting.

If you have a repro we can definitely test it out to check if all this is still an issue

jarstelfox · 2022-08-24T16:50:39Z

@ianrohde I think you are looking for https://bugs.chromium.org/p/chromium/issues/detail?id=781344&q=BlinkMacSystemFont&can=1&sort=-modified

Generic font families lead to a reflow performance hit

CC @federicobadini

ianrohde · 2022-08-24T17:16:27Z

How about leveraging the font stack order to resolve:

font-family: Lato, -apple-system, 'Segoe UI', Helvetica, Arial, system-ui, sans-serif

On macOS using browsers other than Chrome, -apple-system is used
On Windows, Arial will be used (making sure it's ordered before system-ui)
On macOS using Chrome, we drop all the way down to system-ui, avoiding all the Windows issues we've read about.

erinemay · 2022-08-24T20:13:01Z

Is there any way to preview these changes before making them? deploy_block 🦖

ianrohde · 2022-08-24T20:17:29Z

@erinemay the easiest way is to add this line to the body in browser dev tools:

font-family: -apple-system, 'Segoe UI', Helvetica, Arial, system-ui, sans-serif;

erinemay · 2022-08-24T20:54:10Z

un_deploy_block 👍

Am I correct in assuming there's more discussion happening here?

add this line to the body in browser dev tools:
font-family: -apple-system, 'Segoe UI', Helvetica, Arial, system-ui, sans-serif;

@davidrans, should we go ahead with some cross browser testing to try this out ⬆️?

ianrohde · 2022-08-24T20:55:11Z

Am I correct in assuming there's more discussion happening here?

Correct 👍

erinemay · 2022-08-24T22:56:53Z

I'm throwing on the external block label so it's filtered down on our QA Pulldasher list. @davidrans, let us know when you want a full cross browser test of the site. I'll be out next week, but @k0rvusk0r4x is ready to coordinate it as needed.

davidrans · 2022-08-25T16:55:58Z

That's a little old, but GitHub and Bootstrap didn't add it back it seems 🤷

Actually, I was wrong, Bootstrap did add system-ui back and dropped BlinkMacSystemFont:
twbs/bootstrap#30561
https://github.com/twbs/bootstrap/blob/c3c65911665ab64bdaa15d405db65ee81655dbf3/scss/_variables.scss#L543-L544

federicobadini · 2022-08-25T19:27:05Z

That's a little old, but GitHub and Bootstrap didn't add it back it seems 🤷

Actually, I was wrong, Bootstrap did add system-ui back and dropped BlinkMacSystemFont: twbs/bootstrap#30561 https://github.com/twbs/bootstrap/blob/c3c65911665ab64bdaa15d405db65ee81655dbf3/scss/_variables.scss#L543-L544

Yet seems that after merge someone still experienced issues 😅. I've no windows machine available to test that out though

ianrohde · 2022-08-25T20:18:13Z

This stack bypasses the Windows issues seen from using system-ui by forcing Segoe UI first:

font-family: Lato, 'Segoe UI', system-ui, Helvetica, Arial, sans-serif

Windows:

macOS:

I don't see any negatives with this stack, and it doesn't include the issue-prone BlinkMacSystemFont.

federicobadini · 2022-08-25T22:16:24Z

font-family: Lato, 'Segoe UI', system-ui, Helvetica, Arial, sans-serif

Putting Segoe UI before system-ui should almost completely remove the problem (old windows machines may still have some issues with system-ui, not having Segoe UI installed by default).

Seeing the edge cases that we are discussing though I cannot say for sure that this change is not bringing in other issues

davidrans · 2022-08-26T17:05:34Z

I tend to trust GitHub and Bootstrap to both have approaches that work for the vast majority of users. I'd favor copying the stacks of some other trustworthy site/library.

It sounds like we're down to 2 or 3 possible options. Should we turn it over to QA and let them try to hammer each of those with different OS's, locales, browsers and see if they can find any issues?

federicobadini · 2022-08-26T17:39:24Z

I tend to trust GitHub and Bootstrap to both have approaches that work for the vast majority of users

Agree 💯.

Clearly if we do experience layout reflows or other issues I agree that we are forced to look for an alternative.
But if we are not seeing problems I am keen on trusting these players because their sets are probably "a good compromise".

davidrans · 2022-08-29T15:12:51Z

Bootstrap:

system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

GitHub:

-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"

Wordpress Admin:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

Medium:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif

I vote we have QA do a thorough test of Bootstrap (i.e. system-ui) vs. GitHub (i.e. BlinkMacSystemFont) and see if they can find any issues. My guess is that, since both are in such widespread use, we won't find issues with either of them.

If we don't find issues with either of them, then I don't really have a preference. Maybe a very slight lean towards system-ui just cause it seems like it's a little more future-oriented?

davidrans · 2022-09-02T20:30:47Z

@ianrohde @federicobadini are we good with choosing two of the options listed above (GitHub and Bootstrap, I'm thinking) and having QA take a pass?

ianrohde · 2022-09-02T20:36:30Z

I also lean towards system-ui. The rest are very similar.

davidrans · 2022-09-02T20:45:36Z

Okay, let's QA with GitHub's and Bootstrap's stack and see if we can find any issues with either across OS's/browsers/languages/quantum-portals @erinemay

erinemay · 2022-09-08T15:48:53Z

Adding final steps here. Add each of these stacks to the body of each page.
Bootstrap:

font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Github:

font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji"

erinemay · 2022-09-29T17:28:52Z

Halp! I'm having some trouble with this. I changed all the instances I could find (not just in package.json, which was possibly overkill and maybe my problem?), and after running make and rush update, this is my diff.

diff

diff --git a/carpenter-frontend/package.json b/carpenter-frontend/package.json
index 4c2b3acc5e2..9d29ba1aa1e 100644
--- a/carpenter-frontend/package.json
+++ b/carpenter-frontend/package.json
@@ -63,7 +63,7 @@
       "@chakra-ui/theme-tools": "~1.3.6",
       "@chakra-ui/toast": "^1.5.7",
       "@core-ds/icons": "^1.3.3",
-      "@core-ds/primitives": "^2.4.5",
+      "@core-ds/primitives": "^2.5.1-rc.0",
       "@emotion/css": "~11.10.0",
       "@emotion/react": "^11.8.1",
       "@emotion/styled": "^11.8.1",
diff --git a/carpenter-js/theme/package.json b/carpenter-js/theme/package.json
index 6a67cbb8a7d..94970c9c96b 100644
--- a/carpenter-js/theme/package.json
+++ b/carpenter-js/theme/package.json
@@ -12,7 +12,7 @@
       "clean": "rimraf ./dist"
    },
    "dependencies": {
-      "@core-ds/primitives": "~2.4.5"
+      "@core-ds/primitives": "~2.5.1-rc.0"
    },
    "devDependencies": {
       "rimraf": "^3.0.2",
diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index f71810c2de3..b03ef683182 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -23,7 +23,7 @@ importers:
       '@chakra-ui/theme-tools': ~1.3.6
       '@chakra-ui/toast': ^1.5.7
       '@core-ds/icons': ^1.3.3
-      '@core-ds/primitives': ^2.4.5
+      '@core-ds/primitives': ^2.5.1-rc.0
       '@emotion/css': ~11.10.0
       '@emotion/react': 11.9.0
       '@emotion/styled': 11.8.1
@@ -225,7 +225,7 @@ importers:
       '@chakra-ui/theme-tools': 1.3.6_@chakra-ui+system@1.11.2
       '@chakra-ui/toast': 1.5.9_2lf2su2m7ujhsxzxd2z2brassq
       '@core-ds/icons': 1.3.3_react@16.14.0
-      '@core-ds/primitives': 2.4.5
+      '@core-ds/primitives': 2.5.1-rc.0
       '@emotion/css': 11.10.0_@babel+core@7.17.9
       '@emotion/react': 11.9.0_insruzqejwml3nexkj22dpur3a
       '@emotion/styled': 11.8.1_3gn5s57izm5lhfjxgr4zkvfdti
@@ -461,11 +461,11 @@ importers:
 
   ../../carpenter-js/theme:
     specifiers:
-      '@core-ds/primitives': ~2.4.5
+      '@core-ds/primitives': ~2.5.1-rc.0
       rimraf: ^3.0.2
       typescript: ~4.6.2
     dependencies:
-      '@core-ds/primitives': 2.4.5
+      '@core-ds/primitives': 2.5.1-rc.0
     devDependencies:
       rimraf: 3.0.2
       typescript: 4.6.3
@@ -579,7 +579,7 @@ importers:
       '@babel/preset-env': ^7.14.4
       '@babel/preset-typescript': ^7.13.0
       '@core-ds/icons': ^1.3.0
-      '@core-ds/primitives': ^2.4.5
+      '@core-ds/primitives': ^2.5.1-rc.0
       '@fortawesome/fontawesome-svg-core': ~6.1.1
       '@fortawesome/pro-regular-svg-icons': ~6.1.1
       '@fortawesome/react-fontawesome': ~0.1.18
@@ -619,7 +619,7 @@ importers:
       typescript: ^3.9.9
     dependencies:
       '@core-ds/icons': 1.3.3_react@16.14.0
-      '@core-ds/primitives': 2.4.5
+      '@core-ds/primitives': 2.5.1-rc.0
       '@fortawesome/fontawesome-svg-core': 6.1.1
       '@fortawesome/pro-regular-svg-icons': 6.1.1
       '@fortawesome/react-fontawesome': 0.1.18_3o7rhq5e2fd3auzno3wstxs4ey
@@ -673,7 +673,7 @@ importers:
       '@chakra-ui/icons': ^1.0.15
       '@chakra-ui/react': ^1.6.6
       '@chakra-ui/system': ~2.1.1
-      '@core-ds/primitives': ^1.5.0
+      '@core-ds/primitives': ^2.5.1-rc.0
       '@emotion/react': 11.9.0
       '@emotion/styled': 11.8.1
       '@ifixit/react-components': ^0.3.0
@@ -703,7 +703,7 @@ importers:
       '@chakra-ui/icons': 1.1.7_43khzrqpf4s2psydq72xkc5sca
       '@chakra-ui/react': 1.8.8_xkgxhw3wemj3pp6vzlnnjihwla
       '@chakra-ui/system': 2.1.1_bgqmsvm4hz6izcmpcwescmz73y
-      '@core-ds/primitives': 1.5.0
+      '@core-ds/primitives': 2.5.1-rc.0
       '@emotion/react': 11.9.0_426xlbpu4clsxae4qx32qwknde
       '@emotion/styled': 11.8.1_neh35hrqppbvdgjxxnlc3q5icm
       '@ifixit/react-components': 0.3.0_lzomchjozpjp3t5kmo7yr7pgeq
@@ -739,7 +739,7 @@ importers:
       '@babel/runtime': ~7.16.7
       '@chakra-ui/react': ~1.8.6
       '@core-ds/icons': ^1.0.0
-      '@core-ds/primitives': ^2.4.5
+      '@core-ds/primitives': ^2.5.1-rc.0
       '@emotion/react': 11.9.0
       '@emotion/styled': 11.8.1
       '@fortawesome/fontawesome-svg-core': ~6.1.0
@@ -770,7 +770,7 @@ importers:
       '@babel/runtime': 7.16.7
       '@chakra-ui/react': 1.8.8_ivoplvjmqgmmcxll5nqusjf7b4
       '@core-ds/icons': 1.3.3_react@16.14.0
-      '@core-ds/primitives': 2.4.5
+      '@core-ds/primitives': 2.5.1-rc.0
       '@emotion/react': 11.9.0_dyau445mh2pdagbkb2hgesg4xi
       '@emotion/styled': 11.8.1_kbp7jgi2k3acql37g5mmrjdsjy
       '@fortawesome/fontawesome-svg-core': 6.1.1
@@ -848,12 +848,12 @@ importers:
   ../../runtime_deps_install:
     specifiers:
       '@core-ds/icons': ^1.3.3
-      '@core-ds/primitives': 2.4.5
+      '@core-ds/primitives': 2.5.1-rc.0
       imagemarkup: iFixit/node-markup.git#f295d757306141d4658a08d2ebb2475887b52f08
       react: 16.14.0
     dependencies:
       '@core-ds/icons': 1.3.3_react@16.14.0
-      '@core-ds/primitives': 2.4.5
+      '@core-ds/primitives': 2.5.1-rc.0
       imagemarkup: github.com/iFixit/node-markup/f295d757306141d4658a08d2ebb2475887b52f08
     devDependencies:
       react: 16.14.0
@@ -6309,12 +6309,8 @@ packages:
       react: 16.14.0
     dev: false
 
-  /@core-ds/primitives/1.5.0:
-    resolution: {integrity: sha512-wOd/FZaVW1laDbY6D63a80xCagmhiqpTgM0/bEJEOhGz39DCBDZUdUmxrWc2N/PfgEFf2CMu3JPiIy0S6GZPHQ==}
-    dev: false
-
-  /@core-ds/primitives/2.4.5:
-    resolution: {integrity: sha512-0gUTtOrGUJdmCRRIQ8JDhNNZz6tf2A9HCouJxfT7aTh3dIIYTTEv5JlVjtVn6Yjtt2sEOMer/7A3vQcWdRQetQ==}
+  /@core-ds/primitives/2.5.1-rc.0:
+    resolution: {integrity: sha512-VuAqx+ow3Pb01r/ggvdBjSNkJ+NE2Cl+5smm9BPRCYvc1nVNiERvQso/TQRKy5MI14W/MgFbeI+WaGlHPzl8yw==}
     dev: false
 
   /@cspotcode/source-map-support/0.8.1:
diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json
index 4762d7b456f..c9b3b3729a1 100644
--- a/common/config/rush/repo-state.json
+++ b/common/config/rush/repo-state.json
@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "db6cd466fb0b857a57106e0a1fd0d1f16b03c655",
+  "pnpmShrinkwrapHash": "3df2accb6d47b2213b760792118605d08a1866c2",
   "preferredVersionsHash": "f21e10d7a60116c88059eb278beb50276307d038"
 }
diff --git a/device-picker/package.json b/device-picker/package.json
index a9dba869548..1ebc3a24e3a 100644
--- a/device-picker/package.json
+++ b/device-picker/package.json
@@ -28,7 +28,7 @@
    },
    "dependencies": {
       "@core-ds/icons": "^1.3.0",
-      "@core-ds/primitives": "^2.4.5",
+      "@core-ds/primitives": "^2.5.1-rc.0",
       "@fortawesome/fontawesome-svg-core": "~6.1.1",
       "@fortawesome/pro-regular-svg-icons": "~6.1.1",
       "@fortawesome/react-fontawesome": "~0.1.18",
diff --git a/nextjs-community/package.json b/nextjs-community/package.json
index f6246bc744f..e818ad6e54c 100644
--- a/nextjs-community/package.json
+++ b/nextjs-community/package.json
@@ -13,7 +13,7 @@
       "@chakra-ui/icons": "^1.0.15",
       "@chakra-ui/react": "^1.6.6",
       "@chakra-ui/system": "~2.1.1",
-      "@core-ds/primitives": "^1.5.0",
+      "@core-ds/primitives": "^2.5.1-rc.0",
       "@emotion/react": "^11",
       "@emotion/styled": "^11",
       "@ifixit/react-components": "^0.3.0",
diff --git a/product-page-components/package.json b/product-page-components/package.json
index 660e3cdc310..564a7a02049 100644
--- a/product-page-components/package.json
+++ b/product-page-components/package.json
@@ -36,7 +36,7 @@
       "@babel/runtime": "~7.16.7",
       "@chakra-ui/react": "~1.8.6",
       "@core-ds/icons": "^1.0.0",
-      "@core-ds/primitives": "^2.4.5",
+      "@core-ds/primitives": "^2.5.1-rc.0",
       "@emotion/react": "^11",
       "@emotion/styled": "^11",
       "@fortawesome/fontawesome-svg-core": "~6.1.0",
diff --git a/react-commerce b/react-commerce
--- a/react-commerce
+++ b/react-commerce
@@ -1 +1 @@
-Subproject commit 4cdb90991ba5479924aa7d9a7db0800f55b919b5
+Subproject commit 4cdb90991ba5479924aa7d9a7db0800f55b919b5-dirty
diff --git a/runtime_deps_install/package.json b/runtime_deps_install/package.json
index 7b2fbd40c1d..0f090801ced 100644
--- a/runtime_deps_install/package.json
+++ b/runtime_deps_install/package.json
@@ -7,7 +7,7 @@
    },
    "dependencies": {
       "@core-ds/icons": "^1.3.3",
-      "@core-ds/primitives": "2.4.5",
+      "@core-ds/primitives": "2.5.1-rc.0",
       "imagemarkup": "iFixit/node-markup.git#f295d757306141d4658a08d2ebb2475887b52f08"
    },
    "devDependencies": {

And I'm still seeing the unchanged font stack:

ianrohde · 2022-09-29T17:39:16Z

@erinemay, the change should only be made in package.json files. It's possible you are running an older version of primitives. Try a search for @core-ds/primitives@2. scoped to package.json and replace the whole version string with @core-ds/primitives@2.5.1-rc.0.

Past that, there's little I can do to help without access to the repo. 😞

erinemay · 2022-09-29T21:27:56Z

Thank you so much @ianrohde and @andyg0808! It worked!

I'm seeing the new Lato family on cominor pages, identical to the Bootstrap stack. Depending on the browser, walking down the list and deleting fonts sets each next browser-appropriate font as the font on the page.

font-family: Lato, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif;

@davidrans, where do we use the monoSystem and sansSystem font families?

davidrans · 2022-09-30T15:49:24Z

We use them in this pull: https://github.com/iFixit/ifixit/pull/41227

erinemay · 2022-09-30T17:01:51Z

We use them in this pull: iFixit/ifixit#41227

Hmm, I'm still seeing Lato on that branch. It's the correctly updated version from here when I use 2.5.1-rc.0, but it's still Lato. Should it be completely gone?

ianrohde · 2022-09-30T17:07:32Z

I can almost guarantee that the lato primitive stack is still being used. If you want to switch iFixit to the system stack, it will take more code changes. I'm not sure if those changes were intended to be a part of this PR.

davidrans · 2022-11-16T23:12:59Z

Interestingly, GitHub just updated their font stack slightly: https://github.com/orgs/community/discussions/39226

davidrans · 2023-01-05T19:01:59Z

index.json

-    "sansSystem": "-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif",
+    "lato": "Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "mono": "'Roboto Mono', ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    "monoSystem": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",


This looks like it matches GitHub:

davidrans · 2023-01-05T19:02:20Z

index.json

+    "lato": "Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+    "mono": "'Roboto Mono', ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    "monoSystem": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+    "sansSystem": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",


This looks like it matches GitHub:

davidrans · 2023-01-05T19:03:37Z

CR ☕

davidrans mentioned this pull request Aug 24, 2022

Use system font iFixit/react-commerce#642

Merged

Update lato font stack too

3042461

jarstelfox reviewed Aug 24, 2022

View reviewed changes

erinemay added the external_block iFixit SQA will hold off on testing this for now (pulldasher marks PRs for this label) label Aug 24, 2022

erinemay removed the external_block iFixit SQA will hold off on testing this for now (pulldasher marks PRs for this label) label Sep 7, 2022

erinemay added the external_block iFixit SQA will hold off on testing this for now (pulldasher marks PRs for this label) label Sep 9, 2022

erinemay self-assigned this Sep 29, 2022

erinemay added the QAing Under QA team review label Sep 29, 2022

erinemay added external_block iFixit SQA will hold off on testing this for now (pulldasher marks PRs for this label) and removed QAing Under QA team review labels Sep 29, 2022

erinemay added QAing Under QA team review and removed external_block iFixit SQA will hold off on testing this for now (pulldasher marks PRs for this label) labels Sep 29, 2022

erinemay removed the QAing Under QA team review label Sep 29, 2022

erinemay added the QAing Under QA team review label Sep 30, 2022

erinemay added external_block iFixit SQA will hold off on testing this for now (pulldasher marks PRs for this label) and removed QAing Under QA team review labels Sep 30, 2022

feat: align font stack with github

3276ea2

davidrans commented Jan 5, 2023

View reviewed changes

davidrans changed the title ~~System Font Stacks: update to match Bootstrap~~ System Font Stacks: update to match GitHub Jan 10, 2023

2.5.1

61b4999

davidrans force-pushed the system-font-stacks--update branch from b6c337e to 61b4999 Compare January 12, 2023 16:31

davidrans merged commit b7c382b into master Jan 12, 2023

davidrans deleted the system-font-stacks--update branch January 12, 2023 16:38

davidrans removed the external_block iFixit SQA will hold off on testing this for now (pulldasher marks PRs for this label) label Jan 12, 2023

davidrans unassigned erinemay Jan 12, 2023

fi3ework mentioned this pull request Mar 23, 2023

Font tilt style invalidated vitejs/vite#12545

Closed

7 tasks

robinmetral mentioned this pull request May 29, 2024

Mention system-ui and ui-* tmcw/systemfontstack#25

Open

System Font Stacks: update to match GitHub #36

System Font Stacks: update to match GitHub #36

Conversation

davidrans commented Aug 24, 2022

Merge checklist

ianrohde commented Aug 24, 2022 • edited by andyg0808 Loading

ianrohde commented Aug 24, 2022

davidrans commented Aug 24, 2022 • edited Loading

ianrohde commented Aug 24, 2022

ianrohde commented Aug 24, 2022

jarstelfox Aug 24, 2022

Choose a reason for hiding this comment

ianrohde Aug 24, 2022

Choose a reason for hiding this comment

federicobadini Aug 24, 2022

Choose a reason for hiding this comment

jarstelfox Aug 25, 2022

Choose a reason for hiding this comment

ianrohde Aug 25, 2022

Choose a reason for hiding this comment

federicobadini Aug 25, 2022 • edited Loading

Choose a reason for hiding this comment

jarstelfox commented Aug 24, 2022

ianrohde commented Aug 24, 2022

erinemay commented Aug 24, 2022 • edited Loading

ianrohde commented Aug 24, 2022

erinemay commented Aug 24, 2022

ianrohde commented Aug 24, 2022

erinemay commented Aug 24, 2022

davidrans commented Aug 25, 2022

federicobadini commented Aug 25, 2022

ianrohde commented Aug 25, 2022

federicobadini commented Aug 25, 2022

davidrans commented Aug 26, 2022

federicobadini commented Aug 26, 2022

davidrans commented Aug 29, 2022

davidrans commented Sep 2, 2022

ianrohde commented Sep 2, 2022

davidrans commented Sep 2, 2022

erinemay commented Sep 8, 2022

erinemay commented Sep 29, 2022

ianrohde commented Sep 29, 2022

erinemay commented Sep 29, 2022

davidrans commented Sep 30, 2022

erinemay commented Sep 30, 2022

ianrohde commented Sep 30, 2022

davidrans commented Nov 16, 2022 • edited Loading

davidrans Jan 5, 2023

Choose a reason for hiding this comment

davidrans Jan 5, 2023

Choose a reason for hiding this comment

davidrans commented Jan 5, 2023

ianrohde commented Aug 24, 2022 •

edited by andyg0808

Loading

davidrans commented Aug 24, 2022 •

edited

Loading

federicobadini Aug 25, 2022 •

edited

Loading

erinemay commented Aug 24, 2022 •

edited

Loading

davidrans commented Nov 16, 2022 •

edited

Loading