updates to distribution

7 files changed, 89 insertions, 83 deletions

diff --git a/misc/dist/hinted vs unhinted.txt b/misc/dist/about hinted fonts.txt
index 3df90acbd..0ef57aae4 100644
--- a/misc/dist/hinted vs unhinted.txt
+++ b/misc/dist/about hinted fonts.txt
@@ -1,9 +1,13 @@
 
-Inter font files comes in two versions:
+Inter font files comes in two versions: without TrueType hints
+and "hinted"; with TrueType hints.
 
-1. "unhinted" -- Without TrueType hints (the default)
+The folder called "Inter (Hinted, for Windows)" contains font files with
+ClearType hints. All other folders contains font files without hints.
 
-2. "hinted" -- With TrueType hints
+
+-----------------------------------------------------------------------------
+What are hints?
 
 
 The TrueType hints are used by ClearType on Windows machines where ClearType
@@ -14,5 +18,4 @@ Additionally, hints are little computer programs that takes up considerable
 disk space, meaning that font files with hints are larger than those without
 hints. This might be a consideration when using web fonts.
 
-The hints for Inter are automatically generated by a program called
-autohint.
+The hints for Inter are automatically generated by a program called autohint.
diff --git a/misc/dist/install-linux.txt b/misc/dist/install-linux.txt
index 0bd00d68f..b7a065452 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 (OTF)" folder into your .fonts directory
-   Example: cp "Inter (OTF)/*.otf" ~/.fonts/
+2. Copy the otf files in the "Inter" folder into your .fonts directory
+   Example: cp "Inter/*.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 877c5e3d5..2296e2610 100644
--- a/misc/dist/install-mac.txt
+++ b/misc/dist/install-mac.txt
@@ -1,24 +1,24 @@
+Installing traditional static/constant font files on macOS:
 
-Installing on macOS:
-
-1. Open the "Inter (OTF)" folder
-2. Select all font files
-3. Right-click (or ctrl-click) the selected files
-   and choose "Open with..." → "Font Book"
-4. Press the "Install" button
-
-If you get any errors, like Font Book saying there're duplicate fonts,
-cancel the installation and instead try the instructions below:
+1. Copy the "Inter" folder
+2. Press cmd-shift-G in Finder
+3. Enter "~/Library/Fonts" into the dialog that shows up and press RETURN.
+4. Delete any existing "Inter" files and folders
+5. Paste the "Inter" folder
 
 
-Installing on macOS, manually:
+Installing variable font on macOS:
 
-1. Copy the "Inter (OTF)" folder
+1. Copy the "Inter.otf" file in the "Inter (Variable)" folder
 2. Press cmd-shift-G in Finder
 3. Enter "~/Library/Fonts" into the dialog that shows up and press RETURN.
-4. Paste the "Inter (OTF)" folder.
+4. Delete any existing "Inter" files and folders
+5. Paste the "Inter.otf" file
 
-If you have a previous installation of Inter, you should make sure to
-remove those fonts files before installing new ones.
+Note that you can install both the traditional static fonts AND variable fonts
+alongside each other: Use the "Inter" and "Inter V (Variable)" folders.
+The "Inter V (Variable)" folder contains Inter named "Inter V", avoiding name
+conflicts.
 
-See https://github.com/rsms/inter for more information
+Having issues? Are you using an older version of macOS (older than 10.13)?
+Then you'll want to install the non-variable fonts (top of this document.)
diff --git a/misc/dist/install-win.txt b/misc/dist/install-win.txt
index fd3c0e286..478d5218a 100644
--- a/misc/dist/install-win.txt
+++ b/misc/dist/install-win.txt
@@ -1,7 +1,7 @@
 
 Installing on Windows 10:
 
-1. Open the "Inter (OTF)" folder
+1. Open the "Inter" folder
 2. Select all font files
 3. Copy and paste the font files to your Desktop
 4. Select all the font files on your Desktop
@@ -22,7 +22,5 @@ ClearType-hinted fonts
   not always a good thing.
 
   If you do prefer to use the version with hints, use the font files in the
-  folders with "hinted" in their name, like "Inter (TTF hinted)"
+  "Inter (Hinted, for Windows)" folder instead of "Inter".
 
-
-See https://github.com/rsms/inter for more information
diff --git a/misc/dist/inter.css b/misc/dist/inter.css
index 5b66579ff..4dfe9a7a3 100644
--- a/misc/dist/inter.css
+++ b/misc/dist/inter.css
@@ -3,16 +3,16 @@
   font-style:  normal;
   font-weight: 100;
   font-display: swap;
