search

csstools / system-font-css

Use the native system font of the OS running the browser
https://jonathantneal.github.io/system-font-css/
Other
521 stars 33 forks source link

Solution for IOS? #7

Open tulipdexter opened 7 years ago

tulipdexter commented 7 years ago

Is there anyway for this to work on IOS? It appears that none of the fonts in the list are the fonts used on IOS. Is that intentional?

When you call font-family: system-ui and you've used @font-face { font-family: system-ui; }, does that override the new browser standard system-ui? Would that mean, ignore this new generic system-ui (https://www.chromestatus.com/feature/5640395337760768) and use my font-face stack. Or does it mean, use the new generic system-ui and if that's not understood by the browser, run through this list of fonts in the font-face stack?

I'm finding this really hard to describe, sorry :(

Or to cover IOS with these font-face declarations should we just use something like font-family: system-ui, sans-serif.

jonathantneal commented 7 years ago

That’s a really great question, and makes sense to me.

I wrote this before system-ui became a thing, when it was all just dreaming, if that makes sense. It also means I don’t actually know the answer to your question. Other wonderful people turned this into something that matched the spec. The next thing would be to test if this is compatible alongside browsers that support system-ui out of the box.

tulipdexter commented 7 years ago

Thanks for the reply , makes total sense.

I did a bit of quick experimenting. It seems that if you make a @font-face declaration using the name system-ui it does override the new browser standard. I did this and used 'Helvetica Neue' (I'm on Sierra so have San Francisco as system font) and the computed font comes out as Helvetica when font-family: system-ui is called.

I also noticed something else odd. system-ui (without font-face) seems to do something clever with headings. It switches to a font called .SF NS Display, which has a much tighter letter spacing. This seems cool at first, but then became apparent that you couldn't replicate this using the new system-ui if you had a classname like .h1 on say a <p> tag. It doesn't trigger if you bump the font size.

The final thing is that when using system-ui without font-face, when you use italics and different weights, the rendered font in chrome dev tools shows just as SF NS Text (not SF NS Text Italic or something). However, it renders different weights nicely, including 300, 400, 500 and 700. So I presume there's no faux bolding there. The only odd one was 500 italic, which seems to be the same as 400 italic so maybe there's no 500 italic San Francisco font.

Martin-Pitt commented 6 years ago

Regarding iOS there is also http://iosfonts.com/ that you can refer to for the proper font-family names you can use as strings in local("…").

Interesting regarding the headings, there is also a rounded variation of SF, which could be used somewhere as well. (Buttons, Labels, etc?)