fix(design-tokens): fixed font family

[masoudmanson]

Summary

Design Tokens
Github issue: #920

https://czi-sci.slack.com/archives/C032S43KKFV/p1736185365071589

The SDS Tailwind configuration previously overrode the font-family to Inter, sans-serif, which does not fully meet the product requirements.

This PR refactors the default font-family to use the Inter font defined via Next.js Fonts by default, with a fallback to a list of system fonts for better compatibility and consistency.

[tihuan]

LGTM! Thanks so much for the quick update, Masoud 👏 !!

Non blocking - It seems like the system fonts are specific to macos, wondering what the impact would be on Windows, Linux, etc. 🤔

[masoudmanson]

LGTM! Thanks so much for the quick update, Masoud 👏 !!

Non blocking - It seems like the system fonts are specific to macos, wondering what the impact would be on Windows, Linux, etc. 🤔

Ahh, thanks for the quick review @tihuan 😍🙏🏻🥳
Actually, the font stack should work fine across Linux and Windows systems. Here’s a breakdown of the font-family list:

• var(--font-inter): This sets the custom Inter font defined by Next.js.
• Inter: Falls back to the standard Inter font for cases where the variable isn’t defined.
• -apple-system, BlinkMacSystemFont: These cover macOS specific system fonts.
• Segoe UI: The default system font for all Windows systems.
• Roboto: The default system font for most Linux distributions.
• The rest (Helvetica Neue, Helvetica, Arial, sans-serif) act as general fallbacks to ensure compatibility when none of the above fonts are available.

I also came across this article that mentions how platforms like GitHub and Medium use similar fallback fonts for their font stacks.

[tihuan]

Ahh brilliant! Thanks so much for the rundown, Masoud 😁💡 That looks awesome!

Could you please add the article link to the code for future reference too please? Thanks a lot!

[masoudmanson]

Ahh brilliant! Thanks so much for the rundown, Masoud 😁💡 That looks awesome!

Could you please add the article link to the code for future reference too please? Thanks a lot!

You’re welcome! 😍🥳🎉
Absolutely, I’ll add the article link to the code for reference. Thanks for pointing that out!

[tihuan]

This looks perfect! Thanks for taking the time to do it 🤩 🏆 🙏