SF Font for CSS

swift, webkit, apple-system – Feb 14 2021

Webkit has updated support for system fonts for CSS.

• • •


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.

Follow on Twitter
Follow on Github