Propose variations : serif, sans-serif, monospace ?

cyrilchapon commented 4 years ago

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 commented 3 years ago

@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 commented 3 years ago

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

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

jsphpndr commented 3 years ago

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?

csstools / system-font-css

Propose variations : serif, sans-serif, monospace ? #21