Remove slnt/ital VF axis

This removes the slant/italic variable axis and breaks up the font in two: roman and italic. This change will allow diverging designs for italic (for example single-storey a). It also addresses the fact that most software, including web browsers, doesn't handle VFs with slnt or ital well.

4 files changed, 59 insertions, 199 deletions

diff --git a/misc/dist/install-linux.txt b/misc/dist/install-linux.txt
index 7e83c95f8..d04e35b35 100644
--- a/misc/dist/install-linux.txt
+++ b/misc/dist/install-linux.txt
@@ -7,8 +7,8 @@ differently. These instructions are for the most common Linux distributions:
 1. Create a folder called ".fonts" in your home directory.
    Example: mkdir -p ~/.fonts
 
-2. Copy the otf files in the "Inter Desktop" folder into your .fonts directory
-   Example: cp "Inter Desktop"/*.otf ~/.fonts/
+2. Copy the otf files in the "Desktop" folder into your .fonts directory
+   Example: cp "Desktop"/*.otf ~/.fonts/
 
 You may have to restart apps and/or your window server session.
 
diff --git a/misc/dist/install-mac.txt b/misc/dist/install-mac.txt
index 36c0517d4..f68ea93c5 100644
--- a/misc/dist/install-mac.txt
+++ b/misc/dist/install-mac.txt
@@ -6,13 +6,13 @@ Using Font Book:
 
 1. Open the "Font Book" application.
 2. In the main menu, select File, then Add Fonts...
-3. Find the "Inter Desktop" folder, select the folder (or open the folder and
+3. Find the "Desktop" folder, select the folder (or open the folder and
    select all the files inside the folder) and press the Open button.
 
 
 Using Finder:
 
-1. Copy the "Inter Desktop" folder
-2. Press cmd-shift-G in Finder and go to:  ~/Library/Fonts
+1. Copy the files in the "Desktop" folder
+2. Press cmd-shift-G in Finder and go to: ~/Library/Fonts
 3. Delete any existing "Inter" files and folders
-4. Paste the "Inter Desktop" folder
+4. Paste the copied files
diff --git a/misc/dist/install-win.txt b/misc/dist/install-win.txt
index 85c22af00..b1c757a11 100644
--- a/misc/dist/install-win.txt
+++ b/misc/dist/install-win.txt
@@ -1,8 +1,8 @@
 
 Installing on Windows 10:
 
-1. Copy the "Inter Desktop" folder in the zip file to your Desktop.
-2. Open the "Inter Desktop" folder on your Desktop.
+1. Copy the "Desktop" folder in the zip file to your Desktop.
+2. Open the "Desktop" folder on your Desktop.
 4. Select all font files.
 5. Right-click the selected files and choose "Install for all users".
 
@@ -21,5 +21,4 @@ of text. However, the hints for Inter are automatically generated and are
 not always a good thing.
 
 If you do prefer to use the version with hints, use the font files in the
-"Inter Hinted for Windows/Desktop" folder instead of "Inter Desktop".
-
+"Desktop with TrueType hints" folder instead of "Desktop".
diff --git a/misc/dist/inter.css b/misc/dist/inter.css
index f45001012..78359f9d7 100644
--- a/misc/dist/inter.css
+++ b/misc/dist/inter.css
@@ -1,200 +1,61 @@
+/* Variable fonts usage:
+:root { font-family: 'Inter', sans-serif; }
+@supports (font-variation-settings: normal) {
+  :root { font-family: 'InterVar', sans-serif; font-optical-sizing: auto; }
+} */
 @font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
-       url("Inter-Thin.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  font-display: swap;
-  src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ThinItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraLight.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  font-display: swap;
-  src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-Light.woff2?v=3.19") format("woff2"),
-       url("Inter-Light.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  font-display: swap;
-  src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-LightItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
-       url("Inter-Regular.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  font-display: swap;
-  src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
-       url("Inter-Italic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
-       url("Inter-Medium.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  font-display: swap;
-  src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-MediumItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
-       url("Inter-SemiBold.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
-       url("Inter-Bold.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  font-display: swap;
-  src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-BoldItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraBold.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-Black.woff2?v=3.19") format("woff2"),
-       url("Inter-Black.woff?v=3.19") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  font-display: swap;
-  src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
-       url("Inter-BlackItalic.woff?v=3.19") format("woff");
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
-@font-face {
-  font-family: 'Inter var';
+  font-family: 'InterVar';
   font-weight: 100 900;
   font-display: swap;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
+  src: url("Inter.var.woff2?v=3.19") format("woff2-variations"),
+       url("Inter.var.woff2?v=3.19") format("woff2");
 }
 @font-face {
-  font-family: 'Inter var';
+  font-family: 'InterVar';
   font-weight: 100 900;
   font-display: swap;
   font-style: italic;
   font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2?v=3.19") 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-display: swap;
-  font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2?v=3.19") format("woff2");
-}
+  src: url("Inter-italic.var.woff2?v=3.19") format("woff2-variations"),
+       url("Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+/* static fonts "Inter" */
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-Thin.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-Light.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-Regular.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-Italic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-Medium.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-Bold.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-Black.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'Inter'; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"); }
+/* static fonts "InterDisplay" */
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 100; font-display: swap; src: url("Inter-DisplayThin.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 100; font-display: swap; src: url("Inter-DisplayThinItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 200; font-display: swap; src: url("Inter-DisplayExtraLight.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 200; font-display: swap; src: url("Inter-DisplayExtraLightItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 300; font-display: swap; src: url("Inter-DisplayLight.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 300; font-display: swap; src: url("Inter-DisplayLightItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 400; font-display: swap; src: url("Inter-DisplayRegular.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 400; font-display: swap; src: url("Inter-DisplayItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 500; font-display: swap; src: url("Inter-DisplayMedium.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 500; font-display: swap; src: url("Inter-DisplayMediumItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 600; font-display: swap; src: url("Inter-DisplaySemiBold.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 600; font-display: swap; src: url("Inter-DisplaySemiBoldItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 700; font-display: swap; src: url("Inter-DisplayBold.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 700; font-display: swap; src: url("Inter-DisplayBoldItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 800; font-display: swap; src: url("Inter-DisplayExtraBold.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 800; font-display: swap; src: url("Inter-DisplayExtraBoldItalic.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: normal; font-weight: 900; font-display: swap; src: url("Inter-DisplayBlack.woff2?v=3.19") format("woff2"); }
+@font-face { font-family: 'InterDisplay'; font-style: italic; font-weight: 900; font-display: swap; src: url("Inter-DisplayBlackItalic.woff2?v=3.19") format("woff2"); }