<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://patch-diff.githubusercontent.com";
	_AN_base_path = "https://patch-diff.githubusercontent.com/raw/mdn/css-examples/pull/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 0;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

From 6a874c39e09cb404596b95476b25c9c482d670a9 Mon Sep 17 00:00:00 2001
From: Jason Pamental <jason@rwt.io>
Date: Tue, 18 Sep 2018 08:20:05 -0400
Subject: [PATCH] Syntax updates

---
 variable-fonts/grade.html          |  4 ++--
 variable-fonts/italic.html         | 10 ++++++++--
 variable-fonts/optical-sizing.html |  2 +-
 variable-fonts/sample-page.html    |  2 +-
 variable-fonts/slant.html          |  2 +-
 5 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/variable-fonts/grade.html b/variable-fonts/grade.html
index 0551b217..39d2ac17 100644
--- a/variable-fonts/grade.html
+++ b/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;
     }
diff --git a/variable-fonts/italic.html b/variable-fonts/italic.html
index fb5bf641..522b01e8 100644
--- a/variable-fonts/italic.html
+++ b/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>
diff --git a/variable-fonts/optical-sizing.html b/variable-fonts/optical-sizing.html
index defb0c4a..43693829 100644
--- a/variable-fonts/optical-sizing.html
+++ b/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;
     }
diff --git a/variable-fonts/sample-page.html b/variable-fonts/sample-page.html
index a6d5ad84..e7ce9750 100644
--- a/variable-fonts/sample-page.html
+++ b/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;
     }
diff --git a/variable-fonts/slant.html b/variable-fonts/slant.html
index 6a8afa09..f40fce42 100644
--- a/variable-fonts/slant.html
+++ b/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;
     }
