Syntax updates

Author: jpamental

variable-fonts/grade.html

@@ -8,9 +8,9 @@
   <style>
     @font-face {
       font-family: 'Amstelvar VF';
-      src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2');
+      src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
       font-weight: 100 900;
-      font-stretch: 75 100;
+      font-stretch: 75% 100%;
       font-style: normal;
       font-display: swap;
     }

variable-fonts/italic.html

@@ -10,8 +10,8 @@
       font-family: 'Jost VF';
       src: url('fonts/jost-VF.woff2') format('woff2-variations');
       font-weight: 300 900;
-      font-stretch: 75 150;
-      font-style: normal;
+      font-stretch: 75% 150%;
+      font-style: oblique 0deg 20deg;
       font-display: swap;
     }
 
@@ -106,17 +106,20 @@
     /* italic range is 0 or 1 */
     .container1 * {
       font-style: italic;
+      font-synthesis: none;
     }
   </style>
   <style class="editable2">
     /* italic range is 0 or 1 */
     .container2 * {
+      font-synthesis: none;
       font-variation-settings: 'ital' 1;
     }
   </style>
   <style class="editable3">
     /* Adjust with slider & custom property */
     .container3 * {
+      font-synthesis: none;
       font-variation-settings: 'ital' var(--text-axis);
     }
   </style>
@@ -134,6 +137,7 @@
   /* italic can only be italic or normal */
   .container1 * {
     font-style: italic;
+    font-synthesis: none;
   }
 </textarea>
 <textarea id="code1" class="playable-html1">
@@ -151,6 +155,7 @@
 <textarea class="playable-css2">
   /* italic can only be italic or normal */
   .container2 * {
+    font-synthesis: none;
     font-variation-settings: 'ital' 1;
   }
 </textarea>
@@ -169,6 +174,7 @@
 <textarea class="playable-css3">
   /* Adjust with slider & custom property */
   .container3 * {
+    font-synthesis: none;
     font-variation-settings: 'ital' var(--text-axis);
   }
 </textarea>

variable-fonts/optical-sizing.html

@@ -10,7 +10,7 @@
       font-family: 'Amstelvar VF';
       src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
       font-weight: 300 900;
-      font-stretch: 75 150;
+      font-stretch: 75% 150%;
       font-style: normal;
       font-display: swap;
     }

variable-fonts/sample-page.html

@@ -10,7 +10,7 @@
       font-family: 'Amstelvar VF';
       src: url('fonts/AmstelvarAlpha-VF.woff2') format('woff2-variations');
       font-weight: 300 900;
-      font-stretch: 75 150;
+      font-stretch: 75% 150%;
       font-style: normal;
       font-display: swap;
     }

variable-fonts/slant.html

@@ -10,7 +10,7 @@
       font-family: 'Roboto VF';
       src: url('fonts/Roboto-VF.woff2') format('woff2-variations');
       font-weight: 100 900;
-      font-stretch: 75 100;
+      font-stretch: 75% 100%;
       font-style: oblique 0deg 12deg;
       font-display: swap;
     }