-  src: url("Inter-Thin-BETA.woff2") format("woff2"),
-       url("Inter-Thin-BETA.woff") format("woff");
+  src: url("Inter-Thin-BETA.woff2?v=3.10") format("woff2"),
+       url("Inter-Thin-BETA.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 100;
   font-display: swap;
-  src: url("Inter-ThinItalic-BETA.woff2") format("woff2"),
-       url("Inter-ThinItalic-BETA.woff") format("woff");
+  src: url("Inter-ThinItalic-BETA.woff2?v=3.10") format("woff2"),
+       url("Inter-ThinItalic-BETA.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -20,16 +20,16 @@
   font-style:  normal;
   font-weight: 200;
   font-display: swap;
-  src: url("Inter-ExtraLight-BETA.woff2") format("woff2"),
-       url("Inter-ExtraLight-BETA.woff") format("woff");
+  src: url("Inter-ExtraLight-BETA.woff2?v=3.10") format("woff2"),
+       url("Inter-ExtraLight-BETA.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 200;
   font-display: swap;
-  src: url("Inter-ExtraLightItalic-BETA.woff2") format("woff2"),
-       url("Inter-ExtraLightItalic-BETA.woff") format("woff");
+  src: url("Inter-ExtraLightItalic-BETA.woff2?v=3.10") format("woff2"),
+       url("Inter-ExtraLightItalic-BETA.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -37,16 +37,16 @@
   font-style:  normal;
   font-weight: 300;
   font-display: swap;
-  src: url("Inter-Light-BETA.woff2") format("woff2"),
-       url("Inter-Light-BETA.woff") format("woff");
+  src: url("Inter-Light-BETA.woff2?v=3.10") format("woff2"),
+       url("Inter-Light-BETA.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 300;
   font-display: swap;
-  src: url("Inter-LightItalic-BETA.woff2") format("woff2"),
-       url("Inter-LightItalic-BETA.woff") format("woff");
+  src: url("Inter-LightItalic-BETA.woff2?v=3.10") format("woff2"),
+       url("Inter-LightItalic-BETA.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -54,16 +54,16 @@
   font-style:  normal;
   font-weight: 400;
   font-display: swap;
-  src: url("Inter-Regular.woff2") format("woff2"),
-       url("Inter-Regular.woff") format("woff");
+  src: url("Inter-Regular.woff2?v=3.10") format("woff2"),
+       url("Inter-Regular.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 400;
   font-display: swap;
-  src: url("Inter-Italic.woff2") format("woff2"),
-       url("Inter-Italic.woff") format("woff");
+  src: url("Inter-Italic.woff2?v=3.10") format("woff2"),
+       url("Inter-Italic.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -71,16 +71,16 @@
   font-style:  normal;
   font-weight: 500;
   font-display: swap;
-  src: url("Inter-Medium.woff2") format("woff2"),
-       url("Inter-Medium.woff") format("woff");
+  src: url("Inter-Medium.woff2?v=3.10") format("woff2"),
+       url("Inter-Medium.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 500;
   font-display: swap;
-  src: url("Inter-MediumItalic.woff2") format("woff2"),
-       url("Inter-MediumItalic.woff") format("woff");
+  src: url("Inter-MediumItalic.woff2?v=3.10") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -88,16 +88,16 @@
   font-style:  normal;
   font-weight: 600;
   font-display: swap;
-  src: url("Inter-SemiBold.woff2") format("woff2"),
-       url("Inter-SemiBold.woff") format("woff");
+  src: url("Inter-SemiBold.woff2?v=3.10") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 600;
   font-display: swap;
-  src: url("Inter-SemiBoldItalic.woff2") format("woff2"),
-       url("Inter-SemiBoldItalic.woff") format("woff");
+  src: url("Inter-SemiBoldItalic.woff2?v=3.10") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -105,16 +105,16 @@
   font-style:  normal;
   font-weight: 700;
   font-display: swap;
-  src: url("Inter-Bold.woff2") format("woff2"),
-       url("Inter-Bold.woff") format("woff");
+  src: url("Inter-Bold.woff2?v=3.10") format("woff2"),
+       url("Inter-Bold.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 700;
   font-display: swap;
-  src: url("Inter-BoldItalic.woff2") format("woff2"),
-       url("Inter-BoldItalic.woff") format("woff");
+  src: url("Inter-BoldItalic.woff2?v=3.10") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -122,16 +122,16 @@
   font-style:  normal;
   font-weight: 800;
   font-display: swap;
-  src: url("Inter-ExtraBold.woff2") format("woff2"),
-       url("Inter-ExtraBold.woff") format("woff");
+  src: url("Inter-ExtraBold.woff2?v=3.10") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 800;
   font-display: swap;
-  src: url("Inter-ExtraBoldItalic.woff2") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff") format("woff");
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.10") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.10") format("woff");
 }
 
 @font-face {
@@ -139,16 +139,16 @@
   font-style:  normal;
   font-weight: 900;
   font-display: swap;
-  src: url("Inter-Black.woff2") format("woff2"),
-       url("Inter-Black.woff") format("woff");
+  src: url("Inter-Black.woff2?v=3.10") format("woff2"),
+       url("Inter-Black.woff?v=3.10") format("woff");
 }
 @font-face {
   font-family: 'Inter';
   font-style:  italic;
   font-weight: 900;
   font-display: swap;
-  src: url("Inter-BlackItalic.woff2") format("woff2"),
-       url("Inter-BlackItalic.woff") format("woff");
+  src: url("Inter-BlackItalic.woff2?v=3.10") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.10") format("woff");
 }
 
 /* -------------------------------------------------------
@@ -166,7 +166,7 @@ Usage:
   font-display: swap;
   font-style: normal;
   font-named-instance: 'Regular';
-  src: url("Inter-roman.var.woff2") format("woff2");
+  src: url("Inter-roman.var.woff2?v=3.10") format("woff2");
 }
 @font-face {
   font-family: 'Inter var';
@@ -174,7 +174,7 @@ Usage:
   font-display: swap;
   font-style: italic;
   font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2") format("woff2");
+  src: url("Inter-italic.var.woff2?v=3.10") format("woff2");
 }
 
 
@@ -196,5 +196,5 @@ explicitly, e.g.
   font-weight: 100 900;
   font-display: swap;
   font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2") format("woff2");
+  src: url("Inter.var.woff2?v=3.10") format("woff2");
 }
diff --git a/misc/dist/variable.txt b/misc/dist/variable.txt
index fc294a9e4..bde8922ef 100644
--- a/misc/dist/variable.txt
+++ b/misc/dist/variable.txt
@@ -1,23 +1,25 @@
 
-Variable fonts is a new technology still undergoing development.
+There are three flavors of variable Inter to choose from:
 
-The directory named "Inter (TTF variable)" contains three files:
+- Inter (Variable)
+  Multi-axis complete family called "Inter"
 
-- Inter.var.otf        -- Multi-axis complete family
-- Inter-italic.var.otf -- Single-axis italic style with variable weight axis.
-- Inter-roman.var.otf  -- Single-axis roman style with variable weight axis.
+- Inter V (Variable)
+  Multi-axis complete family called "Inter V"
+  Apart from the difference in family name, this is the same as the above.
+  Useful when you want to install traditional constant font files alongside
+  the variable version.
 
-The "Inter (web)" directory contains WOFF2 versions of these same
-font files.
+- Inter (Variable, single axis)
+  Single-axis variable fonts. Only the weight is variable, but not the slant.
+  These font files are provided only for technical compatibility with systems
+  that do not support mult-axis variable fonts.
 
-Support for variable fonts is limited as of late 2018, but support
-is quickly arriving to web browsers, operating systems and
-design application.
+Note: Variable fonts is a new technology still undergoing development.
+      System and application support is emerging but is not perfect.
 
-Multi-axis variable fonts have worse support than single-axis variable fonts,
-so in case you are experiencing issue with the multi-axis font, try the
-two single-axis variable fonts instead.
+The "Inter (Web)" directory contains WOFF2 files of both the multi-axis and
+single-axis variable font files.
 
-If you're in doubt or uncertain about variable fonts, then you
-probably don't need to use a variable font, and you can ignore
-files which name contains ".var"
+If you're in doubt or uncertain about variable fonts, then you probably don't
+need to use a variable font. Install the fonts in the "Inter" folder instead.
diff --git a/misc/tools/versionize.py b/misc/tools/versionize.py
index 8cc558de6..3d67e259e 100755
--- a/misc/tools/versionize.py
+++ b/misc/tools/versionize.py
@@ -32,6 +32,9 @@ def updateHTMLFile(filename):
     f.write(s)
 
 
+updateCSSFile(pjoin(BASEDIR, 'misc', 'dist', 'inter.css'))
+updateHTMLFile(pjoin(BASEDIR, 'docs', '_includes', 'preload-font-files.html'))
+
+# Note: The website CSS file uses Jekyll variables to add ?v= so don't need this anymore.
 # updateCSSFile(pjoin(BASEDIR, 'docs', 'inter.css'))
 # updateCSSFile(pjoin(BASEDIR, 'docs', 'inter-ui.css'))
-updateHTMLFile(pjoin(BASEDIR, 'docs', '_includes', 'preload-font-files.html'))