Feb 14 2021

SF Font for CSS

Webkit has updated support for system fonts for CSS.

swift , webkit , apple-system


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.