From f846c093b17751287f260f2121b769a656071586 Mon Sep 17 00:00:00 2001
From: Alexey Elin <alexey.elin@list.ru>
Date: Wed, 23 Dec 2020 22:25:21 +0300
Subject: [PATCH] docs: specify fallback generic font family (#40254)

https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
"You should always include at least one generic family name in a font-family list,
 since there's no guarantee that any given font is available. This lets the browser
 select an acceptable fallback font when necessary."

PR Close #40254
---
 .../animations/src/app/hero-list-page.component.css         | 2 +-
 .../examples/built-in-directives/src/app/app.component.css  | 2 +-
 .../examples/getting-started-v0/src/app/app.component.css   | 2 +-
 .../examples/http/src/app/heroes/heroes.component.css       | 2 +-
 .../src/app/profile-editor/profile-editor.component.css     | 2 +-
 .../examples/router-tutorial/src/app/app.component.css      | 6 +++---
 .../app/crisis-center/crisis-list/crisis-list.component.css | 2 +-
 .../router/src/app/heroes/hero-list/hero-list.component.css | 2 +-
 .../examples/template-syntax/src/app/app.component.css      | 2 +-
 .../examples/testing/src/app/hero/hero-detail.component.css | 2 +-
 .../examples/testing/src/app/hero/hero-list.component.css   | 2 +-
 aio/content/examples/toh-pt0/src/styles.1.css               | 2 +-
 .../toh-pt5/src/app/hero-detail/hero-detail.component.css   | 2 +-
 aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts        | 4 ++--
 .../toh-pt6/src/app/hero-detail/hero-detail.component.css   | 2 +-
 .../examples/toh-pt6/src/app/heroes/heroes.component.css    | 2 +-
 aio/content/examples/universal/e2e/src/app.e2e-spec.ts      | 4 ++--
 .../universal/src/app/hero-detail/hero-detail.component.css | 2 +-
 .../examples/universal/src/app/heroes/heroes.component.css  | 2 +-
 aio/tools/examples/shared/boilerplate/common/src/styles.css | 4 ++--
 20 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/aio/content/examples/animations/src/app/hero-list-page.component.css b/aio/content/examples/animations/src/app/hero-list-page.component.css
index 3a2467c526..02b2b9fc8c 100644
--- a/aio/content/examples/animations/src/app/hero-list-page.component.css
+++ b/aio/content/examples/animations/src/app/hero-list-page.component.css
@@ -62,7 +62,7 @@
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/built-in-directives/src/app/app.component.css b/aio/content/examples/built-in-directives/src/app/app.component.css
index 201fe682c4..52cccf1628 100644
--- a/aio/content/examples/built-in-directives/src/app/app.component.css
+++ b/aio/content/examples/built-in-directives/src/app/app.component.css
@@ -59,7 +59,7 @@ img {
 
 .study,
 .modified {
-  font-family: "Brush Script MT";
+  font-family: "Brush Script MT", cursive;
   font-size: 2rem;
 }
 
diff --git a/aio/content/examples/getting-started-v0/src/app/app.component.css b/aio/content/examples/getting-started-v0/src/app/app.component.css
index b7ef084c56..ba43f5120f 100644
--- a/aio/content/examples/getting-started-v0/src/app/app.component.css
+++ b/aio/content/examples/getting-started-v0/src/app/app.component.css
@@ -1,3 +1,3 @@
 p {
   font-family: Lato;
-}
\ No newline at end of file
+}
diff --git a/aio/content/examples/http/src/app/heroes/heroes.component.css b/aio/content/examples/http/src/app/heroes/heroes.component.css
index 1f9781b66e..c2f101fabf 100644
--- a/aio/content/examples/http/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/http/src/app/heroes/heroes.component.css
@@ -57,7 +57,7 @@
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
index 6d29164b1a..310e787cfe 100644
--- a/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
+++ b/aio/content/examples/reactive-forms/src/app/profile-editor/profile-editor.component.css
@@ -20,7 +20,7 @@ input {
 }
 
 button {
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/router-tutorial/src/app/app.component.css b/aio/content/examples/router-tutorial/src/app/app.component.css
index fcefcc4011..5c17c595eb 100644
--- a/aio/content/examples/router-tutorial/src/app/app.component.css
+++ b/aio/content/examples/router-tutorial/src/app/app.component.css
@@ -7,7 +7,7 @@
     display: inline-block;
     cursor: pointer;
     color: #666666;
-    font-family: Arial;
+    font-family: Arial, sans-serif;
     font-size: 15px;
     font-weight: bold;
     padding: 6px 24px;
@@ -24,11 +24,11 @@
     display: inline-block;
     cursor: pointer;
     color: #ffffff;
-    font-family: Arial;
+    font-family: Arial, sans-serif;
     font-size: 15px;
     font-weight: bold;
     padding: 6px 24px;
     text-decoration: none;
     text-shadow: 0px 1px 0px #528ecc;
     outline: 0;
-}
\ No newline at end of file
+}
diff --git a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css
index 4b46ace641..5a978c35c9 100644
--- a/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css
+++ b/aio/content/examples/router/src/app/crisis-center/crisis-list/crisis-list.component.css
@@ -54,7 +54,7 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
index c81536fcb5..7c8e1be801 100644
--- a/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
+++ b/aio/content/examples/router/src/app/heroes/hero-list/hero-list.component.css
@@ -55,7 +55,7 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/template-syntax/src/app/app.component.css b/aio/content/examples/template-syntax/src/app/app.component.css
index 23f9667623..01163bffbc 100644
--- a/aio/content/examples/template-syntax/src/app/app.component.css
+++ b/aio/content/examples/template-syntax/src/app/app.component.css
@@ -11,7 +11,7 @@ img {height: 100px;}
 .special {font-weight:bold; font-size: x-large}
 .bad {color: red;}
 .saveable {color: limegreen;}
