ちょっと前，San FranciscoをCSSで指定する方法がむずかしいという話を見聞きしたので，調べてみました。
話題としては2015年のものですが，当時から若干状況が変わったりしていますのでおさらいがてら眺めてみていただけますと幸いです。
San Franciscoというフォント
iOS9やOS X El Cpitanからシステムフォントとして指定されているフォントです。
もともとはHelveticaが指定されていたのですが，小さいサイズのときに読みにくいという弱点があるらしく，
San Fransiscoがシステムフォントとして指定されたようです。
San FranciscoをCSSで指定する
demo1
demo1はCSSで以下のように指定しています。
body {
font-family: "San Francisco", Sans-Serif;
}
どうでしょうか，OS Xなみなさんも，macOSなみなさんも，iOSなみなさんも，Arialになっていることがわかると思います。
要するに，San Franciscoというやつは，単にCSSでSan Franciscoと指定しても無駄ということです。
ではどうやって指定するかというと，以下のようにします。
body {
font-family: -apple-system, Sans-Serif;
}
こんな感じの指定をすると次のようになります。
あれ？上と変わらないじゃん，と思ったChrome on Macユーザの皆さん。そうなんです。Chromeでは -apple-system という指定ではSan Franciscoが指定されません。
Chromeにも対応させようと思うと，こんな感じになります。
body {
font-family: -apple-system, 'BlinkMacSystemFont', Sans-Serif;
}
BlinkMacSystemFont はChromeやOpera(レンダリングエンジンがBlinkのブラウザ)でSan Francisco(というよりMacのシステムフォント)を使うという指定です。
めんどくさいですね。
ちなみに，weightを変えようと思ったら，普通に font-weight を指定すればいいです。
まとめ
San FranciscoをCSSで指定するときには，次のようにしましょう！！
body {
font-family: -apple-system, 'BlinkMacSystemFont', Sans-Serif;
}
なんか，スマートじゃないなぁ…
ちなみに
日本語の指定なんかは，この後ろに追記していくと良いです。例えば，
body {
font-family: -apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'メイリオ', Sans-Serif;
}
などなど。
日本語といえば，日本語表示が最適化されたBootstrapテーマ，Honokaがあります。
このHonokaのForkテーマであるところの「Rin」をForkして作りました。
ぜひ使ってみてください💕