diff --git a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
index 68fb56937f18c25..6ac72fc06badaa3 100644
--- a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
+++ b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
@@ -272,6 +272,8 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 <div>
   <p class="p1">Italic</p>
   <span>(font-style: italic)</span>
+  <p class=".p1-no-synthesis">Italic</p>
+  <span>(font-style: italic; font-synthesis: none)</span>
 </div>
 <div>
   <p class="p2">Italic</p>
@@ -320,16 +322,20 @@ p {
 ```
 
 ```css live-sample___variable-fonts-italic-example
-/* italic range is 0 or 1 */
+/* font-style: italic, with and without font-synthesis */
 .p1 {
-  font-synthesis: none;
   font-style: italic;
 }
 
+.p1-no-synthesis {
+  font-style: italic;
+  font-synthesis: none;
+}
+
 /* italic range is 0 or 1 */
 .p2 {
-  font-synthesis: none;
   font-variation-settings: "ital" 1;
+  font-synthesis: none;
 }
 
 /* Adjust with slider & custom property */