Discussion: Targetting native fonts

[tzfx]

Hello there!

The default font set in typography.css appears to be 'roboto'-- this is also brought in via NPM dependency and delivered to clients.

I think we should change this so the default attempts to load native fonts- Github uses the following base font-family definition:

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

And here is a post covering the why and how behind their change: https://markdotto.com/2018/02/07/github-system-fonts/ along with some information on how they iterated through a few options for this.

Additionally, it appears that we definite bold/italic/light font families in typography. I think we should identify where these are being used and instead utilize <strong> or <em> tags instead. This also should allow us to remove the roboto font dependency that we are currently bringing in via NPM.