Add Noto Sans to the body font stack

[simurai]

What are you trying to accomplish?

This adds Noto Sans to the $body-font stack. I think the break down will be something like:

• -apple-system for Safari + Firefox on macOS
• BlinkMacSystemFont for Chrome on macOS
• Segoe UI for Windows
• Noto Sans for Linux ✨ new ✨
• Helvetica as legacy fallback
• Arial as legacy fallback
• sans-serif as a system fallback
• Apple Color Emoji + Segoe UI Emoji for emojis

What approach did you choose and why?

Adding Noto Sans should improve alignment issues on Linux. See #1209.

What should reviewers focus on?

If anyone is on Linux and wants to test the new font stack, you could use the following in DevTools:

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

Can these changes ship as is?

• Yes, this PR does not depend on additional changes. 🚢
• If we move forward with this PR, we should also update Primitives: Add Noto Sans to the font stack primitives#385

[changeset-bot]

🦋 Changeset detected

Latest commit: d451229

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/css	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vdepizzol]

Awesome! 🎉 🎉

Side note: we may also have to update this on Primer React and Primer Primitives (which should be used soon as a reference for both implementations)

• https://github.com/primer/react/blob/ccef2f13261087f9c4db33d5b1a560fecfda1791/src/theme-preval.js#L16-L28
• https://github.com/primer/primitives/blob/4d638b545751652860d37dcb20242ad2360348a6/tokens/functional/typography/typography.json#L5

[langermank]

+1 adding this to Primitives!