From 498b20f9027718a6873b85307e8a91e1a554d1e5 Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 13 Dec 2024 03:09:43 +0530
Subject: [PATCH] fix(css): update italic font variation example (#37173)

* fix(css): update italic font variation example

* add non syntesized version para

* Update files/en-us/web/css/css_fonts/variable_fonts_guide/index.md

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
---
 .../web/css/css_fonts/variable_fonts_guide/index.md  | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

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 */