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

1 files changed, 17 insertions, 205 deletions

diff --git a/docs/inter-display.css b/docs/inter-display.css
index 96c47c4cf..f9efe79d5 100644
--- a/docs/inter-display.css
+++ b/docs/inter-display.css
@@ -2,221 +2,33 @@
 layout: none
 ---
 {% assign font_v = site.data.fontinfo[0].version %}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("font-files/InterDisplay-Thin.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Thin.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("font-files/InterDisplay-ThinItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ThinItalic.woff?v={{font_v}}") format("woff");
-}
+/*
+Font families defined by this CSS:
 
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("font-files/InterDisplay-ExtraLight.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraLight.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("font-files/InterDisplay-ExtraLightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraLightItalic.woff?v={{font_v}}") format("woff");
-}
+- "InterDisplay"                  static "traditional" fonts for older web browsers
+- "InterDisplay var"              single-axis variable fonts for all modern browsers
+- "InterDisplay var experimental" multi-axis variable fonts for modern web browsers
 
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("font-files/InterDisplay-Light.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Light.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("font-files/InterDisplay-LightItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-LightItalic.woff?v={{font_v}}") format("woff");
-}
+Use like this in your CSS:
 
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("font-files/InterDisplay-Regular.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Regular.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("font-files/InterDisplay-Italic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Italic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("font-files/InterDisplay-Medium.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Medium.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("font-files/InterDisplay-MediumItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-MediumItalic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("font-files/InterDisplay-SemiBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-SemiBold.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("font-files/InterDisplay-SemiBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-SemiBoldItalic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("font-files/InterDisplay-Bold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Bold.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("font-files/InterDisplay-BoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-BoldItalic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("font-files/InterDisplay-ExtraBold.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraBold.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("font-files/InterDisplay-ExtraBoldItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-ExtraBoldItalic.woff?v={{font_v}}") format("woff");
-}
-
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("font-files/InterDisplay-Black.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-Black.woff?v={{font_v}}") format("woff");
-}
-@font-face {
-  font-family: 'InterDisplay';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("font-files/InterDisplay-BlackItalic.woff2?v={{font_v}}") format("woff2"),
-       url("font-files/InterDisplay-BlackItalic.woff?v={{font_v}}") format("woff");
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'InterDisplay', sans-serif; }
+  h1,h2,h3,h4,h5,h6 { font-family: 'InterDisplay', sans-serif; }
   @supports (font-variation-settings: normal) {
-    html { font-family: 'InterDisplay var', sans-serif; }
+    h1,h2,h3,h4,h5,h6 { font-family: 'InterDisplay var', sans-serif; }
   }
-*/
-@font-face {
-  font-family: 'InterDisplay var';
-  font-weight: 100 900;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  font-display: swap;
-  src: url("font-files/InterDisplay-roman.var.woff2?v={{font_v}}") format("woff2");
-}
-@font-face {
-  font-family: 'InterDisplay var';
-  font-weight: 100 900;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  font-display: swap;
-  src: url("font-files/InterDisplay-italic.var.woff2?v={{font_v}}") format("woff2");
-}
 
-/* Legacy naming compatibility */
-@font-face {
-  font-family: 'InterDisplay var alt';
-  font-weight: 100 900;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  font-display: swap;
-  src: url("font-files/InterDisplay-roman.var.woff2?v={{font_v}}") format("woff2");
-}
-@font-face {
-  font-family: 'InterDisplay var alt';
-  font-weight: 100 900;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  font-display: swap;
-  src: url("font-files/InterDisplay-italic.var.woff2?v={{font_v}}") format("woff2");
-}
+------------------------- static ------------------------- */
+{% include InterDisplay-static.css %}
 
+/* ----------------------- variable ----------------------- */
+{% include InterDisplay-italic.var.css %}
+{% include InterDisplay-roman.var.css %}
 
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
+/* ----------- experimental multi-axis variable -----------
 
 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.
-
+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: 'InterDisplay var experimental';
-  font-weight: 100 900;
-  font-style: oblique 0deg 10deg;
-  font-display: swap;
-  src: url("font-files/InterDisplay.var.woff2?v={{font_v}}") format("woff2");
-}
+{% include InterDisplay.var.css %}