web: enable use of subset web font files (for variable fonts only)

1 files changed, 23 insertions, 193 deletions

diff --git a/docs/inter.css b/docs/inter.css
index 6d14d03ab..53b1bb439 100644
--- a/docs/inter.css
+++ b/docs/inter.css
@@ -2,186 +2,38 @@
 layout: none
 ---
 {% assign font_v = site.data.fontinfo[0].version %}
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("font-files/Inter-Thin.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Thin.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("font-files/Inter-ThinItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ThinItalic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("font-files/Inter-ExtraLight.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLight.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("font-files/Inter-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraLightItalic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("font-files/Inter-Light.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Light.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("font-files/Inter-LightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-LightItalic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("font-files/Inter-Regular.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Regular.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("font-files/Inter-Italic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Italic.woff?v={{font_v}}") format("woff");
-}
+/*
+Font families defined by this CSS:
 
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("font-files/Inter-Medium.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Medium.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("font-files/Inter-MediumItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-MediumItalic.woff?v={{font_v}}") format("woff");
-}
+- "Inter"                  static "traditional" fonts for older web browsers
+- "Inter var"              single-axis variable fonts for all modern browsers
+- "Inter var experimental" multi-axis variable fonts for modern web browsers
 
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("font-files/Inter-SemiBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBold.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("font-files/Inter-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-SemiBoldItalic.woff?v={{font_v}}") format("woff");
-}
+Use like this in your CSS:
 
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("font-files/Inter-Bold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Bold.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("font-files/Inter-BoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BoldItalic.woff?v={{font_v}}") format("woff");
-}
+  :root { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    :root { font-family: 'Inter var', sans-serif; }
+  }
 
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("font-files/Inter-ExtraBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBold.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("font-files/Inter-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
-}
+------------------------- static ------------------------- */
+{% include Inter-static.css %}
 
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("font-files/Inter-Black.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-Black.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("font-files/Inter-BlackItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/Inter-BlackItalic.woff?v={{font_v}}") format("woff");
-}
+/* ----------------------- variable ----------------------- */
+{% include Inter-italic.var.css %}
+{% include Inter-roman.var.css %}
 
-/* -------------------------------------------------------
-Variable font.
-Usage:
+/* ----------- experimental multi-axis variable -----------
 
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single-file variable font is opt-in rather than the default.
+When using this, you will likely need to set font-variation-settings explicitly, e.g:
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
 */
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  font-display: swap;
-  src: url("font-files/Inter-roman.var.woff2?v={{font_v}}") format("woff2");
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  font-display: swap;
-  src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
-}
+{% include Inter.var.css %}
 
-/* Legacy naming compatibility */
+/* Legacy name (became legacy on Feb 2, 2019) */
 @font-face {
   font-family: 'Inter var alt';
   font-weight: 100 900;
@@ -198,25 +50,3 @@ Usage:
   font-display: swap;
   src: url("font-files/Inter-italic.var.woff2?v={{font_v}}") format("woff2");
 }
-
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
-@font-face {
-  font-family: 'Inter var experimental';
-  font-weight: 100 900;
-  font-style: oblique 0deg 10deg;
-  font-display: swap;
-  src: url("font-files/Inter.var.woff2?v={{font_v}}") format("woff2");
-}