New font from iOS 9 will be applied? - San Francisco

ionic-v1
1

iOS 9 is expected to be released with new font - San Francisco, replacing its tranditional Hevetica fonts. I wonder how Ionic will respond to this kind of change. Here are the things that I am curious to know at this moment.

  • Will old Ionic apps use San Francisco font in iOS 9?
  • Will new Ionic apps (that are published right after release of iOS 9) use San Francisco font?
  • If not, how can I apply this new font in next Ionic apps?

Anyone please help me in detail. Thanks in advance.

2

The font is defined in the CSS font-family property. I don’t know if Ionic will use San Francisco on iOS 9 by default. But you can probably easily modify the font, e.g. by editing the SCSS variable $font-family-sans-serif.

1 Like
3

+1 for suggesting $font-family-sans-serif. Thanks.

4

Well, when iOS9 is officially released, yes we will support the new type, while still supporting Helvetica.

1 Like
6

Thank you for your post, Mike.

7

So now that iOS9 is out how do we apply the new font?

8

You can use it with this.

  font-family: -apple-system, "Helvetica Neue", sans-serif;
1 Like
9

Awesome! Yeah that’s what I thought but wanted to confirm. For light and bold its still just -apple-system and then modified with font weight?

10

Will adding below CSS enable new iOS9 font on my ionic app? Or do I also need to install those fonts ?

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

I have downloaded San Francisco fonts from https://developer.apple.com/fonts/

@mhartington

11

You don’t need to download the font and you are not allowed to bundle it in your application in any format (their licence terms).

However, if you use that css and the app is running on an iOS9 device then the font will be used. Other devices will show their respective fonts or fall back to Helvetica Neue / sans-serif etc.

2 Likes
12

Thanks for the clarification @fox

13

Is this true for Ionic View as well? Not seeing San Francisco while prototyping.

14

It’s possible that ionic View may need an update from the ionic team to make that work (assuming on iOS). But have you checked if the font works when you deploy the app to simulator or device directly (not via ionic view) to make sure it isn’t an issue with your code?

1 Like
15

San Francisco does work in the Simulator, only not showing in Ionic View.

16

I think you’ll need to ask / wait for the ionic team to update IonicView app then unfortunately.

17

Appears to be working today. I may not have synced my latest build when I asked the question. False alarm everyone!

1 Like