From e314a8dee44910d4cb1db145bd22205342b41a74 Mon Sep 17 00:00:00 2001
From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com>
Date: Thu, 12 Jun 2025 14:23:20 +0530
Subject: [PATCH 1/5] css(update): add oblique-only value to the
 font-synthesis-style page

---
 .../web/css/font-synthesis-style/index.md     | 100 +++++++++++++++++-
 1 file changed, 99 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/css/font-synthesis-style/index.md b/files/en-us/web/css/font-synthesis-style/index.md
index 8031c17a5fd0937..abc5b8ce369a7c6 100644
--- a/files/en-us/web/css/font-synthesis-style/index.md
+++ b/files/en-us/web/css/font-synthesis-style/index.md
@@ -17,6 +17,7 @@ It is often convenient to use the shorthand property {{cssxref("font-synthesis")
 /* Keyword values */
 font-synthesis-style: auto;
 font-synthesis-style: none;
+font-synthesis-style: oblique-only;
 
 /* Global values */
 font-synthesis-style: inherit;
@@ -31,7 +32,9 @@ font-synthesis-style: unset;
 - `auto`
   - : Indicates that the missing oblique typeface may be synthesized by the browser if needed.
 - `none`
-  - : Indicates that the synthesis of the missing oblique typeface by the browser is not allowed.
+  - : Indicates that the synthesis of the missing oblique typeface by the browser is _not_ allowed.
+- `oblique-only`
+  - : Same as `auto` value, but when italics is requested, using `font-style: italic`, the synthesis doesn't happen.
 
 ## Formal definition
 
@@ -69,6 +72,7 @@ This example shows turning off synthesis of the oblique typeface by the browser
 .english {
   font-family: "Montserrat", sans-serif;
 }
+
 .no-syn {
   font-synthesis-style: none;
 }
@@ -78,6 +82,100 @@ This example shows turning off synthesis of the oblique typeface by the browser
 
 {{EmbedLiveSample('Disabling synthesis of bold typeface', '', '100')}}
 
+### Comparison of font-synthesis-style values
+
+This example compares all the `font-synthesis-style` values using italic and oblique styled texts.
+
+#### HTML
+
+```html
+<fieldset class="fss-none">
+  <legend>font-synthesis-style: none</legend>
+  <p class="oblique">Oblique text</p>
+  <p class="italic">Italics text</p>
+</fieldset>
+<br />
+
+<fieldset class="fss-oblique">
+  <legend>font-synthesis-style: oblique</legend>
+  <p class="oblique">Oblique text</p>
+  <p class="italic">Italics text</p>
+</fieldset>
+<br />
+
+<fieldset class="fss-oblique-only">
+  <legend>font-synthesis-style: oblique-only</legend>
+  <p class="oblique">Oblique text</p>
+  <p class="italic">Italics text</p>
+</fieldset>
+```
+
+#### CSS
+
+```css hidden
+@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
+
+p {
+  font-family: "Montserrat", sans-serif;
+  font-size: 1.2rem;
+}
+
+@supports not (font-synthesis-style: oblique-only) {
+  body::before {
+    content: "Your browser doesn't support the 'oblique-only' value.";
+    background-color: wheat;
+    display: block;
+    width: 100%;
+    text-align: center;
+  }
+
+  body > * {
+    display: none;
+  }
+}
+```
+
+```css
+/* Specify style of the font synthesis */
+.fss-none {
+  font-synthesis-style: none;
+}
+
+.fss-oblique {
+  font-synthesis-style: oblique;
+}
+
+.fss-oblique-only {
+  font-synthesis-style: oblique-only;
+}
+
+/* Set font styles */
+.oblique {
+  font-style: oblique;
+}
+
+.italic {
+  font-style: italic;
+}
+
+/* Styles for the demonstration */
+.oblique::after {
+  content: " (font-style: oblique)";
+  font-size: 0.8rem;
+  vertical-align: sub;
+}
+
+.italic::after {
+  content: " (font-style: italic)";
+  font-size: 0.8rem;
+  vertical-align: sub;
+}
+```
+
+#### Result
+
+{{EmbedLiveSample('Disabling synthesis of bold typeface', '', '560')}}
+
 ## Specifications
 
 {{Specifications}}

From 8ce7e05ccbec1d6f2458afb6df9363dcdb384c7f Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 13 Jun 2025 16:29:27 +0530
Subject: [PATCH 2/5] Apply suggestions from code review

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
---
 .../web/css/font-synthesis-style/index.md     | 44 ++++++++-----------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/files/en-us/web/css/font-synthesis-style/index.md b/files/en-us/web/css/font-synthesis-style/index.md
index abc5b8ce369a7c6..729f24c9baef89d 100644
--- a/files/en-us/web/css/font-synthesis-style/index.md
+++ b/files/en-us/web/css/font-synthesis-style/index.md
@@ -34,7 +34,7 @@ font-synthesis-style: unset;
 - `none`
   - : Indicates that the synthesis of the missing oblique typeface by the browser is _not_ allowed.
 - `oblique-only`
-  - : Same as `auto` value, but when italics is requested, using `font-style: italic`, the synthesis doesn't happen.
+  - : Same as `auto`, but no font synthesis occurs if `font-style: italic` is set.
 
 ## Formal definition
 
@@ -89,25 +89,23 @@ This example compares all the `font-synthesis-style` values using italic and obl
 #### HTML
 
 ```html
-<fieldset class="fss-none">
-  <legend>font-synthesis-style: none</legend>
-  <p class="oblique">Oblique text</p>
-  <p class="italic">Italics text</p>
-</fieldset>
-<br />
-
-<fieldset class="fss-oblique">
-  <legend>font-synthesis-style: oblique</legend>
-  <p class="oblique">Oblique text</p>
-  <p class="italic">Italics text</p>
-</fieldset>
-<br />
-
-<fieldset class="fss-oblique-only">
-  <legend>font-synthesis-style: oblique-only</legend>
-  <p class="oblique">Oblique text</p>
-  <p class="italic">Italics text</p>
-</fieldset>
+<div class="fss-none">
+  <h2>font-synthesis-style: none</h2>
+  <p class="oblique">This text is set to <code>oblique</code></p>
+  <p class="italic">This text is set to <code>italic</code></p>
+</div>
+
+<div class="fss-oblique">
+  <h2>font-synthesis-style: oblique</h2>
+  <p class="oblique">This text is set to <code>oblique</code></p>
+  <p class="italic">This text is set to <code>italic</code></p>
+</div>
+
+<div class="fss-oblique-only">
+  <h2>font-synthesis-style: oblique-only</h2>
+  <p class="oblique">This text is set to <code>oblique</code></p>
+  <p class="italic">This text is set to <code>italic</code></p>
+</div>
 ```
 
 #### CSS
@@ -128,10 +126,6 @@ p {
     width: 100%;
     text-align: center;
   }
-
-  body > * {
-    display: none;
-  }
 }
 ```
 
@@ -174,7 +168,7 @@ p {
 
 #### Result
 
-{{EmbedLiveSample('Disabling synthesis of bold typeface', '', '560')}}
+{{EmbedLiveSample('Comparison of font-synthesis-style values', '', '560')}}
 
 ## Specifications
 

From 8156e620f128cfaf427fd152d441d2a59594124b Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Fri, 13 Jun 2025 16:32:24 +0530
Subject: [PATCH 3/5] Update files/en-us/web/css/font-synthesis-style/index.md

---
 files/en-us/web/css/font-synthesis-style/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/font-synthesis-style/index.md b/files/en-us/web/css/font-synthesis-style/index.md
index 729f24c9baef89d..636aed4db07333d 100644
--- a/files/en-us/web/css/font-synthesis-style/index.md
+++ b/files/en-us/web/css/font-synthesis-style/index.md
@@ -121,7 +121,7 @@ p {
 @supports not (font-synthesis-style: oblique-only) {
   body::before {
     content: "Your browser doesn't support the 'oblique-only' value.";
-    background-color: wheat;
+    background-color: #DF6E22;
     display: block;
     width: 100%;
     text-align: center;

From 40a72b29126c568e33c4a309f9685689241f8f3f Mon Sep 17 00:00:00 2001
From: Estelle Weyl <estelle@openwebdocs.org>
Date: Fri, 13 Jun 2025 13:04:03 +0200
Subject: [PATCH 4/5] Update files/en-us/web/css/font-synthesis-style/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 files/en-us/web/css/font-synthesis-style/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/font-synthesis-style/index.md b/files/en-us/web/css/font-synthesis-style/index.md
index 636aed4db07333d..eba7d1fda1b177d 100644
--- a/files/en-us/web/css/font-synthesis-style/index.md
+++ b/files/en-us/web/css/font-synthesis-style/index.md
@@ -121,7 +121,7 @@ p {
 @supports not (font-synthesis-style: oblique-only) {
   body::before {
     content: "Your browser doesn't support the 'oblique-only' value.";
-    background-color: #DF6E22;
+    background-color: #df6e22;
     display: block;
     width: 100%;
     text-align: center;

From 2b72f24c45202cb83d622b14b7f0aa9be14e68d4 Mon Sep 17 00:00:00 2001
From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com>
Date: Sat, 14 Jun 2025 07:05:10 +0530
Subject: [PATCH 5/5] Update files/en-us/web/css/font-synthesis-style/index.md

---
 files/en-us/web/css/font-synthesis-style/index.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/files/en-us/web/css/font-synthesis-style/index.md b/files/en-us/web/css/font-synthesis-style/index.md
index eba7d1fda1b177d..bce73c78bf5c2bf 100644
--- a/files/en-us/web/css/font-synthesis-style/index.md
+++ b/files/en-us/web/css/font-synthesis-style/index.md
@@ -121,7 +121,7 @@ p {
 @supports not (font-synthesis-style: oblique-only) {
   body::before {
     content: "Your browser doesn't support the 'oblique-only' value.";
-    background-color: #df6e22;
+    background-color: #ffcd33;
     display: block;
     width: 100%;
     text-align: center;