0

I am trying to render San Francisco fonts on macOS in Chrome, but it seems to be broken on a new update.

It seems to work fine in Safari and on iOS Chrome.

I am not sure what font is loading, but the font weight looks like 100, except when using Roboto instead.

Here is my CSS selector:

h1 {
  font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
}

How can I render native macOS fonts in the new Chrome version?

Note: I am also running Catalina 10.15.4, Chrome 81.0.4044.113, and setting font-family: sans-serif; and changing the default sans-serif font in Chrome settings seems to work fine.

Matthew
  • 1,461
  • 3
  • 23
  • 49
  • What happens if you add it with the font name to the start of your font stack? `font-family: 'San Francisco', -apple-system, system-ui...` – Djave Apr 22 '20 at 14:25
  • When I try `font-family: 'San Francisco', sans-serif;` it falls back to sans-serif. – Matthew Apr 22 '20 at 14:52

1 Answers1

2

See the following StackOverflow thread regarding the subject of using the MacOS system fonts in Google Chrome/Chromium browsers: How to use Apple's new San Francisco font on a webpage

Unfortunately, it appears that the only way to truly do this is by referencing it as a webfont. Using this font in a production website or application outside of MacOS, iOS, or other Apple platforms is a violation of their font's licensing. I attempted to use the available solutions to render the font on Chromium without success.

[UPDATE 4/24/2020] Article references known issue with adjusting the font-weight of System Font references for Catalina users : https://www.coywolf.news/webmaster/chrome-81-breaks-system-fonts-bold/

CSS Tricks also comments on the issue of proper System Font rendering. Looks like Chrome version 83 in mid-May will hopefully fix the issues: https://css-tricks.com/chrome-system-fonts-snafu/

TomKingTech
  • 66
  • 5
  • `-apple-system, system-ui, BlinkMacSystemFont,..` seemed to work fine before a recent software update. – Matthew Apr 22 '20 at 20:13
  • @Matthew Looks like there is a known issue with font-weight/bolding of the System Fonts for Catalina users. -- https://www.coywolf.news/webmaster/chrome-81-breaks-system-fonts-bold/ -- This does not explain the fonts not displaying at all, but we know there are issues present. – TomKingTech Apr 24 '20 at 14:33
  • @Matthew Also see this CSS Tricks article - https://css-tricks.com/chrome-system-fonts-snafu/ – TomKingTech Apr 24 '20 at 15:52
  • 1
    The CSS Tricks article is timely! Thanks for the update! – Matthew Apr 24 '20 at 16:13