CSSでSan Franciscoフォントを指定しようとすると、特定の状況で日本語フォントがHiragino Kaku Gothic Interfaceというフォントに固定され、日本語フォントが指定できなくなる、という問題があります。たとえば以下のようなCSSの場合、日本語がヒラギノ角ゴではなくHiragino Kaku Gothic Interfaceになります。
body {
font-family:
-apple-system, BlinkMacSystemFont,
"Hiragino Kaku Gothic ProN", sans-serif;
}
このHiragino Kaku Gothic Interface（正式名称不明）は、おそらくヒラギノ角ゴをSan Franciscoに調和するよう調整したものと思われます。一見ヒラギノ角ゴと見分けがつかないのですが、文字サイズがひとまわり小さいのが問題です。つまり、16pxを指定した文字の幅が16pxにならないないのです。
現時点で僕が把握している限り、SafariとChromeでこの現象が見られます。それぞれの発生条件について解説します。
Safari
SafariでSan Franciscoを表示するにはfont-familyプロパティにsystem-uiもしくは-apple-systemキーワードを指定します。しかしこれらのキーワードのいずれかを指定すると、和文フォントがHiragino Kaku Gothic Interfaceに固定されます。どうやらiOS 11、macOS 10.13（High Sierra）からの仕様のようです。
Chrome
ChromeでSan Franciscoを表示するにはfont-familyプロパティにBlinkMacSystemFontキーワードを指定します。lang属性の値がjaかzhの場合は問題ないのですが、それ以外（enなど）の場合、和文フォントがHiragino Kaku Gothic Interfaceに固定されます。たとえば、GitHubのサイトはlangがenなので、ChromeとSafariでは日本語のフォントサイズがFirefoxに比べてひとまわり小さく見えます。
対策
そもそも環境によって文字サイズが違って見えても気にならない、と言うならそのままでもいいでしょう。また、もしSan Franciscoを使う箇所に日本語がない、もしくはごく少ないという場合もあまり問題にならないかもしれません。ただ、日本語の本文などでSan Franciscoを指定している場合、実際に表示を比べるとその違いは明らかで、もしデザイナーが綿密に文字サイズを設計しているなら、許容できる範囲を超えているように思います。
解決策として、unicode-rangeを使って欧文にだけSan Franciscoが適用されるようにするという手もあります。
@font-face {
font-family: "SF Latin";
src: local(-apple-system);
unicode-range: U+0000-00FF;
}
body {
font-family: "SF Latin", sans-serif;
}
この方法はSafariには有効ですが、残念ながらFirefoxは@font-faceルールのsrcディスクリプタで-apple-systemが無効になってしまいます。環境がiOSに限られるならありかもしれません。
結論
個人的には、San Franciscoはとても優れたフォントだと思うので、ぜひウェブでも使いたいものの、少なくとも日本語のサイトでは採用を見送るのが無難と思っています。ちなみに代替としてはRobotoが使いやすくて好きです。