diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md
index 653cf1378d9e164..6f8fb9a2b05de7f 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_styling/index.md
+++ b/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 {
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md
index 6da174ac9ebbd75..9d4476453dac45b 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/introduction/index.md
+++ b/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%;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
index 2a4cc0de95b58ca..452cb88a4a8965b 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/react_todo_list_beginning/index.md
+++ b/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;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
index 1c512ffba2ffb4d..4ee3db31b1930cb 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/svelte_todo_list_beginning/index.md
+++ b/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;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md
index 313eee10e852289..d2bcbc410ce21c2 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_conditional_rendering/index.md
+++ b/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;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md
index 247ee9564eb4b61..088c1dc1d151cb3 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/vue_styling/index.md
+++ b/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;
diff --git a/files/en-us/learn_web_development/core/scripting/what_is_javascript/index.md b/files/en-us/learn_web_development/core/scripting/what_is_javascript/index.md
index 120c109cde70df7..7e4d64b5fc48b10 100644
--- a/files/en-us/learn_web_development/core/scripting/what_is_javascript/index.md
+++ b/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%);
diff --git a/files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md b/files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md
index fac9d7a8f2a87b0..3d56fe17ddb9ca1 100644
--- a/files/en-us/learn_web_development/core/styling_basics/advanced_styling_effects/index.md
+++ b/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 {
diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
index 20daf650a9f02c5..4774aa8fe8e13ab 100644
--- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md
+++ b/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 {
diff --git a/files/en-us/learn_web_development/core/styling_basics/tables/index.md b/files/en-us/learn_web_development/core/styling_basics/tables/index.md
index 6532aef429f0d0c..81afea3c19a9753 100644
--- a/files/en-us/learn_web_development/core/styling_basics/tables/index.md
+++ b/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 {
diff --git a/files/en-us/learn_web_development/core/text_styling/fundamentals/index.md b/files/en-us/learn_web_development/core/text_styling/fundamentals/index.md
index 058dd14519fdce2..63f6a7a7833b5f5 100644
--- a/files/en-us/learn_web_development/core/text_styling/fundamentals/index.md
+++ b/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;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/core/text_styling/styling_lists/index.md b/files/en-us/learn_web_development/core/text_styling/styling_lists/index.md
index 4d2f584177f17a2..173970277b41922 100644
--- a/files/en-us/learn_web_development/core/text_styling/styling_lists/index.md
+++ b/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;
 }
 
diff --git a/files/en-us/learn_web_development/core/text_styling/web_fonts/index.md b/files/en-us/learn_web_development/core/text_styling/web_fonts/index.md
index 3f80b214a7654b6..a7a9e616e6c4c9f 100644
--- a/files/en-us/learn_web_development/core/text_styling/web_fonts/index.md
+++ b/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;
 }
 ```
 
diff --git a/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md b/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
index cef7146398c8644..fb6216dcc7e8a28 100644
--- a/files/en-us/learn_web_development/extensions/client-side_apis/drawing_graphics/index.md
+++ b/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%;
 }
 
diff --git a/files/en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md b/files/en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md
index 098fb98ec8f5c5d..9e6330b6a50f5e9 100644
--- a/files/en-us/learn_web_development/extensions/client-side_apis/video_and_audio_apis/index.md
+++ b/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);
diff --git a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md b/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
index e596da3d1037dd2..0232d5382b17e39 100644
--- a/files/en-us/learn_web_development/extensions/forms/customizable_select/index.md
+++ b/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 {
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md
index eb42e29ec88661c..5aa3a2cb243af26 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_1/index.md
+++ b/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;
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
index 42d95f81cd4d2ca..7e70f3437fefc7b 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_2/index.md
+++ b/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;
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
index 254cffb8496295c..60da0b321c67156 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_3/index.md
+++ b/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;
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
index 064ec7a69922690..38de8d8825c4221 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_4/index.md
+++ b/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;
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
index 22f3ae38bedea04..9d47dc86cdc3df6 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/example_5/index.md
+++ b/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;
 
diff --git a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md b/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
index a3b0876ad91ff52..1901ca52924b7de 100644
--- a/files/en-us/learn_web_development/extensions/forms/how_to_build_custom_form_controls/index.md
+++ b/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;
 
diff --git a/files/en-us/learn_web_development/extensions/performance/css/index.md b/files/en-us/learn_web_development/extensions/performance/css/index.md
index 2936316fb179cd8..e0b4da523a1a1d3 100644
--- a/files/en-us/learn_web_development/extensions/performance/css/index.md
+++ b/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;
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md
index 01c906064facf9b..951810033144e2c 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/css_faq/index.md
+++ b/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 {
diff --git a/files/en-us/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md b/files/en-us/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md
index 39d6315f7b7f011..a070692ef8fe9b5 100644
--- a/files/en-us/mozilla/firefox/releases/1.5/using_firefox_1.5_caching/index.md
+++ b/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>
diff --git a/files/en-us/web/api/animation/overallprogress/index.md b/files/en-us/web/api/animation/overallprogress/index.md
index bd3acc19569b25d..7c01729e232d1e4 100644
--- a/files/en-us/web/api/animation/overallprogress/index.md
+++ b/files/en-us/web/api/animation/overallprogress/index.md
@@ -44,7 +44,7 @@ The demo's CSS provides some rudimentary styling, which is not important for und
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
diff --git a/files/en-us/web/api/cssfontfacerule/index.md b/files/en-us/web/api/cssfontfacerule/index.md
index 2be087f3322d4ca..3edc9ac29e6c985 100644
--- a/files/en-us/web/api/cssfontfacerule/index.md
+++ b/files/en-us/web/api/cssfontfacerule/index.md
@@ -28,7 +28,7 @@ This example uses the CSS found as an example on the {{cssxref("@font-face")}} p
 
 ```css
 @font-face {
-  font-family: MyHelvetica;
+  font-family: "MyHelvetica";
   src:
     local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
     url("MgOpenModernaBold.ttf");
diff --git a/files/en-us/web/api/cssfontfacerule/style/index.md b/files/en-us/web/api/cssfontfacerule/style/index.md
index e53ba572e2a3e63..2fec6df0e0b2cb5 100644
--- a/files/en-us/web/api/cssfontfacerule/style/index.md
+++ b/files/en-us/web/api/cssfontfacerule/style/index.md
@@ -20,7 +20,7 @@ This example uses the CSS found as an example on the {{cssxref("@font-face")}} p
 
 ```css
 @font-face {
-  font-family: MyHelvetica;
+  font-family: "MyHelvetica";
   src:
     local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
     url("MgOpenModernaBold.ttf");
diff --git a/files/en-us/web/api/document_object_model/examples/index.md b/files/en-us/web/api/document_object_model/examples/index.md
index 9e7ef05e2a44118..2c9e9983a53d3a6 100644
--- a/files/en-us/web/api/document_object_model/examples/index.md
+++ b/files/en-us/web/api/document_object_model/examples/index.md
@@ -139,7 +139,7 @@ body {
   background-color: darkblue;
 }
 p {
-  font-family: Arial;
+  font-family: "Arial";
   font-size: 10pt;
   margin-left: 0.125in;
 }
diff --git a/files/en-us/web/api/element/requestfullscreen/index.md b/files/en-us/web/api/element/requestfullscreen/index.md
index c32ce3810182371..b1326cf32e6ab35 100644
--- a/files/en-us/web/api/element/requestfullscreen/index.md
+++ b/files/en-us/web/api/element/requestfullscreen/index.md
@@ -145,7 +145,8 @@ document.addEventListener("keydown", (event) => {
 
 ```css hidden
 body {
-  font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
+  font-family:
+    "Benton Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   margin: 2em;
 }
 
diff --git a/files/en-us/web/api/htmlimageelement/crossorigin/index.md b/files/en-us/web/api/htmlimageelement/crossorigin/index.md
index 49759f0adf61a0a..0779e85bf4dd3f5 100644
--- a/files/en-us/web/api/htmlimageelement/crossorigin/index.md
+++ b/files/en-us/web/api/htmlimageelement/crossorigin/index.md
@@ -102,7 +102,7 @@ img {
 
 output {
   background: rgb(100 100 100 / 100%);
-  font-family: Courier, monospace;
+  font-family: "Courier New", monospace;
   width: 95%;
 }
 ```
diff --git a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md
index cc0f2fca84f876f..c61303f7ab83229 100644
--- a/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md
+++ b/files/en-us/web/api/intersection_observer_api/timing_element_visibility/index.md
@@ -55,7 +55,7 @@ We provide styles for the {{HTMLElement("body")}} and {{HTMLElement("main")}} el
 
 ```css
 body {
-  font-family: "Open Sans", "Arial", "Helvetica", sans-serif;
+  font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
   background-color: aliceblue;
 }
 
diff --git a/files/en-us/web/api/keyboardevent/code/index.md b/files/en-us/web/api/keyboardevent/code/index.md
index 43492182a35a469..59b5130080d88f4 100644
--- a/files/en-us/web/api/keyboardevent/code/index.md
+++ b/files/en-us/web/api/keyboardevent/code/index.md
@@ -40,7 +40,7 @@ The code values for Windows, Linux, and macOS are listed on the [KeyboardEvent:
 
 ```css
 #output {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   border: 1px solid black;
   width: 95%;
   margin: auto;
diff --git a/files/en-us/web/api/location/index.md b/files/en-us/web/api/location/index.md
index 0dbc518578a0d4a..7238958e743f3f0 100644
--- a/files/en-us/web/api/location/index.md
+++ b/files/en-us/web/api/location/index.md
@@ -41,7 +41,7 @@ body {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
-  font-family: Georgia;
+  font-family: "Georgia";
   font-size: 200%;
   line-height: 1em;
   white-space: nowrap;
diff --git a/files/en-us/web/api/popover_api/using/index.md b/files/en-us/web/api/popover_api/using/index.md
index 75efd45c896b64e..11e81e7d47a4855 100644
--- a/files/en-us/web/api/popover_api/using/index.md
+++ b/files/en-us/web/api/popover_api/using/index.md
@@ -498,7 +498,7 @@ The two popover properties we want to transition are [`opacity`](/en-US/docs/Web
 
 ```css
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 /* Transition for the popover itself */
@@ -605,7 +605,7 @@ We have defined keyframes that specify the desired entry and exit animations, an
 
 ```css
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 [popover] {
diff --git a/files/en-us/web/api/scrolltimeline/index.md b/files/en-us/web/api/scrolltimeline/index.md
index df3305886d250a5..13fd4e76864d2fe 100644
--- a/files/en-us/web/api/scrolltimeline/index.md
+++ b/files/en-us/web/api/scrolltimeline/index.md
@@ -67,7 +67,7 @@ The CSS for the example looks like this:
 }
 
 .output {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   position: fixed;
   top: 5px;
   right: 5px;
diff --git a/files/en-us/web/api/summarizer_api/using/index.md b/files/en-us/web/api/summarizer_api/using/index.md
index d608521ebe87b5c..720a50361c85833 100644
--- a/files/en-us/web/api/summarizer_api/using/index.md
+++ b/files/en-us/web/api/summarizer_api/using/index.md
@@ -204,7 +204,7 @@ The second half of our markup includes a {{htmlelement("p")}} element to display
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
diff --git a/files/en-us/web/api/translator_and_language_detector_apis/using/index.md b/files/en-us/web/api/translator_and_language_detector_apis/using/index.md
index 617f4a0702cce34..8287b371c98ce91 100644
--- a/files/en-us/web/api/translator_and_language_detector_apis/using/index.md
+++ b/files/en-us/web/api/translator_and_language_detector_apis/using/index.md
@@ -244,7 +244,7 @@ The second half of our markup includes a {{htmlelement("p")}} element to display
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
diff --git a/files/en-us/web/api/viewtimeline/index.md b/files/en-us/web/api/viewtimeline/index.md
index e292280733a28a7..d727d5a45abec2c 100644
--- a/files/en-us/web/api/viewtimeline/index.md
+++ b/files/en-us/web/api/viewtimeline/index.md
@@ -107,7 +107,7 @@ The CSS for the example looks like this:
 p,
 h1,
 div {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/api/web_components/using_templates_and_slots/index.md b/files/en-us/web/api/web_components/using_templates_and_slots/index.md
index e8dc42cfc4e005b..9262426f6483ed6 100644
--- a/files/en-us/web/api/web_components/using_templates_and_slots/index.md
+++ b/files/en-us/web/api/web_components/using_templates_and_slots/index.md
@@ -180,7 +180,7 @@ First of all, we use the {{HTMLElement("slot")}} element within a {{HTMLElement(
 <template id="element-details-template">
   <style>
     details {
-      font-family: "Open Sans Light", Helvetica, Arial;
+      font-family: "Open Sans Light", "Helvetica", "Arial";
     }
     .name {
       font-weight: bold;
@@ -304,7 +304,7 @@ dl {
 }
 dt {
   color: #217ac0;
-  font-family: Consolas, "Liberation Mono", Courier;
+  font-family: "Consolas", "Liberation Mono", "Courier New";
   font-size: 110%;
   font-weight: bold;
 }
diff --git a/files/en-us/web/html/reference/elements/code/index.md b/files/en-us/web/html/reference/elements/code/index.md
index a2a58c9eeb5aaa7..583f33c9a405035 100644
--- a/files/en-us/web/html/reference/elements/code/index.md
+++ b/files/en-us/web/html/reference/elements/code/index.md
@@ -21,7 +21,7 @@ The **`<code>`** [HTML](/en-US/docs/Web/HTML) element displays its contents styl
 code {
   background-color: #eeeeee;
   border-radius: 3px;
-  font-family: courier, monospace;
+  font-family: "Courier New", monospace;
   padding: 0 3px;
 }
 ```
diff --git a/files/en-us/web/html/reference/elements/ins/index.md b/files/en-us/web/html/reference/elements/ins/index.md
index 32c344bea1f7ca5..e2b1f5377d7a135 100644
--- a/files/en-us/web/html/reference/elements/ins/index.md
+++ b/files/en-us/web/html/reference/elements/ins/index.md
@@ -53,7 +53,7 @@ ins::before {
 
 p {
   margin: 0 1.8rem;
-  font-family: Georgia, serif;
+  font-family: "Georgia", serif;
   font-size: 1rem;
 }
 ```
diff --git a/files/en-us/web/html/reference/elements/slot/index.md b/files/en-us/web/html/reference/elements/slot/index.md
index 4cc00f5ce9e7db9..9c18cc2687bb1a9 100644
--- a/files/en-us/web/html/reference/elements/slot/index.md
+++ b/files/en-us/web/html/reference/elements/slot/index.md
@@ -21,7 +21,7 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo
 <template id="element-details-template">
   <style>
     details {
-      font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
+      font-family: "Open Sans Light", "Helvetica", "Arial", sans-serif;
     }
     .name {
       font-weight: bold;
diff --git a/files/en-us/web/html/reference/elements/summary/index.md b/files/en-us/web/html/reference/elements/summary/index.md
index daa2678b9a77243..3405f9b1884a325 100644
--- a/files/en-us/web/html/reference/elements/summary/index.md
+++ b/files/en-us/web/html/reference/elements/summary/index.md
@@ -146,7 +146,7 @@ In the first disclosure widget, we style the `::marker`, changing the {{cssxref(
 ```css
 details {
   font-size: 1rem;
-  font-family: "Open Sans", Calibri, sans-serif;
+  font-family: "Open Sans", "Calibri", sans-serif;
   border: solid;
   padding: 2px 6px;
   margin-bottom: 1em;
diff --git a/files/en-us/web/html/reference/elements/tt/index.md b/files/en-us/web/html/reference/elements/tt/index.md
index 27a7db957f53a26..661ab9d8c7bf295 100644
--- a/files/en-us/web/html/reference/elements/tt/index.md
+++ b/files/en-us/web/html/reference/elements/tt/index.md
@@ -50,7 +50,7 @@ You can override the browser's default font—if the browser permits you to do s
 
 ```css
 tt {
-  font-family: "Lucida Console", "Menlo", "Monaco", "Courier", monospace;
+  font-family: "Lucida Console", "Menlo", "Monaco", "Courier New", monospace;
 }
 ```
 
diff --git a/files/en-us/web/html/reference/global_attributes/contenteditable/index.md b/files/en-us/web/html/reference/global_attributes/contenteditable/index.md
index 83ae7e9c93c5b54..4e0eac433afc2c1 100644
--- a/files/en-us/web/html/reference/global_attributes/contenteditable/index.md
+++ b/files/en-us/web/html/reference/global_attributes/contenteditable/index.md
@@ -116,7 +116,7 @@ h2 {
   margin-bottom: 0;
 }
 .copying {
-  font-family: Georgia, serif;
+  font-family: "Georgia", serif;
   margin: 1rem;
   padding: 1rem;
   border: solid black 1px;
diff --git a/files/en-us/web/javascript/guide/closures/index.md b/files/en-us/web/javascript/guide/closures/index.md
index 5f1d0aa9db3abf6..1ba8d46be6de1cc 100644
--- a/files/en-us/web/javascript/guide/closures/index.md
+++ b/files/en-us/web/javascript/guide/closures/index.md
@@ -112,7 +112,7 @@ For instance, suppose we want to add buttons to a page to adjust the text size.
 
 ```css
 body {
-  font-family: Helvetica, Arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   font-size: 12px;
 }
 
diff --git a/files/en-us/web/media/guides/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md b/files/en-us/web/media/guides/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
index bd145bab6cbe25f..70b23013a2bc063 100644
--- a/files/en-us/web/media/guides/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
+++ b/files/en-us/web/media/guides/audio_and_video_delivery/adding_captions_and_subtitles_to_html5_video/index.md
@@ -109,8 +109,8 @@ In addition to adding the `<track>` elements, we have also added a new button to
 :root {
   color: #333333;
   font-family:
-    "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida", "Arial",
-    "Helvetica", sans-serif;
+    "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida",
+    "Helvetica", "Arial", sans-serif;
 }
 a {
   color: #0095dd;
diff --git a/files/en-us/web/media/guides/audio_and_video_delivery/cross_browser_video_player/index.md b/files/en-us/web/media/guides/audio_and_video_delivery/cross_browser_video_player/index.md
index a020074c82fe032..d9fc0372bbcf2d9 100644
--- a/files/en-us/web/media/guides/audio_and_video_delivery/cross_browser_video_player/index.md
+++ b/files/en-us/web/media/guides/audio_and_video_delivery/cross_browser_video_player/index.md
@@ -280,8 +280,8 @@ The CSS part is hidden for this tutorial, but you can click "Play" to see the fu
 :root {
   color: #333333;
   font-family:
-    "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida", "Arial",
-    "Helvetica", sans-serif;
+    "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida",
+    "Helvetica", "Arial", sans-serif;
 }
 a {
   color: #0095dd;
diff --git a/files/en-us/web/media/guides/audio_and_video_delivery/video_player_styling_basics/index.md b/files/en-us/web/media/guides/audio_and_video_delivery/video_player_styling_basics/index.md
index 725ef1af1862468..e6a1b0a14e0c5d8 100644
--- a/files/en-us/web/media/guides/audio_and_video_delivery/video_player_styling_basics/index.md
+++ b/files/en-us/web/media/guides/audio_and_video_delivery/video_player_styling_basics/index.md
@@ -76,8 +76,8 @@ The resultant video player style used here is rather basic — this is intention
 :root {
   color: #333333;
   font-family:
-    "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida", "Arial",
-    "Helvetica", sans-serif;
+    "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida",
+    "Helvetica", "Arial", sans-serif;
 }
 a {
   color: #0095dd;
diff --git a/files/en-us/web/progressive_web_apps/manifest/reference/orientation/index.md b/files/en-us/web/progressive_web_apps/manifest/reference/orientation/index.md
index c2b869af11ba05f..e746b746a42dc38 100644
--- a/files/en-us/web/progressive_web_apps/manifest/reference/orientation/index.md
+++ b/files/en-us/web/progressive_web_apps/manifest/reference/orientation/index.md
@@ -205,7 +205,7 @@ The example below illustrates how a web app's layout might appear when a mobile
 
 .label {
   margin-top: 10px;
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   font-size: 15px;
 }
 ```
diff --git a/files/en-us/web/svg/reference/element/femorphology/index.md b/files/en-us/web/svg/reference/element/femorphology/index.md
index 0c4ae2bd761d596..3c196aa8a90b933 100644
--- a/files/en-us/web/svg/reference/element/femorphology/index.md
+++ b/files/en-us/web/svg/reference/element/femorphology/index.md
@@ -48,7 +48,7 @@ This element implements the {{domxref("SVGFEMorphologyElement")}} interface.
 
 ```css
 text {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   font-size: 3em;
 }
 
@@ -87,7 +87,7 @@ text {
 ```css
 p {
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   font-size: 3em;
 }
 
diff --git a/files/en-us/web/svg/tutorials/svg_from_scratch/using_fonts/index.md b/files/en-us/web/svg/tutorials/svg_from_scratch/using_fonts/index.md
index eeb0e1d129a143f..4759f723aac2b88 100644
--- a/files/en-us/web/svg/tutorials/svg_from_scratch/using_fonts/index.md
+++ b/files/en-us/web/svg/tutorials/svg_from_scratch/using_fonts/index.md
@@ -20,7 +20,7 @@ Note that the CSS here is nested within an SVG {{SVGElement("style")}} element,
   <style>
     text {
       /* Specify the system or custom font to use */
-      font-family: "Courier New", sans-serif;
+      font-family: "Courier New", monospace;
 
       /* Add other styling */
       font-size: 24px;