diff --git a/files/en-us/web/css/@font-face/ascent-override/index.md b/files/en-us/web/css/@font-face/ascent-override/index.md
index e0b6f125fe29714..56c5957e4cb3eb8 100644
--- a/files/en-us/web/css/@font-face/ascent-override/index.md
+++ b/files/en-us/web/css/@font-face/ascent-override/index.md
@@ -38,12 +38,12 @@ The `ascent-override` property can help when overriding the metrics of a fallbac
 
 ```css
 @font-face {
-  font-family: web-font;
+  font-family: "web-font";
   src: url("https://example.com/font.woff");
 }
 
 @font-face {
-  font-family: local-font;
+  font-family: "local-font";
   src: local("Local Font");
   ascent-override: 125%;
 }
diff --git a/files/en-us/web/css/@font-face/descent-override/index.md b/files/en-us/web/css/@font-face/descent-override/index.md
index 50da0d3bb39aa61..75bb737b428eb65 100644
--- a/files/en-us/web/css/@font-face/descent-override/index.md
+++ b/files/en-us/web/css/@font-face/descent-override/index.md
@@ -38,12 +38,12 @@ The `descent-override` property can help when overriding the metrics of a fallba
 
 ```css
 @font-face {
-  font-family: web-font;
+  font-family: "web-font";
   src: url("https://example.com/font.woff");
 }
 
 @font-face {
-  font-family: local-font;
+  font-family: "local-font";
   src: local("Local Font");
   descent-override: 125%;
 }
diff --git a/files/en-us/web/css/@font-face/font-display/index.md b/files/en-us/web/css/@font-face/font-display/index.md
index d0c2cdb82c8a91c..756b48a4e8a04dd 100644
--- a/files/en-us/web/css/@font-face/font-display/index.md
+++ b/files/en-us/web/css/@font-face/font-display/index.md
@@ -59,7 +59,7 @@ The font display timeline is based on a timer that begins the moment the user ag
 
 ```css
 @font-face {
-  font-family: ExampleFont;
+  font-family: "ExampleFont";
   src:
     url("/path/to/fonts/example-font.woff") format("woff"),
     url("/path/to/fonts/example-font.eot") format("embedded-opentype");
diff --git a/files/en-us/web/css/@font-face/font-feature-settings/index.md b/files/en-us/web/css/@font-face/font-feature-settings/index.md
index 735f055d0e6f775..74c38a99c67b0e6 100644
--- a/files/en-us/web/css/@font-face/font-feature-settings/index.md
+++ b/files/en-us/web/css/@font-face/font-feature-settings/index.md
@@ -60,11 +60,11 @@ In this example, the tag name `swsh` and a boolean value `1` are used as the val
 
 ```css
 @font-face {
-  font-family: MonteCarlo;
+  font-family: "MonteCarlo";
   src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
 }
 @font-face {
-  font-family: MonteCarlo2;
+  font-family: "MonteCarlo2";
   src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
   font-feature-settings: "swsh" 1;
 }
@@ -73,10 +73,10 @@ p {
   margin: 0.7rem 3rem;
 }
 .swash-off {
-  font-family: MonteCarlo, cursive;
+  font-family: "MonteCarlo", cursive;
 }
 .swash-on {
-  font-family: MonteCarlo2, cursive;
+  font-family: "MonteCarlo2", cursive;
 }
 ```
 
diff --git a/files/en-us/web/css/@font-face/font-style/index.md b/files/en-us/web/css/@font-face/font-style/index.md
index 7c6d88b24802d3c..5f06c3b4f5e410b 100644
--- a/files/en-us/web/css/@font-face/font-style/index.md
+++ b/files/en-us/web/css/@font-face/font-style/index.md
@@ -49,7 +49,7 @@ As an example, consider the garamond font family, in its normal form, we get the
 
 ```css
 @font-face {
-  font-family: garamond;
+  font-family: "garamond";
   src: url("garamond.ttf");
 }
 ```
@@ -64,7 +64,7 @@ On the other hand, if a true italicized version of the font family exists, we ca
 
 ```css
 @font-face {
-  font-family: garamond;
+  font-family: "garamond";
   src: url("garamond-italic.ttf");
   font-style: italic;
 }
