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

files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md

@@ -46,7 +46,7 @@ In `src/styles.css`, paste the following styles:
 
 ```css
 body {
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 .btn-wrapper {

files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md

@@ -182,7 +182,8 @@ body {
   line-height: 1.25;
   font-family:
     -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", Roboto, Helvetica, Arial, sans-serif;
+    "Segoe UI Emoji", "Segoe UI Symbol", "Roboto", "Helvetica", "Arial",
+    sans-serif;
   color: hsl(0 0 0.13);
 
   width: 95%;

files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md

@@ -487,7 +487,7 @@ body {
   box-sizing: border-box;
   clear: left;
   display: block;
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   font-size: 1.6rem;
   font-weight: 400;
   line-height: 1.25;

files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md

@@ -630,7 +630,7 @@ body {
 /* CHECKBOX STYLES */
 .c-cb {
   box-sizing: border-box;
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   font-weight: 400;
   font-size: 1.6rem;

files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md

@@ -98,7 +98,7 @@ export default {
 </script>
 <style scoped>
 .edit-label {
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #0b0c0c;

files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md

@@ -346,7 +346,7 @@ Next, copy the following CSS into the newly created `<style>` element:
 
 ```css
 .custom-checkbox > .checkbox-label {
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
@@ -357,7 +357,7 @@ Next, copy the following CSS into the newly created `<style>` element:
   margin-bottom: 5px;
 }
 .custom-checkbox > .checkbox {
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-weight: 400;
@@ -378,7 +378,7 @@ Next, copy the following CSS into the newly created `<style>` element:
   box-shadow: inset 0 0 0 2px;
 }
 .custom-checkbox {
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   -webkit-font-smoothing: antialiased;
   font-weight: 400;
   font-size: 1.6rem;

files/en-us/learn_web_development/core/scripting/what_is_javascript/index.md

@@ -53,7 +53,7 @@ Then we can add some CSS into the mix to get it looking nice:
 
 ```css live-sample___string-concat-name
 button {
-  font-family: "helvetica neue", helvetica, sans-serif;
+  font-family: "Helvetica Neue", "Helvetica", sans-serif;
   letter-spacing: 1px;
   text-transform: uppercase;
   border: 2px solid rgb(200 200 0 / 60%);

files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md

@@ -431,7 +431,7 @@ You can see this in action in the live sample below:
 
 ```css hidden live-sample___webkit-background-clip
 body {
-  font-family: impact, sans-serif;
+  font-family: "impact", sans-serif;
 }
 
 h2 {

files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md

@@ -314,7 +314,7 @@ This behavior helps avoid repetition in your CSS. A common practice is to define
 h2 {
   font-size: 2em;
   color: black;
-  font-family: Georgia, "Times New Roman", Times, serif;
+  font-family: "Georgia", serif;
 }
 
 .small {

files/en-us/learn_web_development/core/styling_basics/tables/index.md

@@ -155,7 +155,7 @@ td {
 
 /* typography */
 html {
-  font-family: "helvetica neue", helvetica, arial, sans-serif;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
 }
 
 thead th,
@@ -246,7 +246,7 @@ This is a minor point, and not strictly relevant to styling tables, but we thoug
 
 ```css
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 ```
 
@@ -381,7 +381,7 @@ Your finished table design should look like so:
 
 ```css hidden live-sample___best-practice-style
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 table {

files/en-us/learn_web_development/core/text_styling/fundamentals/index.md

@@ -91,11 +91,11 @@ To set a different font for your text, you use the {{cssxref("font-family")}} pr
 
 ```css
 p {
-  font-family: Arial;
+  font-family: "Arial";
 }
 ```
 
-This would make all paragraphs on a page adopt the arial font, which is found on any computer.
+This would make all paragraphs on a page adopt the Arial font, which is found on any computer.
 
 > [!NOTE]
 > Scrimba's [Web-safe fonts](https://scrimba.com/learn-html-and-css-c0p/~01r?via=mdn) <sup>[_MDN learning partner_](/en-US/docs/MDN/Writing_guidelines/Learning_content#partner_links_and_embeds)</sup> scrim provides an interactive guide to why fonts are important, web-safe fonts, and how to specify fonts in CSS — along with a challenge to test your knowledge.
@@ -272,7 +272,7 @@ Since you can't guarantee the availability of the fonts you want to use on your
 
 ```css
 p {
-  font-family: "Trebuchet MS", Verdana, sans-serif;
+  font-family: "Trebuchet MS", "Verdana", sans-serif;
 }
 ```
 
@@ -293,7 +293,7 @@ Let's add to our previous example, giving the paragraphs a sans-serif font:
 ```css live-sample___2fonts live-sample___3font-style live-sample___4shadows live-sample___5text-align live-sample___6line-height live-sample___7letter-word-spacing
 p {
   color: red;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 ```
 
@@ -372,7 +372,7 @@ h1 + p {
 p {
   font-size: 1.5rem;
   color: red;
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 ```
 

files/en-us/learn_web_development/core/text_styling/styling_lists/index.md

@@ -112,7 +112,7 @@ The CSS used for the text styling and spacing is as follows:
 /* General styles */
 
 html {
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   font-size: 10px;
 }
 

files/en-us/learn_web_development/core/text_styling/web_fonts/index.md

@@ -41,7 +41,7 @@ As we looked at in [Fundamental text and font styling](/en-US/docs/Learn_web_dev
 
 ```css
 p {
-  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
+  font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;
 }
 ```
 

files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md

@@ -52,7 +52,7 @@ body {
 }
 
 html {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   height: 100%;
 }
 

files/en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md

@@ -173,7 +173,7 @@ button,
 }
 
 button::before {
-  font-family: HeydingsControlsRegular;
+  font-family: "HeydingsControlsRegular";
   font-size: 20px;
   position: relative;
   content: attr(data-icon);
@@ -471,7 +471,7 @@ To get started with this example, follow these steps:
    }
 
    button::before {
-     font-family: HeydingsControlsRegular;
+     font-family: "HeydingsControlsRegular";
      font-size: 20px;
      position: relative;
      content: attr(data-icon);
@@ -609,7 +609,7 @@ Next, let's look at our button icons:
 }
 
 button::before {
-  font-family: HeydingsControlsRegular;
+  font-family: "HeydingsControlsRegular";
   font-size: 20px;
   position: relative;
   content: attr(data-icon);

files/en-us/learn_web_development/extensions/forms/customizable_select/index.md

@@ -131,7 +131,7 @@ select,
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md

@@ -59,7 +59,7 @@ This is the first example of code that explains [how to build a custom form widg
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -194,7 +194,7 @@ This is the first example of code that explains [how to build a custom form widg
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -329,7 +329,7 @@ This is the first example of code that explains [how to build a custom form widg
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md

@@ -77,7 +77,7 @@ This is the second example that explain [how to build custom form widgets](/en-U
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md

@@ -77,7 +77,7 @@ This is the third example that explain [how to build custom form widgets](/en-US
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md

@@ -77,7 +77,7 @@ This is the fourth example that explain [how to build custom form widgets](/en-U
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md

@@ -77,7 +77,7 @@ This is the last example that explain [how to build custom form widgets](/en-US/
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 

files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md

@@ -177,7 +177,7 @@ So now that we have the basic functionality in place, the fun can start. The fol
   /* The computations are made assuming 1em equals 16px which is the default value in most browsers.
      If you are lost with px to em conversion, try https://nekocalc.com/px-to-em-converter */
   font-size: 0.625em; /* this (10px) is the new font size context for em value in this context */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -318,7 +318,7 @@ So here's the result with our three states ([check out the source code here](/en
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -439,7 +439,7 @@ So here's the result with our three states ([check out the source code here](/en
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -560,7 +560,7 @@ So here's the result with our three states ([check out the source code here](/en
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -817,7 +817,7 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -1109,7 +1109,7 @@ Check out the [full source code](/en-US/docs/Learn_web_development/Extensions/Fo
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -1427,7 +1427,7 @@ Check out the [source code here](/en-US/docs/Learn_web_development/Extensions/Fo
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 
@@ -1746,7 +1746,7 @@ Check out the [full source code here](/en-US/docs/Learn_web_development/Extensio
 
 .select {
   font-size: 0.625em; /* 10px */
-  font-family: Verdana, Arial, sans-serif;
+  font-family: "Verdana", "Arial", sans-serif;
 
   box-sizing: border-box;
 

files/en-us/learn_web_development/extensions/performance/css/index.md

@@ -252,7 +252,7 @@ Applied to the `@font-face` at-rule, the [`font-display`](/en-US/docs/Web/CSS/@f
 
 ```css
 @font-face {
-  font-family: someFont;
+  font-family: "someFont";
   src: url("/path/to/fonts/someFont.woff") format("woff");
   font-weight: 400;
   font-style: normal;

files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md

@@ -177,7 +177,7 @@ Using shorthand properties for defining style rules is good because it uses a ve
 ```css
 #stockTicker {
   font-size: 12px;
-  font-family: Verdana;
+  font-family: "Verdana";
   font-weight: bold;
 }
 .stockSymbol {

files/en-us/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md

@@ -87,7 +87,7 @@ In this example:
     <style type="text/css">
       body,
       p {
-        font-family: Verdana, sans-serif;
+        font-family: "Verdana", sans-serif;
         font-size: 12px;
       }
     </style>