-.curly, .modified {font-family: "Brush Script MT"}
+.curly, .modified {font-family: "Brush Script MT", cursive}
 .toe {margin-left: 1em; font-style: italic;}
 little-hero {color:blue; font-size: smaller; background-color: Turquoise }
 .to-toc {margin-top: 10px; display: block}
diff --git a/aio/content/examples/testing/src/app/hero/hero-detail.component.css b/aio/content/examples/testing/src/app/hero/hero-detail.component.css
index dc61d049c2..546e11e392 100644
--- a/aio/content/examples/testing/src/app/hero/hero-detail.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-detail.component.css
@@ -12,7 +12,7 @@ input {
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/testing/src/app/hero/hero-list.component.css b/aio/content/examples/testing/src/app/hero/hero-list.component.css
index 40ced744d9..bb24cf0cd6 100644
--- a/aio/content/examples/testing/src/app/hero/hero-list.component.css
+++ b/aio/content/examples/testing/src/app/hero/hero-list.component.css
@@ -46,7 +46,7 @@
   border-radius: 4px 0 0 4px;
 }
 button {
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/toh-pt0/src/styles.1.css b/aio/content/examples/toh-pt0/src/styles.1.css
index 1821a5fc8d..2fb0dfc708 100644
--- a/aio/content/examples/toh-pt0/src/styles.1.css
+++ b/aio/content/examples/toh-pt0/src/styles.1.css
@@ -14,7 +14,7 @@ body {
 }
 body, input[type="text"], button {
   color: #333;
-  font-family: Cambria, Georgia;
+  font-family: Cambria, Georgia, serif;
 }
 /* everywhere else */
 * {
diff --git a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
index 835a13de5b..6a860b871d 100644
--- a/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/toh-pt5/src/app/hero-detail/hero-detail.component.css
@@ -13,7 +13,7 @@ input {
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
index c92e101fb0..f9c8b74904 100644
--- a/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/toh-pt6/e2e/src/app.e2e-spec.ts
@@ -193,7 +193,7 @@ describe('Tutorial part 6', () => {
 
       for (const button of buttons) {
         // Inherited styles from styles.css
-        expect(await button.getCssValue('font-family')).toBe('Arial');
+        expect(await button.getCssValue('font-family')).toBe('Arial, sans-serif');
         expect(await button.getCssValue('border')).toContain('none');
         expect(await button.getCssValue('padding')).toBe('5px 10px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
@@ -204,7 +204,7 @@ describe('Tutorial part 6', () => {
 
       const addButton = element(by.buttonText('add'));
       // Inherited styles from styles.css
-      expect(await addButton.getCssValue('font-family')).toBe('Arial');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial, sans-serif');
       expect(await addButton.getCssValue('border')).toContain('none');
       expect(await addButton.getCssValue('padding')).toBe('5px 10px');
       expect(await addButton.getCssValue('border-radius')).toBe('4px');
diff --git a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
index 835a13de5b..6a860b871d 100644
--- a/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/toh-pt6/src/app/hero-detail/hero-detail.component.css
@@ -13,7 +13,7 @@ input {
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
index 83588b105c..bb1660e906 100644
--- a/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/toh-pt6/src/app/heroes/heroes.component.css
@@ -57,7 +57,7 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
index ffebea3ff1..7992cb36ba 100644
--- a/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
+++ b/aio/content/examples/universal/e2e/src/app.e2e-spec.ts
@@ -172,7 +172,7 @@ describe('Universal', () => {
 
       for (const button of buttons) {
         // Inherited styles from styles.css
-        expect(await button.getCssValue('font-family')).toBe('Arial');
+        expect(await button.getCssValue('font-family')).toBe('Arial, sans-serif');
         expect(await button.getCssValue('border')).toContain('none');
         expect(await button.getCssValue('padding')).toBe('5px 10px');
         expect(await button.getCssValue('border-radius')).toBe('4px');
@@ -183,7 +183,7 @@ describe('Universal', () => {
 
       const addButton = element(by.buttonText('add'));
       // Inherited styles from styles.css
-      expect(await addButton.getCssValue('font-family')).toBe('Arial');
+      expect(await addButton.getCssValue('font-family')).toBe('Arial, sans-serif');
       expect(await addButton.getCssValue('border')).toContain('none');
       expect(await addButton.getCssValue('padding')).toBe('5px 10px');
       expect(await addButton.getCssValue('border-radius')).toBe('4px');
diff --git a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
index 835a13de5b..6a860b871d 100644
--- a/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
+++ b/aio/content/examples/universal/src/app/hero-detail/hero-detail.component.css
@@ -13,7 +13,7 @@ input {
 }
 button {
   margin-top: 20px;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;
diff --git a/aio/content/examples/universal/src/app/heroes/heroes.component.css b/aio/content/examples/universal/src/app/heroes/heroes.component.css
index 9f8f5dfc26..a081f6ce78 100644
--- a/aio/content/examples/universal/src/app/heroes/heroes.component.css
+++ b/aio/content/examples/universal/src/app/heroes/heroes.component.css
@@ -56,7 +56,7 @@ button {
   padding: 5px 10px;
   border-radius: 4px;
   cursor: pointer;
-  font-family: Arial;
+  font-family: Arial, sans-serif;
 }
 
 button:hover {
diff --git a/aio/tools/examples/shared/boilerplate/common/src/styles.css b/aio/tools/examples/shared/boilerplate/common/src/styles.css
index 41b66bc5b4..442e46c1e8 100644
--- a/aio/tools/examples/shared/boilerplate/common/src/styles.css
+++ b/aio/tools/examples/shared/boilerplate/common/src/styles.css
@@ -14,13 +14,13 @@ body {
 }
 body, input[text], button {
   color: #333;
-  font-family: Cambria, Georgia;
+  font-family: Cambria, Georgia, serif;
 }
 a {
   cursor: pointer;
 }
 button {
-  font-family: Arial;
+  font-family: Arial, sans-serif;
   background-color: #eee;
   border: none;
   padding: 5px 10px;