SF Font for CSS

Webkit has updated support for system fonts for CSS.

Overview

In WWDC 2020 titled “The details of UI typography”, the presenter announces that webkit has now support for a new standard in using the San Francisco font with CSS.

font-family: system-ui      /* SF pro */
font-family: ui-rounded     /* SF Pro Rounded */
font-family: ui-serif       /* New York */
font-family: ui-monospace   /* SF Mono */

This is fantastic and I think this means that if you were previously using font-family: -apple-system you should consider updating that to system-ui or another option in order to get the latest.

More Resources

If you like to learn more about typography for ios, please check out superview.dev category on typography.