diff --git a/files/en-us/web/css/@font-face/font-weight/index.md b/files/en-us/web/css/@font-face/font-weight/index.md
index 42bdcfe6d7d81c5..485982a5fc31f0e 100644
--- a/files/en-us/web/css/@font-face/font-weight/index.md
+++ b/files/en-us/web/css/@font-face/font-weight/index.md
@@ -253,13 +253,13 @@ We set the `font-weight` descriptor range to `300 700`, clamping the variable fo
 
 ```css
 @font-face {
-  font-family: LeagueMono;
+  font-family: "LeagueMono";
   src: url("https://mdn.github.io/shared-assets/fonts/LeagueMono-VF.ttf");
   font-weight: 300 700;
 }
 
 p {
-  font-family: LeagueMono, serif;
+  font-family: "LeagueMono", serif;
   font-size: 1.5rem;
 }
 
diff --git a/files/en-us/web/css/@font-face/line-gap-override/index.md b/files/en-us/web/css/@font-face/line-gap-override/index.md
index 85543f5392e8df0..e58a58264a3ba28 100644
--- a/files/en-us/web/css/@font-face/line-gap-override/index.md
+++ b/files/en-us/web/css/@font-face/line-gap-override/index.md
@@ -38,12 +38,12 @@ The `line-gap-override` property can help when overriding the metrics of a fallb
 
 ```css
 @font-face {
-  font-family: web-font;
+  font-family: "web-font";
   src: url("https://example.com/font.woff");
 }
 
 @font-face {
-  font-family: local-font;
+  font-family: "local-font";
   src: local("Local Font");
   line-gap-override: 125%;
 }
