Updates to use `system-ui`

README.md

@@ -4,19 +4,19 @@ System Font CSS is set of `@font-face` rules that let you use the native system
 
 ```css
 body {
-    font-family: system;
+    font-family: system-ui;
 }
 ```
 
-[system-font.css](system-font.css) offers eight variations of the `system` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**.
+[system-font.css](system-font.css) offers eight variations of the `system-ui` font family; **light** (300) **light italic**, **normal** (400), **normal italic**, **medium** (500), **medium italic**, **bold** (700), and **bold italic**.
 
 ```css
 blockquote {
-    font: italic 300 system;
+    font: italic 300 system-ui;
 }
 
 p {
-    font: 400 system;
+    font: 400 system-ui;
 }
 ```
 
@@ -32,7 +32,7 @@ Also, for those of opposed to joy, remember that **Internet Explorer 8** does no
 
 ```css
 body {
-    font-family: system, "Segoe UI", Tahoma;
+    font-family: system-ui, "Segoe UI", Tahoma;
 }
 ```
 
@@ -44,6 +44,9 @@ body {
 
 Ubuntu has always used one system typeface, apty named **Ubuntu**. That part was easy.
 
-## Is `system` going to be a thing?
+## Native `system-ui` resources
 
-Maybe. There are [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.
+* [CSS Fonts Module Level 4 Editor’s Draft Specification](https://drafts.csswg.org/css-fonts-4/#system-ui-def)
+* [Chrome Platform Status](https://www.chromestatus.com/feature/5640395337760768)
+* Proposed for inclusion on [Can I Use](https://github.com/Fyrd/caniuse/issues/2918)
+* Previous [discussions in the W3C](https://lists.w3.org/Archives/Public/www-style/2015Jul/0169.html) to standardize a generic `system` family.

system-font.css

 /*! system-font.css v1.1.0 | CC0-1.0 License | github.com/jonathantneal/system-font-face */
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: normal;
 	font-weight: 300;
 	src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Segoe UI Light"), local("Ubuntu Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
 }
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: italic;
 	font-weight: 300;
 	src: local(".SFNSText-LightItalic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Light Italic"), local("Ubuntu Light Italic"), local("Roboto-LightItalic"), local("DroidSans"), local("Tahoma");
 }
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: normal;
 	font-weight: 400;
 	src: local(".SFNSText-Regular"), local(".HelveticaNeueDeskInterface-Regular"), local(".LucidaGrandeUI"), local("Segoe UI"), local("Ubuntu"), local("Roboto-Regular"), local("DroidSans"), local("Tahoma");
 }
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: italic;
 	font-weight: 400;
 	src: local(".SFNSText-Italic"), local(".HelveticaNeueDeskInterface-Italic"), local(".LucidaGrandeUI"), local("Segoe UI Italic"), local("Ubuntu Italic"), local("Roboto-Italic"), local("DroidSans"), local("Tahoma");
 }
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: normal;
 	font-weight: 500;
 	src: local(".SFNSText-Medium"), local(".HelveticaNeueDeskInterface-MediumP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold"), local("Ubuntu Medium"), local("Roboto-Medium"), local("DroidSans-Bold"), local("Tahoma Bold");
 }
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: italic;
 	font-weight: 500;
 	src: local(".SFNSText-MediumItalic"), local(".HelveticaNeueDeskInterface-MediumItalicP4"), local(".LucidaGrandeUI"), local("Segoe UI Semibold Italic"), local("Ubuntu Medium Italic"), local("Roboto-MediumItalic"), local("DroidSans-Bold"), local("Tahoma Bold");
 }
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: normal;
 	font-weight: 700;
 	src: local(".SFNSText-Bold"), local(".HelveticaNeueDeskInterface-Bold"), local(".LucidaGrandeUI"), local("Segoe UI Bold"), local("Ubuntu Bold"), local("Roboto-Bold"), local("DroidSans-Bold"), local("Tahoma Bold");
 }
 
 @font-face {
-	font-family: system;
+	font-family: system-ui;
 	font-style: italic;
 	font-weight: 700;
 	src: local(".SFNSText-BoldItalic"), local(".HelveticaNeueDeskInterface-BoldItalic"), local(".LucidaGrandeUI"), local("Segoe UI Bold Italic"), local("Ubuntu Bold Italic"), local("Roboto-BoldItalic"), local("DroidSans-Bold"), local("Tahoma Bold");