website: v4.0

docs/Makefile

@@ -19,10 +19,10 @@ build-tmp: .ruby-bundle
 	bundle exec jekyll build --disable-disk-cache -b /tmp/inter-v4-website -d _site-tmp
 
 serve: .ruby-bundle
-	$(Q)if [ ! -s lab/fonts ]; then \
-		[ ! -s lab/fonts/fonts ] || rm lab/fonts/fonts; \
-		rm -f lab/fonts && ln -fs ../../build/fonts lab/fonts; \
-	fi
+	$(Q)( sleep 3 && \
+		rm -f _site/lab/fonts && \
+		ln -s ../../../build/fonts _site/lab/fonts ) &
+	@#
 	@# need to delete generated content so that jekyll, being a little dumb,
 	@# can manage to copy the font files into there again.
 	@# Why not a symlink you ask? Jekyll traverses it and copies the content.
@@ -97,9 +97,9 @@ FONTS_SRC := \
 	$(FONTDIR)/static/InterDisplay-SemiBoldItalic.woff2 \
 	$(FONTDIR)/static/InterDisplay-Thin.woff2 \
 	$(FONTDIR)/static/InterDisplay-ThinItalic.woff2 \
-  $(FONTDIR)/var/Inter-Variable.woff2 \
-  $(FONTDIR)/var/Inter-Variable-Italic.woff2 \
-  $(FONTDIR)/var/Inter-Variable.ttf
+  $(FONTDIR)/var/InterVariable.woff2 \
+  $(FONTDIR)/var/InterVariable-Italic.woff2 \
+  $(FONTDIR)/var/InterVariable.ttf
 
 font-files/Inter-Regular.woff2: $(FONTS_SRC)
 	rm -rf font-files/Inter*

docs/_data/faq.yml

@@ -80,12 +80,12 @@
   q: "What are the technical details of Inter?"
   a: |
     UPM: 2048<br>
-    Variable axis <q>opsz</q> [14–28]<br>
+    Variable axis <q>opsz</q> [14–32]<br>
     Variable axis <q>wght</q> [100–900]<br>
     Constant axis <q>ital</q> [0, 9.4°]<br>
     Style classification: Sans-serif, Grotesk<br>
     x-height, opsz=14: 1118 UPM<br>
-    x-height, opsz=28: 1056 UPM<br>
+    x-height, opsz=32: 1056 UPM<br>
     Cap height: 1490 UPM<br>
     Ascender: 1984 UPM<br>
     Descender: -494 UPM<br>

docs/_data/fontinfo.json

@@ -55,7 +55,7 @@
       "usWinAscent": 1984,
       "usWinDescent": 494,
       "version": 4,
-      "xAvgCharWidth": 1314,
+      "xAvgCharWidth": 1313,
       "yStrikeoutPosition": 671,
       "yStrikeoutSize": 140,
       "ySubscriptXOffset": 0,
@@ -70,8 +70,8 @@
     "cmap": "[present but not decoded]",
     "glyf": "[present but not decoded]",
     "head": {
-      "checkSumAdjustment": 402214426,
-      "created": 3783201336,
+      "checkSumAdjustment": 1565796926,
+      "created": 3783283210,
       "flags": [
         "0: Baseline at y=0",
         "1: Left sidebearing point at x=0",
@@ -86,7 +86,7 @@
       "macStyle": [],
       "macStyle_raw": 0,
       "magicNumber": 1594834165,
-      "modified": 3783203555,
+      "modified": 3783283222,
       "tableVersion": 1.0,
       "unitsPerEm": 2048,
       "xMax": 5290,
@@ -105,7 +105,7 @@
       "metricDataFormat": 0,
       "minLeftSideBearing": -1513,
       "minRightSideBearing": -2200,
-      "numberOfHMetrics": 2935,
+      "numberOfHMetrics": 2926,
       "tableVersion": 65536,
       "xMaxExtent": 5290
     },
@@ -143,9 +143,9 @@
       "#274": "Single-story a",
       "#275": "Compact f",
       "#276": "Compact t",
-      "#3 fontId": "4.000;git-59063ec87;RSMS;Inter-Regular",
+      "#3 fontId": "4.000;git-401515a34;RSMS;Inter-Regular",
       "#4 fullName": "Inter Regular",
-      "#5 version": "Version 4.000;git-59063ec87",
+      "#5 version": "Version 4.000;git-401515a34",
       "#6 postscriptName": "Inter-Regular",
       "#7 trademark": "Inter UI and Inter is a trademark of rsms.",
       "#8 manufacturerName": "rsms",

docs/_layouts/default.html

@@ -10,8 +10,8 @@
     <link rel="stylesheet" href="{{url_root}}inter.css?v={{ release_version }}">
     <link rel="stylesheet" href="{{url_root}}res/base.css?v={{ base_css_v }}">
     <link rel="icon" type="image/png" href="{{url_root}}res/favicon.png?v={{ favicon_v }}">
-    <link rel="preload" href="{{url_root}}font-files/Inter-Variable.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
-    <link rel="preload" href="{{url_root}}font-files/Inter-Variable-Italic.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="{{url_root}}font-files/InterVariable.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
+    <link rel="preload" href="{{url_root}}font-files/InterVariable-Italic.woff2?v={{release_version}}" as="font" type="font/woff2" crossorigin="anonymous">
     <meta name="format-detection" content="telephone=no">
     <meta name="twitter:card" content="summary_large_image">
     <meta name="twitter:site" content="@rsms">

docs/_scripts/build-fontkit.js.sh

@@ -8,9 +8,9 @@
 # Use the result like this:
 #   <script type="module">
 #   import fontkit from "./fontkit-2.0.2.js"
-#   let data = await fetch("Inter-Variable.ttf").then(r => r.arrayBuffer())
+#   let data = await fetch("InterVariable.ttf").then(r => r.arrayBuffer())
 #   let font = fontkit.create(new Uint8Array(data))
-#   let instance = font.getVariation({wght: 600, opsz: 28})
+#   let instance = font.getVariation({wght: 600, opsz: 32})
 #   console.log({font, instance})
 #   </script>
 #

docs/download/index.html

@@ -3,7 +3,6 @@ layout: default
 title: Download Inter
 ---
 {% include defs.html -%}
-{% assign download_url = "https://github.com/rsms/inter/releases/download/v4.0-beta9h/Inter-4.0-beta9h.zip" %}
 
 <div class="row"><div><r-grid columns=8>
 
@@ -61,7 +60,7 @@ title: Download Inter
     <ol>
       <li>Open the "Font Book" application.</li>
       <li>In the main menu, select "File" → "Add Fonts..."</li>
-      <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
+      <li>Select "Inter.ttc", "InterVariable.ttf" and "InterVariable-Italic.ttf"</li>
       <li>Press the "Open" button</li>
     </ol>
     <p>
@@ -73,7 +72,7 @@ title: Download Inter
   <div id="install-windows" class="install-instructions">
     <ol>
       <li>Open the zip file you downloaded</li>
-      <li>Select "Inter.ttc", "Inter-Variable.ttf" and "Inter-Variable-Italic.ttf"</li>
+      <li>Select "Inter.ttc", "InterVariable.ttf" and "InterVariable-Italic.ttf"</li>
       <li>Right-click the selected files, choose "Install for all users"</li>
     </ol>
     <p>
@@ -87,8 +86,8 @@ title: Download Inter
   <div id="install-ubuntu" class="install-instructions">
     <ol>
       <li>Create a ".fonts" directory in your home. (<code>mkdir -p ~/.fonts</code>)</li>
-      <li>Copy "Inter.ttc", "Inter-Variable.ttf" and
-        "Inter-Variable-Italic.ttf" into your .fonts directory
+      <li>Copy "Inter.ttc", "InterVariable.ttf" and
+        "InterVariable-Italic.ttf" into your .fonts directory
         (<code>cp Inter.ttc *.ttf ~/.fonts/</code>)
       </li>
     </ol>
@@ -119,7 +118,7 @@ title: Download Inter
 
   <p>
     Inter fonts comes in two flavors: Variable and Static
-    (<code>Inter-Variable*.ttf</code> and <code>Inter.ttc</code>, respectively.)
+    (<code>InterVariable*.ttf</code> and <code>Inter.ttc</code>, respectively.)
   </p><p>
     Variable fonts is a new format which allows you to choose any
     weight and optical size. Variable fonts is a relatively new

docs/index.html

@@ -571,6 +571,7 @@ input[type="range"]:focus::-moz-range-track {
     font-size: 2em;
     position:absolute;
     top:-4rem; left: 1rem;
+    color: var(--foreground-color-bright);
   }
   .row.glyphs > :first-child { display: none }
   /*.row.glyphs h2 { font-size: 2rem; margin-bottom: 1rem }*/
@@ -635,9 +636,15 @@ input[type="range"]:focus::-moz-range-track {
   }
 }
 
