Merge pull request mdn#7 from jpamental/master

Update to use only AmstelvarAlpha instead of both versions

Author: chrisdavidmills

variable-fonts/fonts/Amstelvar-Italic-VF.woff2

@@ -27,7 +27,7 @@
     }
 
     body {
-      font: 1.2em "Roboto VF", Georgia, serif;
+      font: 1.2em "Roboto VF", Helvetica, sans-serif;
       margin: 20px;
       padding: 0;
     }

variable-fonts/fonts/Amstelvar-Roman-VF.woff2

@@ -8,20 +8,12 @@
   <style>
     @font-face {
       font-family: 'Amstelvar VF';
-      src: url('fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations');
+      src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
       font-weight: 300 900;
-      font-stretch: 75 150;
+      font-stretch: 35% 100%;
       font-style: normal;
       font-display: swap;
     }
-    @font-face {
-      font-family: 'Amstelvar VF';
-      src: url('fonts/Amstelvar-Italic-VF.woff2') format('woff2-variations');
-      font-weight: normal;
-      font-stretch: normal;
-      font-style: italic;
-      font-display: swap;
-    }
 
     html {
       box-sizing: border-box;
@@ -101,7 +93,7 @@
     }
 
     .container * {
-      font-size: 3rem;
+      font-size: 4rem;
       margin: 1.5rem 0;
     }
 
@@ -111,13 +103,13 @@
 
   </style>
   <style class="editable1">
-    /* weight range is 300 to 900 */
+    /* weight range is 100 to 900 */
     .container1 * {
       font-weight: 625;
     }
   </style>
   <style class="editable2">
-    /* weight range is 300 to 900 */
+    /* weight range is 100 to 900 */
     .container2 * {
       font-variation-settings: 'wght' 625;
     }

variable-fonts/slant.html

@@ -8,9 +8,9 @@
   <style>
     @font-face {
       font-family: 'Amstelvar VF';
-      src: url('fonts/Amstelvar-Roman-VF.woff2') format('woff2-variations');
+      src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
       font-weight: 300 900;
-      font-stretch: 75 150;
+      font-stretch: 35% 100%;
       font-style: normal;
       font-display: swap;
     }
@@ -111,13 +111,13 @@
 
   </style>
   <style class="editable1">
-    /* width range is 75 to 150 */
+    /* width range is 55% to 100% */
     .container1 * {
-      font-stretch: 100;
+      font-stretch: 100%;
     }
   </style>
   <style class="editable2">
-    /* width range is an integer from 75 to 150 */
+    /* width range is an integer from 55 to 100 */
     .container2 * {
       font-variation-settings: 'wdth' 100;
     }
@@ -139,7 +139,7 @@
         </div>
       </section>
 <textarea class="playable-css1">
-  /* width range is from 75% to 150% */
+  /* width range is from 55% to 100% */
   .container1 * {
     font-stretch: 100%;
   }
@@ -157,7 +157,7 @@
         </div>
       </section>
 <textarea class="playable-css2">
-  /* width range is an integer from 75 to 150 */
+  /* width range is an integer from 55 to 100 */
   .container2 * {
     font-variation-settings: 'wdth' 100;
   }
@@ -186,7 +186,7 @@
   </div>
 </textarea>
       <div class="controls range-slider">
-        <label for="controls__slider">Adjust Width: </label><input type="range" name="range-slider" value="100" id="text-axis" class="controls--slider" min="75" max="150"> 
+        <label for="controls__slider">Adjust Width: </label><input type="range" name="range-slider" value="100" id="text-axis" class="controls--slider" min="55" max="100"> 
       </div>
     </div>
   </div>