Propose variations : serif, sans-serif, monospace ?

[cyrilchapon]

This approach is splendid.

What about some variations; as in many styles / frameworks / design systems, a "theme" is composed of several fonts, including some serif, some sans-serif and some monospaced.

Furthermore; I saw you're using the exact same technique on your homepage index.html to define a "system monospace font" :

@font-face {
	font-family: monospace;
	font-style: normal;
	font-weight: 400;
	src: local("Menlo-Regular"), local("Monaco"), local("Consolas"), local("DejaVu Sans Mono"), local("DejaVu Sans Mono");
}

@font-face {
	font-family: monospace;
	font-style: italic;
[...]

What do you think ?

system-serif
system-sans-serif
system-mono

I can PR this, though I don't have time to redo the research to find the system's serif and mono fonts. Can you help me ?

[jsphpndr]

@cyrilchapon, this is a great recommendation.

I am looking for this in serif, as well. However, I did not consider monospace.

I don't know the methods to find the system font paths, so it would be great to either have some assistance or see it updated here.

@jonathantneal, these would be great additions to this method.

[cyrilchapon]

Maybe we can contribute with this repo : https://systemfontstack.com

Good quality, a bit outdated though. Left an issue out there

[jsphpndr]

Maybe we can contribute with this repo : https://systemfontstack.com

Good quality, a bit outdated though. Left an issue out there

This is a great reference.

I think the only issue is identifying fonts as they're stored locally, as done by @jonathantneal.

Are you familiar with the process at all @cyrilchapon?