update misc docs that goes into distributions

1 files changed, 38 insertions, 8 deletions

diff --git a/misc/dist/inter-ui.css b/misc/dist/inter-ui.css
index 959802968..d098a8af1 100644
--- a/misc/dist/inter-ui.css
+++ b/misc/dist/inter-ui.css
@@ -2,14 +2,16 @@
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 400;
-  src: url("Inter-UI-Regular.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-Regular.woff2") format("woff2"),
        url("Inter-UI-Regular.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 400;
-  src: url("Inter-UI-Italic.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-Italic.woff2") format("woff2"),
        url("Inter-UI-Italic.woff") format("woff");
 }
 
@@ -17,14 +19,16 @@
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 500;
-  src: url("Inter-UI-Medium.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-Medium.woff2") format("woff2"),
        url("Inter-UI-Medium.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 500;
-  src: url("Inter-UI-MediumItalic.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-MediumItalic.woff2") format("woff2"),
        url("Inter-UI-MediumItalic.woff") format("woff");
 }
 
@@ -32,14 +36,16 @@
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 700;
-  src: url("Inter-UI-Bold.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-Bold.woff2") format("woff2"),
        url("Inter-UI-Bold.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 700;
-  src: url("Inter-UI-BoldItalic.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-BoldItalic.woff2") format("woff2"),
        url("Inter-UI-BoldItalic.woff") format("woff");
 }
 
@@ -47,13 +53,37 @@
   font-family: 'Inter UI';
   font-style:  normal;
   font-weight: 900;
-  src: url("Inter-UI-Black.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-Black.woff2") format("woff2"),
        url("Inter-UI-Black.woff") format("woff");
 }
 @font-face {
   font-family: 'Inter UI';
   font-style:  italic;
   font-weight: 900;
-  src: url("Inter-UI-BlackItalic.woff2") format("woff2"),
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url("Inter-UI-BlackItalic.woff2") format("woff2"),
        url("Inter-UI-BlackItalic.woff") format("woff");
 }
+
+/*
+Single variable font.
+Note that you may want to do something like this to make sure you're serving
+constant fonts to older browsers:
+
+html {
+  font-family: 'Inter UI', sans-serif;
+}
+@supports (font-variation-settings: normal) {
+  html {
+    font-family: 'Inter UI var', sans-serif;
+  }
+}
+
+*/
+@font-face {
+  font-family: 'Inter UI var';
+  font-weight: 400 900; /* safe weight range */
+  src: url('Inter-UI.var.woff2') format("woff2-variations"),
+       url('Inter-UI.var.woff2') format("woff2");
+}