Posted at

CSSでSan Franciscoフォントを指定する

More than 3 years have passed since last update.

iOS9やapple watch、MacOSX El Capitan等で採用されているシステムフォントのSan Franciscoですが

現在のところCSSではそのままfont-familyに指定しても表示されません。


font-familyの指定方法

.target {

font-family: -apple-system, 'BlinkMacSystemFont', '.SFNSDisplay-Regular', sans-serif;
}

-apple-systemだけではchromeなどで表示されないのでBlinkMacSystemFontも併記します。

また一部記号が正常に表示されないこともあるので気になる場合は.SFNSDisplay-Regularも指定してください。

最後のsans-serifSan Franciscoフォントが無い場合のフォールバックです。

必要な場合はsans-serifの前にその他のフォントを任意で指定してください。


参考

How to use Apple's new San Francisco font on a webpage