Lato: replace with system fonts

[davidrans]

This changes the default font from Lato -> system fonts.

Closes #566
Same change on the monorepo: https://github.com/iFixit/ifixit/pull/41227

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
react-commerce	✅ Ready (Inspect)	Visit Preview	Aug 17, 2022 at 10:37PM (UTC)
react-commerce-prod	✅ Ready (Inspect)	Visit Preview	Aug 17, 2022 at 10:37PM (UTC)

[davidrans]

deploy_block ✋ on deciding if/when to do this

[dhmacs]

@davidrans @federicobadini is already working on this and will post his comments here soon

[davidrans]

Cool, I just made this change so I could poke around and see what it looked like and figured I might as well open a pull. Feel free to close this in favor of @federicobadini's

[federicobadini]

@davidrans I have just a couple of observations that I think it's worth clarifying before proceeding:

• I think we should remove the lato+ArchivoBlack font imports from _document.tsx
• We should remove all the fontFamily rules referring to Lato or Archivo Black from code (I can find at least 3 right now)

Finally I see no package.json updates so I think there has been no updates to the core primitives library.
This means that the fonts already defined there have been approved to substitute Lato? Otherwise we have to wait merging this until the right set of fonts is defined and shipped in core primitives.

[davidrans]

The core primitives font setting is:
https://github.com/iFixit/core-primitives/blob/8862828cbe89d952c9651f74a1a6b4c442a7bf03/index.json#L240-L247

"sansSystem": "-apple-system, 'Segoe UI', Helvetica, Arial, sans-serif",

[davidrans]

This fixes the LCP issues that webpagetest.org was complaining about on mobile:

	webpagetest.org output
Before
After

[davidrans]

• I think we should remove the lato+ArchivoBlack font imports from _document.tsx
• We should remove all the fontFamily rules referring to Lato or Archivo Black from code

Makes sense to me. Are you working on that in a separate pull @federicobadini or should I make those changes here?

[sterlinghirsh]

CR ⚡ dev_block ⚡ on some more info from @federicobadini

[federicobadini]

Core primitive sans-serif analysis

Apart from the considerations above, together with @mmarcon91 we have made some research in order to understand how to enrich the system font stack currently present in core-primitives.

We suggest ti add BlinkMacSystemFont, otherwise SF will not be used on Chrome/Chromium based browsers.
Then, given that the current sans-serif stack is almost aligned with the Github one, we propose to align to it completely using both their base font declaration:

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

And the associated monospace system font declaration:

ui-monospace, SFMono-Regular, SF Mono, Menlo,Consolas, Liberation Mono, monospace

Next steps

• I think we should remove the lato+ArchivoBlack font imports from _document.tsx
• We should remove all the fontFamily rules referring to Lato or Archivo Black from code

Makes sense to me. Are you working on that in a separate pull @federicobadini or should I make those changes here?

I'll close this in favour of #642
It still is a draft PR so that we can discuss if the proposed stack is ok before proceeding further.
If the response will be positive we will then have to wait for the changes to be included in core primitives before merging.

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)