{"id":21043,"date":"2018-04-02T13:15:32","date_gmt":"2018-04-02T17:15:32","guid":{"rendered":"https:\/\/mjtsai.com\/blog\/?p=21043"},"modified":"2021-09-08T11:42:20","modified_gmt":"2021-09-08T15:42:20","slug":"system-fonts-in-css","status":"publish","type":"post","link":"https:\/\/mjtsai.com\/blog\/2018\/04\/02\/system-fonts-in-css\/","title":{"rendered":"System Fonts in CSS"},"content":{"rendered":"

Craig Hockenberry<\/a>:<\/p>\n

\n

Apple agreed and made a proposal<\/a> on the CSS mailing list. Over the next few months that proposal evolved from being called “system”<\/a> to “system-ui”<\/a>. (Once upon a time, Windows used a font called “System”<\/a> that could have caused a conflict.)<\/p>\n

At the end of the day the CSS Font Module was updated<\/a> and there was an official way to render text just like the operating system.<\/p>\n

[…]<\/p>\n

Both Chrome<\/a> and Safari<\/a> support it fully on a wide variety of platforms. Only Mozilla and Windows are lagging behind<\/a>.<\/p>\n\n<\/blockquote>\n

Previously: CSS Font Family for San Francisco<\/a>.<\/p>\n\n

Update (2021-09-08): ayanami<\/a> (via Matthew Bischoff<\/a>):<\/p>\n

\n

Starting from Safari 13.1, they added font family names for system fonts:<\/p>\n

    \n
  • ui-monospace<\/code> — SF Mono<\/li>\n
  • ui-serif<\/code> — New York<\/li>\n
  • ui-sans-serif<\/code> — San Francisco (same as system-ui<\/code> and -apple-system<\/code>)<\/li>\n<\/ul>\n<\/blockquote>","protected":false},"excerpt":{"rendered":"

    Craig Hockenberry: Apple agreed and made a proposal on the CSS mailing list. Over the next few months that proposal evolved from being called “system” to “system-ui”. (Once upon a time, Windows used a font called “System” that could have caused a conflict.) At the end of the day the CSS Font Module was updated […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"apple_news_api_created_at":"2018-04-12T01:13:23Z","apple_news_api_id":"435ac89a-e367-4cb7-b251-72ea44d9f5b9","apple_news_api_modified_at":"2021-09-08T15:42:24Z","apple_news_api_revision":"AAAAAAAAAAAAAAAAAAAAAA==","apple_news_api_share_url":"https:\/\/apple.news\/AQ1rImuNnTLeyUXLqRNn1uQ","apple_news_coverimage":0,"apple_news_coverimage_caption":"","apple_news_is_hidden":false,"apple_news_is_paid":false,"apple_news_is_preview":false,"apple_news_is_sponsored":false,"apple_news_maturity_rating":"","apple_news_metadata":"\"\"","apple_news_pullquote":"","apple_news_pullquote_position":"","apple_news_slug":"","apple_news_sections":"\"\"","apple_news_suppress_video_url":false,"apple_news_use_image_component":false,"footnotes":""},"categories":[2],"tags":[338,133,31,1472,30,1529,103,96,328],"class_list":["post-21043","post","type-post","status-publish","format-standard","hentry","category-technology","tag-css","tag-font","tag-ios","tag-ios-11","tag-mac","tag-macos-10-13","tag-safari","tag-web","tag-webkit"],"apple_news_notices":[],"_links":{"self":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/21043","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/comments?post=21043"}],"version-history":[{"count":2,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/21043\/revisions"}],"predecessor-version":[{"id":33566,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/posts\/21043\/revisions\/33566"}],"wp:attachment":[{"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/media?parent=21043"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/categories?post=21043"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mjtsai.com\/blog\/wp-json\/wp\/v2\/tags?post=21043"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}