diff --git a/files/en-us/web/css/@font-face/size-adjust/index.md b/files/en-us/web/css/@font-face/size-adjust/index.md
index 6207de39694a257..ca807384cfbec5d 100644
--- a/files/en-us/web/css/@font-face/size-adjust/index.md
+++ b/files/en-us/web/css/@font-face/size-adjust/index.md
@@ -39,12 +39,12 @@ The `size-adjust` property can help when overriding the metrics of a fallback fo
 
 ```css
 @font-face {
-  font-family: web-font;
+  font-family: "web-font";
   src: url("https://example.com/font.woff");
 }
 
 @font-face {
-  font-family: local-font;
+  font-family: "local-font";
   src: local("Local Font");
   size-adjust: 90%;
 }
diff --git a/files/en-us/web/css/@font-face/src/index.md b/files/en-us/web/css/@font-face/src/index.md
index 198e9f5a4bf2929..9c603f416ac5571 100644
--- a/files/en-us/web/css/@font-face/src/index.md
+++ b/files/en-us/web/css/@font-face/src/index.md
@@ -169,7 +169,7 @@ The example below shows how to define two font faces with the same font family.
 ```css
 /* Defining a regular font face */
 @font-face {
-  font-family: MainText;
+  font-family: "MainText";
   src:
     local("Futura-Medium"),
     url("FuturaMedium.woff") format("woff"),
@@ -178,7 +178,7 @@ The example below shows how to define two font faces with the same font family.
 
 /* Defining a different bold font face for the same family */
 @font-face {
-  font-family: MainText;
+  font-family: "MainText";
   src:
     local("Gill Sans Bold") /* full font name */,
     local("GillSans-Bold") /* postscript name */,
@@ -190,7 +190,7 @@ The example below shows how to define two font faces with the same font family.
 
 /* Using the regular font face */
 p {
-  font-family: MainText, sans-serif;
+  font-family: "MainText", sans-serif;
 }
 
 /* Font-family is inherited, but bold fonts are used */
diff --git a/files/en-us/web/css/@font-face/unicode-range/index.md b/files/en-us/web/css/@font-face/unicode-range/index.md
index 4070c9fd9131fa4..32830c96622a0e0 100644
--- a/files/en-us/web/css/@font-face/unicode-range/index.md
+++ b/files/en-us/web/css/@font-face/unicode-range/index.md
@@ -65,7 +65,7 @@ In the CSS we are in effect defining a completely separate {{cssxref("@font-face
 
 div {
   font-size: 4em;
-  font-family: Ampersand, Helvetica, sans-serif;
+  font-family: "Ampersand", "Helvetica", sans-serif;
 }
 ```
 
diff --git a/files/en-us/web/css/@font-palette-values/font-family/index.md b/files/en-us/web/css/@font-palette-values/font-family/index.md
index b00f64b16ba3e4a..588815b15a9160f 100644
--- a/files/en-us/web/css/@font-palette-values/font-family/index.md
+++ b/files/en-us/web/css/@font-palette-values/font-family/index.md
@@ -71,7 +71,7 @@ h2.extra-spicy {
 
 ### Using the same palette identifier for multiple font-families
 
-In this example, two [@font-palette-values](/en-US/docs/Web/CSS/@font-palette-values) at-rules are set for two font families, but both the at-rules use the same dashed-ident identifier, `--Dark Mode`. This helps to set the [font-palette](/en-US/docs/Web/CSS/font-palette) property for multiple elements, `h1` and `h2` in this case, at the same time. This can be useful when you want to update font colors to match your site's branding.
+In this example, two [@font-palette-values](/en-US/docs/Web/CSS/@font-palette-values) at-rules are set for two font families, but both the at-rules use the same dashed-ident identifier, `--Dark-Mode`. This helps to set the [font-palette](/en-US/docs/Web/CSS/font-palette) property for multiple elements, `h1` and `h2` in this case, at the same time. This can be useful when you want to update font colors to match your site's branding.
 
 ```css
 @font-palette-values --Dark-Mode {
@@ -80,7 +80,7 @@ In this example, two [@font-palette-values](/en-US/docs/Web/CSS/@font-palette-va
 }
 
 @font-palette-values --Dark-Mode {
-  font-family: Bixa;
+  font-family: "Bixa";
   /* palette settings for Bixa */
 }
 
@@ -94,7 +94,7 @@ h1 {
 }
 
 h2 {
-  font-family: Bixa, fantasy;
+  font-family: "Bixa", fantasy;
 }
 ```
 
diff --git a/files/en-us/web/css/@font-palette-values/index.md b/files/en-us/web/css/@font-palette-values/index.md
index 275c53ea811765b..8933d2f17500e12 100644
--- a/files/en-us/web/css/@font-palette-values/index.md
+++ b/files/en-us/web/css/@font-palette-values/index.md
@@ -12,7 +12,7 @@ The **`@font-palette-values`** [CSS](/en-US/docs/Web/CSS) [at-rule](/en-US/docs/
 
 ```css
 @font-palette-values --identifier {
-  font-family: Bixa;
+  font-family: "Bixa";
 }
 .my-class {
   font-palette: --identifier;
diff --git a/files/en-us/web/css/@media/prefers-reduced-data/index.md b/files/en-us/web/css/@media/prefers-reduced-data/index.md
index 2d46052f1f2ec4d..d77c7f416f4031e 100644
--- a/files/en-us/web/css/@media/prefers-reduced-data/index.md
+++ b/files/en-us/web/css/@media/prefers-reduced-data/index.md
@@ -52,7 +52,7 @@ In this example the `montserrat-regular.woff2` font file will neither be preload
 ```css
 @media (prefers-reduced-data: no-preference) {
   @font-face {
-    font-family: Montserrat;
+    font-family: "Montserrat";
     font-style: normal;
     font-weight: 400;
     font-display: swap;
@@ -70,18 +70,14 @@ In this example the `montserrat-regular.woff2` font file will neither be preload
 
 body {
   font-family:
-    Montserrat,
+    "Montserrat",
     -apple-system,
     BlinkMacSystemFont,
     "Segoe UI",
-    Roboto,
-    Helvetica,
-    Arial,
-    "Microsoft YaHei",
-    sans-serif,
-    "Apple Color Emoji",
-    "Segoe UI Emoji",
-    "Segoe UI Symbol";
+    "Roboto",
+    "Helvetica",
+    "Arial",
+    sans-serif;
 }
 ```
 
diff --git a/files/en-us/web/css/@page/page-orientation/index.md b/files/en-us/web/css/@page/page-orientation/index.md
index c6cd84157ddf416..317fa5f7033110f 100644
--- a/files/en-us/web/css/@page/page-orientation/index.md
+++ b/files/en-us/web/css/@page/page-orientation/index.md
@@ -89,7 +89,7 @@ p {
     display: none;
   }
   section {
-    font-family: Roboto, sans-serif;
+    font-family: "Roboto", sans-serif;
     font-size: 1.5rem;
   }
 }
diff --git a/files/en-us/web/css/@starting-style/index.md b/files/en-us/web/css/@starting-style/index.md
index 47cb6be23e1320b..bbf13088694229b 100644
--- a/files/en-us/web/css/@starting-style/index.md
+++ b/files/en-us/web/css/@starting-style/index.md
@@ -227,7 +227,7 @@ In this example, we want to animate two properties, {{cssxref("opacity")}} and {
 
 ```css
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 [popover]:popover-open {
diff --git a/files/en-us/web/css/_colon_-moz-drag-over/index.md b/files/en-us/web/css/_colon_-moz-drag-over/index.md
index 92c6020a8c294cc..7303fe28180cf49 100644
--- a/files/en-us/web/css/_colon_-moz-drag-over/index.md
+++ b/files/en-us/web/css/_colon_-moz-drag-over/index.md
@@ -52,7 +52,7 @@ target.addEventListener("dragenter", (event) => {
 
 ```css
 body {
-  font-family: Arial;
+  font-family: "Arial";
 }
 div {
   display: inline-block;
diff --git a/files/en-us/web/css/_doublecolon_after/index.md b/files/en-us/web/css/_doublecolon_after/index.md
index ed96faa836e8045..afbca7257ea873d 100644
--- a/files/en-us/web/css/_doublecolon_after/index.md
+++ b/files/en-us/web/css/_doublecolon_after/index.md
@@ -207,7 +207,7 @@ In this demo, we generate extra list items before and after a list navigation me
 ```css
 ul {
   font-size: 1.5rem;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 ul::before,
diff --git a/files/en-us/web/css/_doublecolon_before/index.md b/files/en-us/web/css/_doublecolon_before/index.md
index 03f779790898085..5eb5fe2e658f85c 100644
--- a/files/en-us/web/css/_doublecolon_before/index.md
+++ b/files/en-us/web/css/_doublecolon_before/index.md
@@ -252,7 +252,7 @@ In this demo, we generate extra [list items](/en-US/docs/Web/HTML/Reference/Elem
 ```css
 ul {
   font-size: 1.5rem;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 ul::before,
diff --git a/files/en-us/web/css/_doublecolon_column/index.md b/files/en-us/web/css/_doublecolon_column/index.md
index 6b7f1db918b45e6..a57767294c2c5a4 100644
--- a/files/en-us/web/css/_doublecolon_column/index.md
+++ b/files/en-us/web/css/_doublecolon_column/index.md
@@ -113,7 +113,7 @@ The list is given a fixed {{cssxref("height")}} and a {{cssxref("width")}} of `1
 
 body {
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 ```
 
diff --git a/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md b/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md
index f8a152f72058f59..0562d3360417981 100644
--- a/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md
+++ b/files/en-us/web/css/_doublecolon_scroll-marker-group/index.md
@@ -73,7 +73,7 @@ We first convert our `<ul>` into a carousel by setting the {{cssxref("display")}
 
 body {
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 ```
 
diff --git a/files/en-us/web/css/font-family/index.md b/files/en-us/web/css/font-family/index.md
index 775f0fcedb98bbc..d25386efd9dbb87 100644
--- a/files/en-us/web/css/font-family/index.md
+++ b/files/en-us/web/css/font-family/index.md
@@ -11,7 +11,7 @@ The **`font-family`** [CSS](/en-US/docs/Web/CSS) property specifies a prioritize
 {{InteractiveExample("CSS Demo: font-family")}}
 
 ```css interactive-example-choice
-font-family: Georgia, serif;
+font-family: "Georgia", serif;
 ```
 
 ```css interactive-example-choice
@@ -164,15 +164,15 @@ font-family: "Gill Sans Extrabold", sans-serif;
 
 ```css
 .serif {
-  font-family: Times, "Times New Roman", Georgia, serif;
+  font-family: "Times", "Times New Roman", "Georgia", serif;
 }
 
 .sansserif {
-  font-family: Verdana, Arial, Helvetica, sans-serif;
+  font-family: "Verdana", "Helvetica", "Arial", sans-serif;
 }
 
 .monospace {
-  font-family: "Lucida Console", Courier, monospace;
+  font-family: "Lucida Console", "Courier New", monospace;
 }
 
 .cursive {
diff --git a/files/en-us/web/css/font-feature-settings/index.md b/files/en-us/web/css/font-feature-settings/index.md
index 9fb4e3a11d34b02..01225e2da4be4b7 100644
--- a/files/en-us/web/css/font-feature-settings/index.md
+++ b/files/en-us/web/css/font-feature-settings/index.md
@@ -165,7 +165,7 @@ td.tabular {
 
 /* enable stylistic set 7 */
 .fancy-style {
-  font-family: Gabriola, cursive;
+  font-family: "Gabriola", cursive;
   font-feature-settings: "ss07";
 }
 ```
diff --git a/files/en-us/web/css/font-optical-sizing/index.md b/files/en-us/web/css/font-optical-sizing/index.md
index 97e90404de9e763..c1e1a1101d16b00 100644
--- a/files/en-us/web/css/font-optical-sizing/index.md
+++ b/files/en-us/web/css/font-optical-sizing/index.md
@@ -35,12 +35,12 @@ font-optical-sizing: none;
 ```css interactive-example
 @font-face {
   src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
-  font-family: Amstelvar;
+  font-family: "Amstelvar";
   font-style: normal;
 }
 
 #example-element {
-  font-family: Amstelvar, serif;
+  font-family: "Amstelvar", serif;
   text-align: left;
 }
 
@@ -113,7 +113,7 @@ When optical sizing is used, small text sizes are often rendered with thicker st
 
 p {
   font-size: 36px;
-  font-family: Amstelvar, serif;
+  font-family: "Amstelvar", serif;
 }
 
 .no-optical-sizing {
diff --git a/files/en-us/web/css/font-palette/index.md b/files/en-us/web/css/font-palette/index.md
index d749b3f3e09fc9c..7474a3148338138 100644
--- a/files/en-us/web/css/font-palette/index.md
+++ b/files/en-us/web/css/font-palette/index.md
@@ -79,12 +79,12 @@ In the CSS, we import a [color font](https://www.colorfonts.wtf/) called [Nabla]
 @import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";
 
 @font-palette-values --blue-nabla {
-  font-family: Nabla;
+  font-family: "Nabla";
   base-palette: 2; /* this is Nabla's blue palette */
 }
 
 @font-palette-values --grey-nabla {
-  font-family: Nabla;
+  font-family: "Nabla";
   base-palette: 3; /* this is Nabla's grey palette */
 }
 
diff --git a/files/en-us/web/css/font-palette/palette-mix/index.md b/files/en-us/web/css/font-palette/palette-mix/index.md
index 258db6fa0a2c3c4..fef3c3e0d38620d 100644
--- a/files/en-us/web/css/font-palette/palette-mix/index.md
+++ b/files/en-us/web/css/font-palette/palette-mix/index.md
@@ -80,12 +80,12 @@ In the CSS, we import a color font from Google Fonts, and define two custom `fon
 @import "https://fonts.googleapis.com/css2?family=Nabla&display=swap";
 
 @font-palette-values --blue-nabla {
-  font-family: Nabla;
+  font-family: "Nabla";
   base-palette: 2; /* this is Nabla's blue palette */
 }
 
 @font-palette-values --yellow-nabla {
-  font-family: Nabla;
+  font-family: "Nabla";
   base-palette: 7; /* this is Nabla's yellow palette */
 }
 
diff --git a/files/en-us/web/css/font-size-adjust/index.md b/files/en-us/web/css/font-size-adjust/index.md
index d9038c570793e27..65286401c33e49d 100644
--- a/files/en-us/web/css/font-size-adjust/index.md
+++ b/files/en-us/web/css/font-size-adjust/index.md
@@ -117,12 +117,12 @@ Similarly, the cap-height to font size ratio in Verdana is `0.73` and that in Ti
 
 ```css
 .times {
-  font-family: Times, serif;
+  font-family: "Times", serif;
   font-size: 14px;
 }
 
 .verdana {
-  font-family: Verdana, sans-serif;
+  font-family: "Verdana", sans-serif;
   font-size: 14px;
 }
 
@@ -189,7 +189,7 @@ div {
 }
 
 p {
-  font-family: Futura, sans-serif;
+  font-family: "Futura", sans-serif;
   font-size: 50px;
 }
 
diff --git a/files/en-us/web/css/font-stretch/index.md b/files/en-us/web/css/font-stretch/index.md
index 19a0b0b78f66bfa..6517d289c051506 100644
--- a/files/en-us/web/css/font-stretch/index.md
+++ b/files/en-us/web/css/font-stretch/index.md
@@ -57,7 +57,7 @@ font-stretch: 150%;
 ```css interactive-example
 @font-face {
   src: url("/shared-assets/fonts/LeagueMono-VF.ttf") format("truetype");
-  font-family: League;
+  font-family: "League";
   font-style: normal;
   font-weight: 400;
   font-stretch: 50% 200%; /* Required by Chrome - allow 50% to 200% */
@@ -65,7 +65,7 @@ font-stretch: 150%;
 
 section {
   font-size: 1.2em;
-  font-family: League, sans-serif;
+  font-family: "League", sans-serif;
 }
 ```
 
diff --git a/files/en-us/web/css/font-style/index.md b/files/en-us/web/css/font-style/index.md
index fec263c8c19c089..e83f27747a992e2 100644
--- a/files/en-us/web/css/font-style/index.md
+++ b/files/en-us/web/css/font-style/index.md
@@ -41,13 +41,13 @@ font-style: oblique 40deg;
 ```css interactive-example
 @font-face {
   src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
-  font-family: Amstelvar;
+  font-family: "Amstelvar";
   font-style: normal;
 }
 
 section {
   font-size: 1.2em;
-  font-family: Amstelvar, serif;
+  font-family: "Amstelvar", serif;
 }
 ```
 
diff --git a/files/en-us/web/css/font-synthesis/index.md b/files/en-us/web/css/font-synthesis/index.md
index 169ca4c3d00e1c5..80247104f484d02 100644
--- a/files/en-us/web/css/font-synthesis/index.md
+++ b/files/en-us/web/css/font-synthesis/index.md
@@ -55,7 +55,7 @@ font-synthesis: position;
 
 ```css interactive-example
 @font-face {
-  font-family: Oxygen;
+  font-family: "Oxygen";
   font-style: normal;
   font-weight: 400;
   src: url("https://fonts.gstatic.com/s/oxygen/v14/2sDfZG1Wl4LcnbuKjk0m.woff2")
@@ -110,7 +110,7 @@ font-synthesis: position;
 
 .english {
   font-size: 1.2em;
-  font-family: Oxygen, sans-serif;
+  font-family: "Oxygen", sans-serif;
 }
 
 .chinese {
diff --git a/files/en-us/web/css/font-variant-alternates/index.md b/files/en-us/web/css/font-variant-alternates/index.md
index d79643977b7c15a..a22f13a9fcde8ff 100644
--- a/files/en-us/web/css/font-variant-alternates/index.md
+++ b/files/en-us/web/css/font-variant-alternates/index.md
@@ -91,7 +91,7 @@ We can then use that name inside `font-variant-alternates` to switch on swashes
 
 ```css
 @font-face {
-  font-family: MonteCarlo;
+  font-family: "MonteCarlo";
   src: url("/shared-assets/fonts/monte-carlo/monte-carlo-regular.woff2");
 }
 
diff --git a/files/en-us/web/css/font-variant-east-asian/index.md b/files/en-us/web/css/font-variant-east-asian/index.md
index 25996eef507945a..34452f0828f7d4d 100644
--- a/files/en-us/web/css/font-variant-east-asian/index.md
+++ b/files/en-us/web/css/font-variant-east-asian/index.md
@@ -39,7 +39,7 @@ font-variant-east-asian: proportional-width;
 ```css interactive-example
 section {
   font-family:
-    "YuGothic Medium", YuGothic, "Yu Gothic Medium", "Yu Gothic", sans-serif;
+    "YuGothic Medium", "YuGothic", "Yu Gothic Medium", "Yu Gothic", sans-serif;
   margin-top: 10px;
   font-size: 1.5em;
 }
diff --git a/files/en-us/web/css/font-variant-ligatures/index.md b/files/en-us/web/css/font-variant-ligatures/index.md
index aae8039bfcad670..e15c095a1e9ae12 100644
--- a/files/en-us/web/css/font-variant-ligatures/index.md
+++ b/files/en-us/web/css/font-variant-ligatures/index.md
@@ -167,7 +167,7 @@ The `font-variant-ligatures` property is specified as `normal`, `none`, or one o
 
 ```css
 p {
-  font-family: Lora, serif;
+  font-family: "Lora", serif;
 }
 .normal {
   font-variant-ligatures: normal;
diff --git a/files/en-us/web/css/font-variation-settings/index.md b/files/en-us/web/css/font-variation-settings/index.md
index d6c3b28319b153d..38ce8e19e1acf98 100644
--- a/files/en-us/web/css/font-variation-settings/index.md
+++ b/files/en-us/web/css/font-variation-settings/index.md
@@ -38,13 +38,13 @@ font-variation-settings: "wdth" 75;
 ```css interactive-example
 @font-face {
   src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
-  font-family: Amstelvar;
+  font-family: "Amstelvar";
   font-style: normal;
 }
 
 p {
   font-size: 1.5rem;
-  font-family: Amstelvar, serif;
+  font-family: "Amstelvar", serif;
 }
 ```
 
diff --git a/files/en-us/web/css/if/index.md b/files/en-us/web/css/if/index.md
index 1dfff648c3ba261..6f3127b169b4c89 100644
--- a/files/en-us/web/css/if/index.md
+++ b/files/en-us/web/css/if/index.md
@@ -489,7 +489,7 @@ In our CSS, we give the `<body>` element a {{cssxref("max-width")}} of `700px` a
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 p {
diff --git a/files/en-us/web/css/interpolate-size/index.md b/files/en-us/web/css/interpolate-size/index.md
index 0447f49a5b8814c..3a58e74c9c663c5 100644
--- a/files/en-us/web/css/interpolate-size/index.md
+++ b/files/en-us/web/css/interpolate-size/index.md
@@ -115,7 +115,7 @@ The HTML contains a single {{htmlelement("section")}} element with [`tabindex="0
 }
 
 section {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 175px;
   border-radius: 5px;
   background: #eeeeee;
diff --git a/files/en-us/web/css/justify-items/index.md b/files/en-us/web/css/justify-items/index.md
index c5aa19b3c5feb45..2929c85cf71cc38 100644
--- a/files/en-us/web/css/justify-items/index.md
+++ b/files/en-us/web/css/justify-items/index.md
@@ -182,7 +182,7 @@ If you hover or tab onto the grid container however, it is given a `justify-item
 
 ```css
 html {
-  font-family: helvetica, arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   letter-spacing: 1px;
 }
 
diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md
index bff8e7fce63188b..179dc05d2b1c325 100644
--- a/files/en-us/web/css/justify-self/index.md
+++ b/files/en-us/web/css/justify-self/index.md
@@ -178,7 +178,7 @@ The second, third, and fourth grid items are then given different values of `jus
 
 ```css
 html {
-  font-family: helvetica, arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   letter-spacing: 1px;
 }
 
diff --git a/files/en-us/web/css/letter-spacing/index.md b/files/en-us/web/css/letter-spacing/index.md
index eb635650e5439a9..6be3f1fbea5d839 100644
--- a/files/en-us/web/css/letter-spacing/index.md
+++ b/files/en-us/web/css/letter-spacing/index.md
@@ -39,13 +39,13 @@ letter-spacing: -1px;
 ```css interactive-example
 @font-face {
   src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf");
-  font-family: Amstelvar;
+  font-family: "Amstelvar";
   font-style: normal;
 }
 
 section {
   font-size: 1.2em;
-  font-family: Amstelvar, serif;
+  font-family: "Amstelvar", serif;
 }
 ```
 
diff --git a/files/en-us/web/css/line-break/index.md b/files/en-us/web/css/line-break/index.md
index 99ac62de729d06d..687245113245697 100644
--- a/files/en-us/web/css/line-break/index.md
+++ b/files/en-us/web/css/line-break/index.md
@@ -36,7 +36,7 @@ line-break: loose;
 
 ```css interactive-example
 #example-element {
-  font-family: "Yu Gothic", YuGothic, Meiryo, "ＭＳ ゴシック", sans-serif;
+  font-family: "Yu Gothic", "YuGothic", "Meiryo", "ＭＳ ゴシック", sans-serif;
   border: 2px dashed #999999;
   text-align: left;
   width: 240px;
diff --git a/files/en-us/web/css/line-height/index.md b/files/en-us/web/css/line-height/index.md
index ab5a31ef2e5946f..8aecd4faddb012f 100644
--- a/files/en-us/web/css/line-height/index.md
+++ b/files/en-us/web/css/line-height/index.md
@@ -41,7 +41,7 @@ line-height: 32px;
 
 ```css interactive-example
 #example-element {
-  font-family: Georgia, sans-serif;
+  font-family: "Georgia", serif;
   max-width: 200px;
 }
 ```
diff --git a/files/en-us/web/css/object-fit/index.md b/files/en-us/web/css/object-fit/index.md
index 9dc60a8f9e924e1..2e9ac8fc8680eb6 100644
--- a/files/en-us/web/css/object-fit/index.md
+++ b/files/en-us/web/css/object-fit/index.md
@@ -131,9 +131,7 @@ The `object-fit` property is specified as a single keyword chosen from the list
 
 ```css
 h2 {
-  font-family:
-    Courier New,
-    monospace;
+  font-family: "Courier New", monospace;
   font-size: 1em;
   margin: 1em 0 0.3em;
 }
diff --git a/files/en-us/web/css/overlay/index.md b/files/en-us/web/css/overlay/index.md
index cc62176e2cdfda4..22e9fa42b06574d 100644
--- a/files/en-us/web/css/overlay/index.md
+++ b/files/en-us/web/css/overlay/index.md
@@ -68,7 +68,7 @@ The `overlay` property is only present in the list of transitioned properties. A
 
 ```css
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 [popover]:popover-open {
diff --git a/files/en-us/web/css/page/index.md b/files/en-us/web/css/page/index.md
index 92a78d5054ac99c..b120b206ab6956b 100644
--- a/files/en-us/web/css/page/index.md
+++ b/files/en-us/web/css/page/index.md
@@ -197,7 +197,7 @@ The `break-after: page;` is used to split them up, which splits each chapter int
   }
   section {
     font-size: 2rem;
-    font-family: Roboto, sans-serif;
+    font-family: "Roboto", sans-serif;
   }
   .chapter {
     border: tomato 2px solid;
@@ -205,22 +205,22 @@ The `break-after: page;` is used to split them up, which splits each chapter int
   [data-print="grouped"] > #toc,
   [data-print="paged"] > #toc {
     page: toc;
-    font-family: Courier;
+    font-family: "Courier New";
   }
   [data-print="grouped"] > #foreword,
   [data-print="paged"] > #foreword {
     page: foreword;
-    font-family: Courier;
+    font-family: "Courier New";
   }
   [data-print="grouped"] > #introduction,
   [data-print="paged"] > #introduction {
     page: introduction;
-    font-family: Courier;
+    font-family: "Courier New";
   }
   [data-print="grouped"] > #conclusion,
   [data-print="paged"] > #conclusion {
     page: conclusion;
-    font-family: Courier;
+    font-family: "Courier New";
   }
   [data-print="grouped"] > .chapter,
   [data-print="paged"] > .chapter {
diff --git a/files/en-us/web/css/place-self/index.md b/files/en-us/web/css/place-self/index.md
index 0ae57cfdb516356..f06770c25cfb0dd 100644
--- a/files/en-us/web/css/place-self/index.md
+++ b/files/en-us/web/css/place-self/index.md
@@ -149,7 +149,7 @@ The second, third, and fourth grid items are then given different values of `pla
 
 ```css
 html {
-  font-family: helvetica, arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   letter-spacing: 1px;
 }
 
diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md
index ab53201d7add262..1264dec580060bf 100644
--- a/files/en-us/web/css/position/index.md
+++ b/files/en-us/web/css/position/index.md
@@ -498,7 +498,7 @@ div {
   overflow: scroll;
   scrollbar-width: thin;
   font-size: 16px;
-  font-family: Verdana;
+  font-family: "Verdana";
   border: 1px solid;
 }
 
diff --git a/files/en-us/web/css/scroll-target-group/index.md b/files/en-us/web/css/scroll-target-group/index.md
index bc3b86bffea1453..01dccd59685c990 100644
--- a/files/en-us/web/css/scroll-target-group/index.md
+++ b/files/en-us/web/css/scroll-target-group/index.md
@@ -307,7 +307,7 @@ We complete the code by setting some styles on the `:target-current`, `a:hover`,
 
 body {
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/selector_list/index.md b/files/en-us/web/css/selector_list/index.md
index 8a213dc6e81f2af..db5367fc7de9d59 100644
--- a/files/en-us/web/css/selector_list/index.md
+++ b/files/en-us/web/css/selector_list/index.md
@@ -46,7 +46,7 @@ This example shows grouping selectors in a single line using a comma-separated l
 
 ```css-nolint
 h1, h2, h3, h4, h5, h6 {
-  font-family: Helvetica, Arial;
+  font-family: "Helvetica", "Arial";
 }
 ```
 
diff --git a/files/en-us/web/css/superellipse/index.md b/files/en-us/web/css/superellipse/index.md
index 2a2429990ccf0a2..2b72952f951d39a 100644
--- a/files/en-us/web/css/superellipse/index.md
+++ b/files/en-us/web/css/superellipse/index.md
@@ -161,7 +161,7 @@ In this example, two [`<input type="range">`](/en-US/docs/Web/HTML/Reference/Ele
 
 ```css hidden live-sample___value-comparison
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {