How to fix San Francisco font in iOS 13 on Chrome?

Question

When Apple upgraded the operating system to iOS 13, the San Francisco font doesn't load me properly, but it only happens in Chrome, in Safari it works.

I use @font-face and with local(".SFNSText-Light").

it doesn't even put HelveticaNeue, I think it has to do with the dot but in Safari it works.

Thanks.

@mixin fontFace($fontFamily, $src, $weight: null, $style: null, $fontDisplay: fallback, $stretch: null) {
    @font-face {
        font-display: $fontDisplay;
        font-family: $fontFamily;
        font-stretch: $stretch;
        font-style: $style;
        font-weight: $weight;
        src: $src;
    }
}


$srcSecondaryFont: $secondaryFont, local(".SFNSText-Light"), local('Roboto-Light'), local('Segoe UI Light'), local('HelveticaNeue-Light'), local('sans-serif-light'), local('system-ui'), local('sans-serif');


@include fontFace('SecondaryFont', $srcSecondaryFont);

I expect the font is San Francisco, but it shows me Times

Jack Humbert Jack Humbert · Accepted Answer · 2019-09-26T01:22:25

I wasn't able to get any of the direct names that worked previously to work in 13, but -apple-system seems to still work, if that is an acceptable alternative (I believe it's some form of SF).

How to fix San Francisco font in iOS 13 on Chrome?

1 Answers