Lint: quote non-generic font-family values (3)

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%;
 }

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%;
 }

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");

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;
 }
 ```
 

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;
 }

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;
 }
 

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%;
 }

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%;
 }

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

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;
 }
 ```
 

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;
 }
 ```
 

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;

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;
 }
 ```
 

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;
   }
 }

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 {

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;

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,

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,

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;
 }
 ```
 

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;
 }
 ```
 

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 {

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";
 }
 ```

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 {

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

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