+#faq {
+  margin-top: 2em;
+}
 #faq .columns > p {
   margin-bottom: 2em;
 }
+#faq h2 {
+  margin: 0 0 1.5em 0;
+}
 #faq h4:target {
   background: var(--active-bgcolor);
   outline: 8px solid var(--active-bgcolor);
@@ -677,7 +684,7 @@ input[type="range"]:focus::-moz-range-track {
       <p>
         The smaller "text" optical-size designs features a tall x-height to aid in legibility of lower-case text, with several contrast-enhancing details like ink traps and bridges. The larger "display" optical-size designs offers clean lines, smooth curves and delicate details for excellent rythm of large text.
       </p><p>
-        <a href="#features">38&nbsp;OpenType features</a> are provided as well,
+        Many <a href="#features">OpenType features</a> are provided as well,
         including contextual alternates which adjusts punctuation depending on the
         shape of surrounding glyphs, slashed zero for when you need to
         disambiguate "0" from "o", tabular numbers, and much more.
@@ -944,7 +951,7 @@ input[type="range"]:focus::-moz-range-track {
   <p class=label>Example text, Regular</p>
   <div class="columns size1">
   <p>
-One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; and other authorities even attribute it to Alexander the Great.
+One of the most famous lighthouses of antiquity, as I have already pointed out, was the pharos of Alexandria, which ancient writers included among the Seven Wonders of the World. It might naturally be supposed that the founder of so remarkable a monument of architectural skill would be well known; yet while Strabo and Pliny, Eusebius, Suidas, and Lucian ascribe its erection to Ptolemæus Philadelphus, the wisest and most benevolent of the Ptolemean kings of Egypt, by Tzetzes and Ammianus Marcellinus the honour is given to Cleopatra; <em>and other authorities even attribute it to Alexander the Great.</em>
 </p><p>
 All that can with certainty be affirmed is, that the architect was named Sostrates. Montfaucon, in his great work, endeavours to explain how it is that while we are thus informed as to the architect, we are so doubtful as to the founder, whom, for his part, he believes to have been Ptolemæus. Our ignorance, he says, is owing to the knavery of Sostrates. He wished to immortalize his name; a blameless wish, if at the same time he had not sought to suppress that of the founder, whose glory it was to have suggested the erection. For this purpose Sostrates devised a stratagem which proved successful; deep in the wall of the tower he cut the following inscription: “Sostrates of Cnidos, son of Dexiphanes, to the gods who Protect those who are upon the Sea.” But, mistrustful that King Ptolemæus would scarcely be satisfied with an inscription in which he was wholly ignored, he covered it with a light coat of cement, which he knew would not long endure the action of the atmosphere, and carved thereon the name of Ptolemæus. After a few years the cement and the name of the king disappeared, and revealed the inscription which gave all the glory to Sostrates.
 </p><p>
@@ -952,7 +959,7 @@ Montfaucon, with genial credulity, adopts this anecdote as authentic, and adds:
 </p><p>
 To solve the difficulty, Champollion represents the pharos as constructed by Ptolemæus Soter. But, as Edrisi solemnly remarks, “God alone knows what is the truth.”
 </p><p>
-Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language. From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light.
+Much etymological erudition has been expended on the derivation of the word Pharos. As far as the Alexandrian light-tower is concerned, there can be no doubt that it was named from the islet on which it stood; yet Isidore asserts that the word came from φὼς, “light,” and ὁρἀν, “to see.” To quote again from Montfaucon: <em>That numerous persons, who have not read the Greek authors, should exercise their ingenuity to no avail in the extraction of these etymologies, is far less surprising than that so good a scholar as Isaac Vossius should seek the origin of Pharos in the Greek language.</em> From ϕαἰνειν, “to shine,” he says, comes ϕανερός, and from ϕανερός, ϕάρος.... But the island was called Pharos seven or eight hundred years before it possessed either tower or beacon-light.
 </p><p>
 The most reasonable conjecture seems to be that the word is a Hellenic form of Phrah, the Egyptian name of the sun, to whom the Alexandrian lighthouse would naturally be compared by wondering spectators, or dedicated by a devout prince.
 </p><p>
@@ -1183,7 +1190,6 @@ At a later date we find the word applied to very different objects, though alway
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dlig">dlig</a> Discretionary Ligatures<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ae#tag-dnom">dnom</a> Denominators<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_fj#tag-frac">frac</a> Fractions<br>
-        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-liga">liga</a> Standard Ligatures<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-locl">locl</a> Localized Forms<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-numr">numr</a> Numerators<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_ko#tag-ordn">ordn</a> Ordinals<br>
@@ -1192,9 +1198,9 @@ At a later date we find the word applied to very different objects, though alway
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-sinf">sinf</a> Scientific Inferiors<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-smcp">smcp</a> Small Capitals (limited)<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss01</a> Open digits<br>
-        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss02</a> Disambiguation (with zero<)<br>
+        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss02</a> Disambiguation (with zero)<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss03</a> Round quotes &amp; commas<br>
-        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss04</a> Disambiguation (no zero<)<br>
+        <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss04</a> Disambiguation (no zero)<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss05</a> Circled characters<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss06</a> Squared characters<br>
         <a class=feat href="https://learn.microsoft.com/typography/opentype/spec/features_pt#tag-ss01---ss20">ss07</a> Square punctuation<br>
@@ -1247,8 +1253,8 @@ At a later date we find the word applied to very different objects, though alway
             <input type="checkbox" name="opsz" checked>
             Small optical size
           </label> -->
-          <div class="slider opsz-slider" title='opsz from 14 "text" to 28 "display"'>
-            <input type="range" name="opsz" value=28 min=14 max=28 step=0.1>
+          <div class="slider opsz-slider" title='opsz from 14 "text" to 32 "display"'>
+            <input type="range" name="opsz" value=32 min=14 max=32 step=0.1>
             Optical size
           </div>
           <label class="switch-button opsz-switch">

docs/inter-display.css

@@ -12,16 +12,16 @@ layout: none
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2');
-  font-variation-settings: "opsz" 28;
+  src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2');
+  font-variation-settings: "opsz" 32;
 }
 @font-face {
   font-family: 'InterDisplay var';
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2');
-  font-variation-settings: "opsz" 28;
+  src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2');
+  font-variation-settings: "opsz" 32;
 }
 
 

docs/inter.css

@@ -20,18 +20,18 @@ Usage example:
   font-style: normal;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2');
+  src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2');
 }
 @font-face {
   font-family: InterVariable;
   font-style: italic;
   font-weight: 100 900;
   font-display: swap;
-  src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2');
+  src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2');
 }
 /* legacy name "Inter var" (Oct 2023) */
-@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2'); }
-@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2'); }
+@font-face { font-family:'Inter var'; font-style:normal; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable.woff2?v={{font_v}}') format('woff2'); }
+@font-face { font-family:'Inter var'; font-style:italic; font-weight:100 900; font-display:swap; src: url('font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2'); }
 /* static fonts */
 @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"); }
 @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"); }

docs/lab/font-files.js

@@ -1,11 +1,6 @@
-var fontFamilyName,
-    fontFamilyNameHinted,
-    fontFamilyNameVar,
-    fontFamilyNameVarHinted,
-    fontFamilyNameDisplay,
-    fontFamilyNameDisplayHinted,
-    fontFamilyNameDisplayVar,
-    fontFamilyNameDisplayVarHinted;
+var fontFamilyName
+var fontFamilyNameDisplay
+var fontFamilyNameVar
 
 ;(()=>{
   let isLocalServer = document.location.protocol == "http:"
@@ -19,37 +14,29 @@ var fontFamilyName,
   );
 
   fontFamilyName = 'Inter-v' + fontVersion
-  fontFamilyNameHinted = 'Inter-hinted-v' + fontVersion
-  fontFamilyNameVar = 'Inter-var-v' + fontVersion
-  fontFamilyNameVarHinted = 'Inter-var-hinted-v' + fontVersion
   fontFamilyNameDisplay = 'InterDisplay-v' + fontVersion
-  fontFamilyNameDisplayHinted = 'InterDisplay-hinted-v' + fontVersion
-  fontFamilyNameDisplayVar = 'InterDisplay-var-v' + fontVersion
-  fontFamilyNameDisplayVarHinted = 'InterDisplay-var-hinted-v' + fontVersion
+  fontFamilyNameVar = 'Inter-var-v' + fontVersion
 
   let outbuf = []
   function w(s) { outbuf.push(s) }
 
-  function getStyleName(weight, isItalic) {
-    let style = ""
-    switch (weight) {
-      case 100: style = "Thin"; break
-      case 200: style = "ExtraLight"; break
-      case 300: style = "Light"; break
-      case 400: style = ""; break
-      case 500: style = "Medium"; break
-      case 600: style = "SemiBold"; break
-      case 700: style = "Bold"; break
-      case 800: style = "ExtraBold"; break
-      case 900: style = "Black"; break
-    }
-    return style + (isItalic ? "Italic" : "")
-  }
-
   function genStaticFontFace(family, cssname, filepath, weight, isItalic) {
-    let styleName = getStyleName(weight, isItalic)
+    let styleName = ""
+    switch (weight) {
+      case 100: styleName = "Thin"; break
+      case 200: styleName = "ExtraLight"; break
+      case 300: styleName = "Light"; break
+      case 400: styleName = ""; break
+      case 500: styleName = "Medium"; break
+      case 600: styleName = "SemiBold"; break
+      case 700: styleName = "Bold"; break
+      case 800: styleName = "ExtraBold"; break
+      case 900: styleName = "Black"; break
+    }
     if (styleName == "") {
       styleName = isItalic ? "Italic" : "Regular"
+    } else if (isItalic) {
+      styleName += "Italic"
     }
     let filename = `${family}-${styleName}`
     w(`@font-face {`)
@@ -69,15 +56,10 @@ var fontFamilyName,
     w(`  url("../font-files/${filename}.woff?${fontVersion}") format("woff2");`)
     w(`}`)
   }
-
-  let families = [
-    ["Inter",        "static",        fontFamilyName],
-    ["Inter",        "static-hinted", fontFamilyNameHinted],
-    ["InterDisplay", "static",        fontFamilyNameDisplay],
-    ["InterDisplay", "static-hinted", fontFamilyNameDisplayHinted],
-  ]
-
-  for (let [family, filepath, cssname] of families) {
+  for (let [family, filepath, cssname] of [
+    ["Inter",        "static", fontFamilyName],
+    ["InterDisplay", "static", fontFamilyNameDisplay],
+  ]) {
     for (let weight of [100,200,300,400,500,600,700,800,900]) {
       for (let isItalic of [true,false]) {
         genStaticFontFace(family, cssname, filepath, weight, isItalic)
@@ -85,61 +67,27 @@ var fontFamilyName,
     }
   }
 
-  for (let [family,cssname] of [
-    ["Inter",fontFamilyNameVar],
-    ["InterDisplay",fontFamilyNameDisplayVar],
+  for (let [srcname,cssname] of [
+    ["InterVariable", fontFamilyNameVar],
+    ["InterVariable-Italic", fontFamilyNameVar],
   ]) {
     w(`@font-face {
       font-family: '${cssname}';
-      font-style: oblique 0deg 10deg;
+      font-style: ${srcname.indexOf("Italic") != -1 ? "italic" : "normal"};
       font-weight: 100 900;
       font-display: block;
       src:`)
     if (includeLabLocalFiles) {
-      w(`  url('fonts/var/${family}.var.woff2?${fontVersion}') format("woff2"),`)
+      w(`  url('fonts/var/${srcname}.woff2?${fontVersion}') format("woff2"),`)
     }
-    w(`  url('../font-files/${family}.var.woff2?${fontVersion}') format("woff2");`)
-    w(`}`)
-
-    w(`@font-face {
-      font-family: '${cssname} safari';
-      font-style: oblique 0deg 10deg;
-      font-display: block;
-      src:`)
-    if (includeLabLocalFiles) {
-      w(`  url('fonts/var/${family}.var.woff2?${fontVersion}') format("woff2"),`)
-    }
-    w(`  url('../font-files/${family}.var.woff2?${fontVersion}') format("woff2");`)
+    w(`  url('../font-files/${srcname}.woff2?${fontVersion}') format("woff2");`)
     w(`}`)
   }
 
   let css = outbuf.join("\n")
-
   // console.log(css)
-
   const fontCSS = document.createElement("style")
   fontCSS.setAttribute('type', 'text/css')
   fontCSS.appendChild(document.createTextNode(css))
   document.head.appendChild(fontCSS)
-
-  // // update family names to include CSS fallbacks
-  // [rsms] Disabled to avoid local-font fallback
-  // fontFamilyName += ", 'Inter'"
-  // fontFamilyNameHinted += ", 'Inter'"
-  // fontFamilyNameVar += ", 'Inter var'"
-  // fontFamilyNameVarHinted += ", 'Inter var'"
-
 })()
-
-// const fontCSSTemplate = document.querySelector('#font-css')
-// const fontCSS = fontCSSTemplate.cloneNode(true)
-// fontCSS.innerHTML = fontCSS.innerHTML
-//   .replace(/Inter-var-VERSION/g, fontFamilyNameVar)
-//   .replace(/Inter-var-hinted-VERSION/g, fontFamilyNameVarHinted)
-//   .replace(/Inter-hinted-VERSION/g, fontFamilyNameHinted)
-//   .replace(/Inter-VERSION/g, fontFamilyName)
-//   .replace(/(\.woff2?)/g, '$1?r='+fontVersion)
-// fontCSS.setAttribute('id', '')
-// fontCSS.setAttribute('type', 'text/css')
-// document.head.appendChild(fontCSS)
-

docs/lab/glyphinfo.json

@@ -1461,7 +1461,6 @@
 , ["brokenbar", "brokenbar", 0, "00A6", "BROKEN BAR"]
 , ["backslash", "backslash", 0, "005C", "REVERSE SOLIDUS"]
 , ["hyphen", "hyphen", 0, "002D", "HYPHEN-MINUS"]
-, ["softhyphen", "softhyphen", 0, "00AD", "SOFT HYPHEN"]
 , ["endash", "endash", 0, "2013", "EN DASH"]
 , ["figuredash", "figuredash", 0, "2012", "FIGURE DASH"]
 , ["emdash", "emdash", 0, "2014", "EM DASH"]
@@ -2583,14 +2582,6 @@
 , ["uni2053", "uni2053", 0, "2053", "SWUNG DASH"]
 , ["uni2054", "uni2054", 0, "2054", "INVERTED UNDERTIE"]
 , ["uni2055", "uni2055", 0, "2055", "FLOWER PUNCTUATION MARK"]
-, ["uni2056", "uni2056", 0, "2056", "THREE DOT PUNCTUATION"]
-, ["uni2058", "uni2058", 0, "2058", "FOUR DOT PUNCTUATION"]
-, ["uni2059", "uni2059", 0, "2059", "FIVE DOT PUNCTUATION"]
-, ["uni205a_", "uni205A", 0, "205A", "TWO DOT PUNCTUATION"]
-, ["uni205b_", "uni205B", 0, "205B", "FOUR DOT MARK"]
-, ["uni205c_", "uni205C", 0, "205C", "DOTTED CROSS"]
-, ["uni205d_", "uni205D", 0, "205D", "TRICOLON"]
-, ["uni205e_", "uni205E", 0, "205E", "VERTICAL FOUR DOTS"]
 , ["verticalbardbl", "verticalbardbl", 0, "2016", "DOUBLE VERTICAL LINE"]
 , ["hyphen____", "hyphen__", 0, "2010", "HYPHEN"]
 , ["hyphennobreak", "hyphennobreak", 0, "2011", "NON-BREAKING HYPHEN"]

docs/lab/index.html

@@ -16,19 +16,10 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
   }
 }
 
-// Safari?
-(function(u){ if (
-  u.indexOf('Safari/') != -1 &&
-  u.indexOf('Chrome/') == -1 &&
-  u.indexOf('Chromium/') == -1
-) {
-  document.documentElement.classList.add('safari')
-} })(navigator.userAgent);
-
     </script>
-    <script type="text/javascript" src="samples.js?v=3.19"></script>
-    <script type="text/javascript" src="build-version.js?v=3.19"></script>
-    <script type="text/javascript" src="font-files.js?v=3.19"></script>
+    <script type="text/javascript" src="samples.js?v=4.0"></script>
+    <script type="text/javascript" src="build-version.js?v=4.0"></script>
+    <script type="text/javascript" src="font-files.js?v=4.0"></script>
     <link href="lab.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese">
   </head>
@@ -76,12 +67,6 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
         <input type="range" value="400" step="1" min="100" max="900" name="varWeight">
       </label>
 
-      <label class="label-and-value with-slider varfontControl">
-        <span title="Slant">slnt:</span>
-        <input type="number" value="0" step="0.1" min="0" max="10" name="varSlantNum">
-        <input type="range" value="0" step="0.01" min="0" max="10" name="varSlant">
-      </label>
-
       <label class="label-and-value staticfontControl">
         <span>Weight:</span>
         <select name="weight" style="max-width:100px">
@@ -169,7 +154,7 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
       <span>Compare:</span>
       <select name="compare">
         <option value="-" selected>Nothing</option>
-        <option value="inter-other">Other Inter family</option>
+        <!-- <option value="inter-other">Other Inter family</option> -->
         <option value="system">System font</option>
       </select>
       </label>
@@ -178,44 +163,60 @@ if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
       <h3>Features</h3>
 
       <div class="checkbox-group">
-      <!-- case --><label title="Upper case adjustments"><input type="checkbox" class="featopt" name="feat:case"><span>case &nbsp;(Case alternates)</span></label>
-      <!-- cpsp --><label title='Capital spacing (adds 16 UPM to each sidebearing)'><input type="checkbox" class="featopt" name="feat:cpsp"><span>cpsp &nbsp;(Capital spacing)</span></label>
-      <!-- dlig --><label title="Discretionary ligatures, e.g. !? -> interrobang"><input type="checkbox" class="featopt" name="feat:dlig"><span>dlig &nbsp;(Discretionary ligatures)</span></label>
+      <!-- case --><label title="Case-Sensitive Forms"><input type="checkbox" class="featopt" name="feat:case"><span>case &nbsp;(Case-Sensitive Forms)</span></label>
+      <!-- dlig --><label title="Discretionary ligatures"><input type="checkbox" class="featopt" name="feat:dlig"><span>dlig &nbsp;(Discretionary ligatures)</span></label>
       <!-- frac --><label title="Contextual automatic fractions"><input type="checkbox" class="featopt" name="feat:frac"><span>frac &nbsp;(Auto fractions)</span></label>
       <!-- dnom --><label title="Convert all numbers to denominators"><input type="checkbox" class="featopt" name="feat:dnom"><span>dnom &nbsp;(Denominators)</span></label>
       <!-- numr --><label title="Convert all numbers to numerators"><input type="checkbox" class="featopt" name="feat:numr"><span>numr &nbsp;(Numerators)</span></label>
-      <!-- salt --><label title='Stylistic Alternates'><input type="checkbox" class="featopt" name="feat:salt"><span>salt &nbsp;(Stylistic Alternates)</span></label>
       <!-- subs --><label title="Subscript"><input type="checkbox" class="featopt" name="feat:subs"><span>subs &nbsp;(Subscript)</span></label>
       <!-- sups --><label title="Superscript"><input type="checkbox" class="featopt" name="feat:sups"><span>sups &nbsp;(Superscript)</span></label>
       <!-- tnum --><label title="Tabular numbers (fixed width)"><input type="checkbox" class="featopt" name="feat:tnum"><span>tnum &nbsp;(Tabular numbers)</span></label>
       <!-- zero --><label title="Slashed zero"><input type="checkbox" class="featopt" name="feat:zero"><span>zero &nbsp;(Slashed zero)</span></label>
-      <label title='Stylistic set 1 "Open Digits"'><input type="checkbox" class="featopt" name="feat:ss01"><span>ss01 &nbsp;(Open Digits)</span></label>
-      <label title='Stylistic set 2 "Disambiguation"'><input type="checkbox" class="featopt" name="feat:ss02"><span>ss02 &nbsp;(Disambiguation)</span></label>
-      <label title='Stylistic set 3 "Lower case r curves into round neighbors"'><input type="checkbox" class="featopt" name="feat:ss03"><span>ss03 &nbsp;(Curved r)</span></label>
-      <label title='Stylistic set 4 "Disambiguation without slashed zero"'><input type="checkbox" class="featopt" name="feat:ss04"><span>ss04 &nbsp;(Disambiguation w/o zero)</span></label>
-      <label title='Character Variant 1 "Alternate one"'><input type="checkbox" class="featopt" name="feat:cv01"><span>cv01 &nbsp;(Alternate one)</span></label>
-      <label title='Character Variant 2 "Open four"'><input type="checkbox" class="featopt" name="feat:cv02"><span>cv02 &nbsp;(Open four)</span></label>
-      <label title='Character Variant 3 "Open six"'><input type="checkbox" class="featopt" name="feat:cv03"><span>cv03 &nbsp;(Open six)</span></label>
-      <label title='Character Variant 4 "Open nine"'><input type="checkbox" class="featopt" name="feat:cv04"><span>cv04 &nbsp;(Open nine)</span></label>
-      <label title='Character Variant 5 "Lower case L with tail")'><input type="checkbox" class="featopt" name="feat:cv05"><span>cv05 &nbsp;(Lower case L with tail)</span></label>
-      <label title='Character Variant 6 "Lower case r with curved tail")'><input type="checkbox" class="featopt" name="feat:cv06"><span>cv06 &nbsp;(Curved lower case r)</span></label>
-      <label title='Character Variant 7 "Alternate German double-s")'><input type="checkbox" class="featopt" name="feat:cv07"><span>cv07 &nbsp;(German double-s)</span></label>
-      <label title='Character Variant 8 "Upper-case i with serif")'><input type="checkbox" class="featopt" name="feat:cv08"><span>cv08 &nbsp;(Upper-case i with serif)</span></label>
-      <label title='Character Variant 9 "Flat top three")'><input type="checkbox" class="featopt" name="feat:cv09"><span>cv09 &nbsp;(Flat top three)</span></label>
-      <label title='Character Variant 10 "Capital G with spur")'><input type="checkbox" class="featopt" name="feat:cv10"><span>cv10 &nbsp;(Capital G with spur)</span></label>
-      <label title='Character Variant 11 "Single-storey a")'><input type="checkbox" class="featopt" name="feat:cv11"><span>cv11 &nbsp;(Single-storey a)</span></label>
       </div>
 
       <div class="checkbox-group">
-      <span>Default-on features:</span>
-      <label title="Standard ligatures"><input type="checkbox" class="featopt" name="feat:liga=0"> Disable liga &nbsp;(Standard ligatures)</label>
-      <label title="Contextual alternates"><input type="checkbox" class="featopt" name="feat:calt=0"> Disable calt &nbsp;(Contextual alternates)</label>
-      <label title="Glyph Composition/Decomposition"><input type="checkbox" class="featopt" name="feat:ccmp=0"> Disable ccmp</label>
-      <label title="Kerning"><input type="checkbox" class="featopt" name="feat:kern=0"> Disable kern &nbsp;(Kerning)</label>
+      <span>Stylistic sets:</span>
+      <!-- ss01 --><label title='Stylistic set 1 "Open Digits"'><input type="checkbox" class="featopt" name="feat:ss01"><span>ss01 &nbsp;(Open Digits)</span></label>
+      <!-- ss02 --><label title='Stylistic set 2 "Disambiguation (with zero)"'><input type="checkbox" class="featopt" name="feat:ss02"><span>ss02 &nbsp;(Disambiguation w/ zero)</span></label>
+      <!-- ss03 --><label title='Stylistic set 3 "Round quotes &amp; commas"'><input type="checkbox" class="featopt" name="feat:ss03"><span>ss03 &nbsp;(Round quotes &amp; commas)</span></label>
+      <!-- ss04 --><label title='Stylistic set 4 "Disambiguation without slashed zero"'><input type="checkbox" class="featopt" name="feat:ss04"><span>ss04 &nbsp;(Disambiguation w/o zero)</span></label>
+      <!-- ss05 --><label title='Stylistic set 5 "Circled characters"'><input type="checkbox" class="featopt" name="feat:ss05"><span>ss05 &nbsp;(Circled characters)</span></label>
+      <!-- ss06 --><label title='Stylistic set 6 "Squared characters"'><input type="checkbox" class="featopt" name="feat:ss06"><span>ss06 &nbsp;(Squared characters)</span></label>
+      <!-- ss07 --><label title='Stylistic set 7 "Square punctuation"'><input type="checkbox" class="featopt" name="feat:ss07"><span>ss07 &nbsp;(Square punctuation)</span></label>
+      <!-- ss08 --><label title='Stylistic set 8 "Square quotes"'><input type="checkbox" class="featopt" name="feat:ss08"><span>ss08 &nbsp;(Square quotes)</span></label>
       </div>
 
-      <div>
-        <a href="var.html">Variable test page</a>
+      <div class="checkbox-group">
+      <span>Character variants:</span>
+      <!-- cv01 --><label title='Character Variant 1 "Alternate one"'><input type="checkbox" class="featopt" name="feat:cv01"><span>cv01 &nbsp;(Alternate one)</span></label>
+      <!-- cv02 --><label title='Character Variant 2 "Open four"'><input type="checkbox" class="featopt" name="feat:cv02"><span>cv02 &nbsp;(Open four)</span></label>
+      <!-- cv03 --><label title='Character Variant 3 "Open six"'><input type="checkbox" class="featopt" name="feat:cv03"><span>cv03 &nbsp;(Open six)</span></label>
+      <!-- cv04 --><label title='Character Variant 4 "Open nine"'><input type="checkbox" class="featopt" name="feat:cv04"><span>cv04 &nbsp;(Open nine)</span></label>
+      <!-- cv05 --><label title='Character Variant 5 "Lower case L with tail")'><input type="checkbox" class="featopt" name="feat:cv05"><span>cv05 &nbsp;(Lower case L with tail)</span></label>
+      <!-- cv06 --><label title='Character Variant 6 "Simplified u")'><input type="checkbox" class="featopt" name="feat:cv06"><span>cv06 &nbsp;(Simplified u)</span></label>
+      <!-- cv07 --><label title='Character Variant 7 "Alternate German double-s")'><input type="checkbox" class="featopt" name="feat:cv07"><span>cv07 &nbsp;(German double-s)</span></label>
+      <!-- cv08 --><label title='Character Variant 8 "Upper-case i with serif")'><input type="checkbox" class="featopt" name="feat:cv08"><span>cv08 &nbsp;(Upper-case i with serif)</span></label>
+      <!-- cv09 --><label title='Character Variant 9 "Flat top three")'><input type="checkbox" class="featopt" name="feat:cv09"><span>cv09 &nbsp;(Flat top three)</span></label>
+      <!-- cv10 --><label title='Character Variant 10 "Capital G with spur")'><input type="checkbox" class="featopt" name="feat:cv10"><span>cv10 &nbsp;(Capital G with spur)</span></label>
+      <!-- cv11 --><label title='Character Variant 11 "Single-storey a")'><input type="checkbox" class="featopt" name="feat:cv11"><span>cv11 &nbsp;(Single-storey a)</span></label>
+      <!-- cv12 --><label title='Character Variant 12 "Compact f")'><input type="checkbox" class="featopt" name="feat:cv12"><span>cv12 &nbsp;(Compact f)</span></label>
+      <!-- cv13 --><label title='Character Variant 13 "Compact t")'><input type="checkbox" class="featopt" name="feat:cv13"><span>cv13 &nbsp;(Compact t)</span></label>
+      </div>
+
+      <div class="checkbox-group">
+      <span>Partial or uncommon:</span>
+      <!-- cpsp --><label title='Capital spacing (adds 16 UPM to each sidebearing)'><input type="checkbox" class="featopt" name="feat:cpsp"><span>cpsp &nbsp;(Capital spacing)</span></label>
+      <!-- c2sc --><label title="Small Capitals From Capitals"><input type="checkbox" class="featopt" name="feat:c2sc"><span>c2sc &nbsp;(Small Caps; incomplete)</span></label>
+      <!-- salt --><label title='Stylistic Alternates'><input type="checkbox" class="featopt" name="feat:salt"><span>salt &nbsp;(Stylistic Alternates)</span></label>
+      <!-- aalt --><label title='Access All Alternates'><input type="checkbox" class="featopt" name="feat:aalt"><span>aalt &nbsp;(Access All Alternates)</span></label>
+      </div>
+
+      <div class="checkbox-group">
+      <span>Enabled by default:</span>
+      <!-- calt --><label title="Contextual alternates"><input type="checkbox" class="featopt" name="feat:calt=0"> Disable calt &nbsp;(Contextual alternates)</label>
+      <!-- ccmp --><label title="Glyph Composition/Decomposition"><input type="checkbox" class="featopt" name="feat:ccmp=0"> Disable ccmp</label>
+      <!-- locl --><label title='Localized Forms'><input type="checkbox" class="featopt" name="feat:locl=0"><span>Disable locl &nbsp;(Localized Forms)</span></label>
+      <!-- kern --><label title="Kerning"><input type="checkbox" class="featopt" name="feat:kern=0"> Disable kern &nbsp;(Kerning)</label>
       </div>
 
     </div>
@@ -254,16 +255,7 @@ function InterDynamicTracking(fontSize, family /* :"text"|"display" */) {
   return a + b * Math.pow(Math.E, c * fontSize)
 }
 
-// provide hinted=1 to use TTF hinted fonts.
-// not exposed in UI as it only works when serving the site locally
-// with fonts in the build/fonts directory.
-const hinted = location.search.indexOf('hinted=1') != -1
-const familyName = hinted ? fontFamilyNameHinted : fontFamilyName;
-
-if (hinted) {
-  document.body.classList.add('hinted')
-}
-document.body.style.fontFamily = familyName
+document.body.style.fontFamily = fontFamilyName
 
 
 function parseQueryString(qs) {
@@ -838,19 +830,16 @@ function main() {
 
   let usingVarFont = false
   let usingFontFamily = "text"
-  var varWeightRange, varSlantRange, varOpszRange
+  var varWeightRange, varOpszRange
   var varWeightSettingValueImpl = false
-  var varSlantSettingValueImpl = false
   var varOpszSettingValueImpl = false
 
   function getFontFamily(overrideFamily) {
     return (
       (overrideFamily || usingFontFamily) == "text" ? (
-        usingVarFont ? (hinted ? fontFamilyNameVarHinted : fontFamilyNameVar) :
-                        hinted ? fontFamilyNameHinted : fontFamilyName
+        usingVarFont ? fontFamilyNameVar : fontFamilyName
       ) : (
-        usingVarFont ? (hinted ? fontFamilyNameDisplayVarHinted : fontFamilyNameDisplayVar) :
-                        hinted ? fontFamilyNameDisplayHinted : fontFamilyNameDisplay
+        usingVarFont ? fontFamilyNameDisplayVar : fontFamilyNameDisplay
       )
     )
   }
@@ -866,33 +855,18 @@ function main() {
 
   var italicVar = vars.bind('italic', (e, on) => {
     document.body.classList[on ? 'add' : 'remove']('italic')
-    if (usingVarFont && !varSlantSettingValueImpl) {
-      if (varSlantRange) {
-        varSlantRange.setValue(on ? 100 : 0)
-      }
-      updateVarFont()
-    }
   })
 
   let varState = {
     weight: 400, // 400..900
-    slant: 0,    // 0..-10
     opsz: 14,    // 14..32
   }
 
   function updateVarFont() {
     if (usingVarFont) {
-      varSlantSettingValueImpl = true
-      if (varState.slant <= 0.1) {
-        varState.slant = 0
-        italicVar.setValue(false)
-      } else {
-        italicVar.setValue(true)
-      }
-      varSlantSettingValueImpl = false
       setCSSProp(
         "font-variation-settings",
-        `"wght" ${varState.weight}, "slnt" ${-varState.slant}, "opsz" ${varState.opsz}`
+        `"wght" ${varState.weight}, "opsz" ${varState.opsz}`
       )
     } else {
       setCSSProp("font-variation-settings", null)
@@ -910,10 +884,6 @@ function main() {
           varWeightRange.setValue(w)
         }
       }
-      // document.body.style.fontFamily = (
-      //   hinted ? fontFamilyNameVarHinted :
-      //   fontFamilyNameVar
-      // )
     } else {
       if (!isInitial && varWeightRange) {
         // copy value of var weight to static weight
@@ -922,10 +892,6 @@ function main() {
           vars.setValue("weight", Math.round(w / 100) * 100)
         }
       }
-      // document.body.style.fontFamily = (
-      //   hinted ? fontFamilyNameHinted :
-      //   fontFamilyName
-      // );
     }
     document.body.style.fontFamily = getFontFamily()
     updateVarFont()
@@ -936,11 +902,6 @@ function main() {
       vars.setValue("wght", v)
   })
 
-  let varSlantNum = vars.bind('_slnt', '[name="varSlantNum"]', (e, v) => {
-    if (varSlantRange && !varSlantSettingValueImpl)
-      vars.setValue("slnt", v)
-  })
-
   let varOpszNum = vars.bind('_opsz', '[name="varOpszNum"]', (e, v) => {
     if (varOpszRange && !varOpszSettingValueImpl)
       vars.setValue("opsz", v)
@@ -964,18 +925,6 @@ function main() {
     return snapValue(e.valueAsNumber, 100)
   })
 
-  varSlantRange = vars.bind('slnt', '[name="varSlant"]', (e, v) => {
-    varState.slant = v
-    varSlantSettingValueImpl = true
-    varSlantNum.setValue(v)
-    varSlantSettingValueImpl = false
-    updateVarFont()
-  }, (e, prevValue, ev) => {
-    if (prevValue === undefined)
-      return 0
-    return snapValue(e.valueAsNumber, 1)
-  })
-
   varOpszRange = vars.bind('opsz', '[name="varOpsz"]', (e, v) => {
     varState.opsz = v
     varOpszSettingValueImpl = true
@@ -1003,12 +952,12 @@ function main() {
         e.classList.remove(secondarySampleClassNameAddition))
     }
     if (className) {
-      let explicitFontFamily = null
-      if (className == "inter-other-font") {
-        let otherFamily = usingFontFamily == "text" ? "display" : "text"
-        explicitFontFamily = getFontFamily(otherFamily)
-      }
-      secondarySample.style.fontFamily = explicitFontFamily
+      // let explicitFontFamily = null
+      // if (className == "inter-other-font") {
+      //   let otherFamily = usingFontFamily == "text" ? "display" : "text"
+      //   explicitFontFamily = getFontFamily(otherFamily)
+      // }
+      // secondarySample.style.fontFamily = explicitFontFamily
       secondarySample.classList.add(className)
       secondaryFontElements.forEach(e => e.classList.add(className))
     }
@@ -1029,9 +978,8 @@ function main() {
   vars.bind('compare', (e, v) => {
     disableSecondarySample()
     switch (v) {
-      // case 'roboto': enableSecondarySample('robotoFont'); break
       case 'system': enableSecondarySample('systemFont'); break
-      case 'inter-other': enableSecondarySample('inter-other-font'); break
+      //case 'inter-other': enableSecondarySample('inter-other-font'); break
       default: return '-';
     }
   }, e => (e.value && e.value != '-') ? e.value : null)

docs/lab/lab.css

@@ -134,9 +134,6 @@ body {
   transition: all 168ms cubic-bezier(0.17, 0.65, 0.48, 1);
   transition-property: color, background;
 }
-.robotoFont {
-  font-family: "Roboto", serif;
-}
 .systemFont {
   font-family: system-ui,-system,-system-ui,-apple-system,sans-serif;
 }

docs/res/base.css

@@ -5,12 +5,12 @@ layout: none
 @font-face {
   font-family: InterVariable; font-style: normal; font-weight: 100 900;
   font-display: block; /* <-- block, not swap */
-  src: url('../font-files/Inter-Variable.woff2?v={{font_v}}') format('woff2');
+  src: url('../font-files/InterVariable.woff2?v={{font_v}}') format('woff2');
 }
 @font-face {
   font-family: InterVariable; font-style: italic; font-weight: 100 900;
   font-display: block; /* <-- block, not swap */
-  src: url('../font-files/Inter-Variable-Italic.woff2?v={{font_v}}') format('woff2');
+  src: url('../font-files/InterVariable-Italic.woff2?v={{font_v}}') format('woff2');
 }
 @font-face {
   font-family: "jbmono";

docs/res/glyph-inspector.js

@@ -27,6 +27,7 @@ function pxround(px) {
 }
 
 const monotime = performance.now.bind(performance)
+const WGHT_MIN = 14, WGHT_MAX = 32
 
 class GlyphInspector {
   constructor() {
@@ -35,7 +36,7 @@ class GlyphInspector {
     this.glyphUnicode = 0
     this.defaultGlyphUnicode = 0x0041
     this.selectedGlyphGridCell = null
-    this.defaultAxisValues = {wght: 400, opsz: 28}
+    this.defaultAxisValues = {wght: 400, opsz: WGHT_MAX}
     this.axisValues = {wght: 0, opsz: 0}
     this.idNameElement = $(".identification .name", rootElement)
     this.idUnicodeElement = $(".identification .unicode", rootElement)
@@ -83,13 +84,13 @@ class GlyphInspector {
     // enable clicking on label to toggle
     this.opszSlider.onclick = (ev) => ev.stopPropagation()
     this.opszSlider.parentElement.onclick = (ev) => {
-      this.setFontInstance({opsz: this.axisValues.opsz > 14 ? 14 : 28})
+      this.setFontInstance({opsz: this.axisValues.opsz > WGHT_MIN ? WGHT_MIN : WGHT_MAX})
     }
 
     this.opszCheckbox = $('input[name="opsz-switch"]')
-    this.defaultAxisValues.opsz = this.opszCheckbox.checked ? 14 : 28
+    this.defaultAxisValues.opsz = this.opszCheckbox.checked ? WGHT_MIN : WGHT_MAX
     this.opszCheckbox.onchange = (ev) => {
-      this.setFontInstance({opsz: this.opszCheckbox.checked ? 14 : 28})
+      this.setFontInstance({opsz: this.opszCheckbox.checked ? WGHT_MIN : WGHT_MAX})
     }
 
     let showDetailsCheckbox = $('input[name="show-details"]')
@@ -272,7 +273,7 @@ class GlyphInspector {
     if (ev.shiftKey)
       wght = Math.round(wght / 100) * 100
     wght = max(100, min(900, wght))
-    // opsz = max(14, min(28, opsz))
+    // opsz = max(WGHT_MIN, min(WGHT_MAX, opsz))
     this.hasDraggedWght = true
     if (this.draggedWghtStartTime == 0)
       this.draggedWghtStartTime = monotime()
@@ -942,7 +943,7 @@ class GlyphInspector {
     // let wght = 100
     // let inc = true
     // setInterval(x => {
-    //   this.setFontInstance({wght, opsz: 28})
+    //   this.setFontInstance({wght, opsz: WGHT_MAX})
     //   if (inc) {
     //     wght += 10
     //     if (wght > 900) {
@@ -961,5 +962,5 @@ class GlyphInspector {
 }
 
 let inspector = new GlyphInspector()
-await inspector.loadFont('font-files/Inter-Variable.ttf')
+await inspector.loadFont('font-files/InterVariable.ttf')
 // await inspector.loadFont('font-files/InterDisplay-Regular.otf')