Applying system font by default?

As many already know, system font can be changed in Android. Seeing a different font (Arial?) in the app instantly takes out the native feel in the app. With CSS, system font names can be acquired and applied to the page (at least it works in desktops, I don’t know if it works or not in mobile devices.) Therefore, in my opinion system fonts should get applied automatically to everything, at least on Android.

well what do you know, that is actually something we are considering.

$font-family-sans-serif:          sans-serif !default;

It’s something I’m looking into and see what may need to be changed, but it would make the type more adaptable across platforms. Plus I’m sure there’s a small performance boost in there as well.

Any update on that?

The current solution (that I am using) requires that the user did not change the system font, since I use platform selectors to overwrite the font family.

Ditto - any news on being able to use the system font instead of a webfont file? Very keen to have SanFransico used within our iPhone version. - however, you are NOT allowed to embed the font etc so we can’t just create a web font version and bundle it in the app.

* {
  font-family: -apple-system, "Helvetica Neue", sans-serif;
}

This will give you SF on ios9, helvetica on ios8, and roboto on android.

2 Likes

Sorry, picked this up yesterday.

Can confirm it works lovely for anyone else who drops by here :slight_smile: (on ios9 and android)

How can I apply different variants of the system fonts (i.e light/medium/regular)

preferably grouping them in SASS variables i.e. $system-font-regular, $system-font-light

EDIT:
More accurately … what is the font-family syntax for the different weights of system fonts to target all like you have above

Its not as easy as it seems. You can get it though by declaring different fonts for each weight

font: -apple-system-body 
font: -apple-system-headline 
font: -apple-system-subheadline 
font: -apple-system-caption1 
font: -apple-system-caption2 
font: -apple-system-footnote 
font: -apple-system-short-body 
font: -apple-system-short-headline 
font: -apple-system-short-subheadline 
font: -apple-system-short-caption1 
font: -apple-system-short-footnote 
font: -apple-system-tall-body