From 87fc49cc02acc0a710805ed4661159287a775943 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Niedzi=C3=B3=C5=82ka?=
 <niedziolek@hotmail.com>
Date: Fri, 21 Jul 2023 06:31:28 +0200
Subject: [PATCH] fix(css): Change `font-family` only when it's needed (#2457)

---
 .../fonts/font-optical-sizing.css             |   2 -
 .../css-examples/fonts/font-size.css          |   5 -
 .../fonts/font-variation-settings.css         |   2 -
 live-examples/css-examples/fonts/font.css     |  14 +-
 live-examples/css-examples/fonts/font.html    |   2 +-
 live-examples/css-examples/fonts/meta.json    | 259 +++++++++---------
 .../fonts/{fonts-base.css => text-align.css}  |   3 -
 live-examples/css-examples/text/meta.json     |   4 +-
 .../css-examples/text/text-indent.css         |   3 -
 .../content-sectioning/css/article.css        |   1 -
 .../content-sectioning/css/aside.css          |   4 -
 .../html-examples/forms/css/datalist.css      |   3 +-
 .../html-examples/forms/css/optgroup.css      |   3 +-
 .../inline-text-semantics/css/u.css           |   2 +-
 .../html-examples/input/css/password.css      |   1 -
 15 files changed, 150 insertions(+), 158 deletions(-)
 delete mode 100644 live-examples/css-examples/fonts/font-size.css
 rename live-examples/css-examples/fonts/{fonts-base.css => text-align.css} (57%)

diff --git a/live-examples/css-examples/fonts/font-optical-sizing.css b/live-examples/css-examples/fonts/font-optical-sizing.css
index b1357e8ba..289e559ae 100644
--- a/live-examples/css-examples/fonts/font-optical-sizing.css
+++ b/live-examples/css-examples/fonts/font-optical-sizing.css
@@ -1,5 +1,3 @@
-@import 'fonts.css';
-
 @font-face {
     src: url('/media/fonts/AmstelvarAlpha-VF.ttf');
     font-family: Amstelvar;
diff --git a/live-examples/css-examples/fonts/font-size.css b/live-examples/css-examples/fonts/font-size.css
deleted file mode 100644
index 1848990c8..000000000
--- a/live-examples/css-examples/fonts/font-size.css
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'fonts.css';
-
-#output section {
-    font-family: 'Fira Sans', sans-serif;
-}
diff --git a/live-examples/css-examples/fonts/font-variation-settings.css b/live-examples/css-examples/fonts/font-variation-settings.css
index be3fd8d47..8912d9905 100644
--- a/live-examples/css-examples/fonts/font-variation-settings.css
+++ b/live-examples/css-examples/fonts/font-variation-settings.css
@@ -1,5 +1,3 @@
-@import 'fonts.css';
-
 @font-face {
     src: url('/media/fonts/AmstelvarAlpha-VF.ttf');
     font-family: Amstelvar;
diff --git a/live-examples/css-examples/fonts/font.css b/live-examples/css-examples/fonts/font.css
index c152d8e24..44d3e7f77 100644
--- a/live-examples/css-examples/fonts/font.css
+++ b/live-examples/css-examples/fonts/font.css
@@ -1,4 +1,16 @@
-@import 'fonts-base.css';
+@font-face {
+    font-family: 'Fira Sans';
+    src: local('FiraSans-Regular'), url('/media/fonts/FiraSans-Regular.woff2') format('woff2');
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Fira Sans';
+    src: local('FiraSans-Italic'), url('/media/fonts/FiraSans-Italic.woff2') format('woff2');
+    font-weight: normal;
+    font-style: italic;
+}
 
 #output section {
     margin-top: 10px;
diff --git a/live-examples/css-examples/fonts/font.html b/live-examples/css-examples/fonts/font.html
index bb7856bcd..d39eb3423 100644
--- a/live-examples/css-examples/fonts/font.html
+++ b/live-examples/css-examples/fonts/font.html
@@ -6,7 +6,7 @@
 </button>
 </div>
 
-<div class="example-choice" initial-choice="true">
+<div class="example-choice">
 <pre><code class="language-css">font: italic 1.2em "Fira Sans", serif;</code></pre>
 <button type="button" class="copy hidden" aria-hidden="true">
     <span class="visually-hidden">Copy to Clipboard</span>
diff --git a/live-examples/css-examples/fonts/meta.json b/live-examples/css-examples/fonts/meta.json
index cc953785a..25d195a99 100644
--- a/live-examples/css-examples/fonts/meta.json
+++ b/live-examples/css-examples/fonts/meta.json
@@ -1,130 +1,129 @@
-{
-    "pages": {
-        "font": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font.html",
-            "fileName": "font.html",
-            "title": "CSS Demo: font",
-            "type": "css"
-        },
-        "fontFamily": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-family.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-family.html",
-            "fileName": "font-family.html",
-            "title": "CSS Demo: font-family",
-            "type": "css"
-        },
-        "fontFeatureSettings": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-feature-settings.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-feature-settings.html",
-            "fileName": "font-feature-settings.html",
-            "title": "CSS Demo: font-feature-settings",
-            "type": "css"
-        },
-        "fontLanguageOverride": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-language-override.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-language-override.html",
-            "fileName": "font-language-override.html",
-            "title": "CSS Demo: font-language-override",
-            "type": "css"
-        },
-        "fontKerning": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-kerning.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-kerning.html",
-            "fileName": "font-kerning.html",
-            "title": "CSS Demo: font-kerning",
-            "type": "css"
-        },
-        "fontOpticalSizing": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-optical-sizing.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-optical-sizing.html",
-            "fileName": "font-optical-sizing.html",
-            "title": "CSS Demo: font-optical-sizing",
-            "type": "css"
-        },
-        "fontSize": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-size.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-size.html",
-            "fileName": "font-size.html",
-            "title": "CSS Demo: font-size",
-            "type": "css"
-        },
-        "fontSizeAdjust": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-size-adjust.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-size-adjust.html",
-            "fileName": "font-size-adjust.html",
-            "title": "CSS Demo: font-size-adjust",
-            "type": "css"
-        },
-        "fontStretch": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-stretch.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-stretch.html",
-            "fileName": "font-stretch.html",
-            "title": "CSS Demo: font-stretch",
-            "type": "css"
-        },
-        "fontStyle": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-style.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-style.html",
-            "fileName": "font-style.html",
-            "title": "CSS Demo: font-style",
-            "type": "css"
-        },
-        "fontSynthesis": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-synthesis.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-synthesis.html",
-            "fileName": "font-synthesis.html",
-            "title": "CSS Demo: font-synthesis",
-            "type": "css"
-        },
-        "fontVariant": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-variant.html",
-            "fileName": "font-variant.html",
-            "title": "CSS Demo: font-variant",
-            "type": "css"
-        },
-        "fontVariantEastAsian": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-east-asian.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-variant-east-asian.html",
-            "fileName": "font-variant-east-asian.html",
-            "title": "CSS Demo: font-variant-east-asian",
-            "type": "css"
-        },
-        "fontVariantCaps": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-caps.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-variant-caps.html",
-            "fileName": "font-variant-caps.html",
-            "title": "CSS Demo: font-variant-caps",
-            "type": "css"
-        },
-        "fontVariantLigatures": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-ligatures.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-variant-ligatures.html",
-            "fileName": "font-variant-ligatures.html",
-            "title": "CSS Demo: font-variant-ligatures",
-            "type": "css"
-        },
-        "fontVariantNumeric": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-numeric.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-variant-numeric.html",
-            "fileName": "font-variant-numeric.html",
-            "title": "CSS Demo: font-variant-numeric",
-            "type": "css"
-        },
-        "fontVariationSettings": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variation-settings.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-variation-settings.html",
-            "fileName": "font-variation-settings.html",
-            "title": "CSS Demo: font-variation-settings",
-            "type": "css"
-        },
-        "fontWeight": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/font-weight.css",
-            "exampleCode": "./live-examples/css-examples/fonts/font-weight.html",
-            "fileName": "font-weight.html",
-            "title": "CSS Demo: font-weight",
-            "type": "css"
-        }
-    }
-}
+{
+    "pages": {
+        "font": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font.html",
+            "fileName": "font.html",
+            "title": "CSS Demo: font",
+            "type": "css"
+        },
+        "fontFamily": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-family.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-family.html",
+            "fileName": "font-family.html",
+            "title": "CSS Demo: font-family",
+            "type": "css"
+        },
+        "fontFeatureSettings": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-feature-settings.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-feature-settings.html",
+            "fileName": "font-feature-settings.html",
+            "title": "CSS Demo: font-feature-settings",
+            "type": "css"
+        },
+        "fontLanguageOverride": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-language-override.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-language-override.html",
+            "fileName": "font-language-override.html",
+            "title": "CSS Demo: font-language-override",
+            "type": "css"
+        },
+        "fontKerning": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-kerning.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-kerning.html",
+            "fileName": "font-kerning.html",
+            "title": "CSS Demo: font-kerning",
+            "type": "css"
+        },
+        "fontOpticalSizing": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-optical-sizing.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-optical-sizing.html",
+            "fileName": "font-optical-sizing.html",
+            "title": "CSS Demo: font-optical-sizing",
+            "type": "css"
+        },
+        "fontSize": {
+            "exampleCode": "./live-examples/css-examples/fonts/font-size.html",
+            "fileName": "font-size.html",
+            "title": "CSS Demo: font-size",
+            "type": "css"
+        },
+        "fontSizeAdjust": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-size-adjust.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-size-adjust.html",
+            "fileName": "font-size-adjust.html",
+            "title": "CSS Demo: font-size-adjust",
+            "type": "css"
+        },
+        "fontStretch": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-stretch.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-stretch.html",
+            "fileName": "font-stretch.html",
+            "title": "CSS Demo: font-stretch",
+            "type": "css"
+        },
+        "fontStyle": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-style.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-style.html",
+            "fileName": "font-style.html",
+            "title": "CSS Demo: font-style",
+            "type": "css"
+        },
+        "fontSynthesis": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-synthesis.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-synthesis.html",
+            "fileName": "font-synthesis.html",
+            "title": "CSS Demo: font-synthesis",
+            "type": "css"
+        },
+        "fontVariant": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-variant.html",
+            "fileName": "font-variant.html",
+            "title": "CSS Demo: font-variant",
+            "type": "css"
+        },
+        "fontVariantEastAsian": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-east-asian.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-variant-east-asian.html",
+            "fileName": "font-variant-east-asian.html",
+            "title": "CSS Demo: font-variant-east-asian",
+            "type": "css"
+        },
+        "fontVariantCaps": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-caps.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-variant-caps.html",
+            "fileName": "font-variant-caps.html",
+            "title": "CSS Demo: font-variant-caps",
+            "type": "css"
+        },
+        "fontVariantLigatures": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-ligatures.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-variant-ligatures.html",
+            "fileName": "font-variant-ligatures.html",
+            "title": "CSS Demo: font-variant-ligatures",
+            "type": "css"
+        },
+        "fontVariantNumeric": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variant-numeric.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-variant-numeric.html",
+            "fileName": "font-variant-numeric.html",
+            "title": "CSS Demo: font-variant-numeric",
+            "type": "css"
+        },
+        "fontVariationSettings": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-variation-settings.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-variation-settings.html",
+            "fileName": "font-variation-settings.html",
+            "title": "CSS Demo: font-variation-settings",
+            "type": "css"
+        },
+        "fontWeight": {
+            "cssExampleSrc": "./live-examples/css-examples/fonts/font-weight.css",
+            "exampleCode": "./live-examples/css-examples/fonts/font-weight.html",
+            "fileName": "font-weight.html",
+            "title": "CSS Demo: font-weight",
+            "type": "css"
+        }
+    }
+}
diff --git a/live-examples/css-examples/fonts/fonts-base.css b/live-examples/css-examples/fonts/text-align.css
similarity index 57%
rename from live-examples/css-examples/fonts/fonts-base.css
rename to live-examples/css-examples/fonts/text-align.css
index d76ade485..da2842e53 100644
--- a/live-examples/css-examples/fonts/fonts-base.css
+++ b/live-examples/css-examples/fonts/text-align.css
@@ -1,7 +1,4 @@
-@import 'fonts.css';
-
 #output section {
-    font-family: 'Fira Sans', sans-serif;
     font-size: 1.5em;
 }
 
diff --git a/live-examples/css-examples/text/meta.json b/live-examples/css-examples/text/meta.json
index afc226d0b..7eea6ae3c 100644
--- a/live-examples/css-examples/text/meta.json
+++ b/live-examples/css-examples/text/meta.json
@@ -57,14 +57,14 @@
             "type": "css"
         },
         "textAlign": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/fonts-base.css",
+            "cssExampleSrc": "./live-examples/css-examples/fonts/text-align.css",
             "exampleCode": "./live-examples/css-examples/text/text-align.html",
             "fileName": "text-align.html",
             "title": "CSS Demo: text-align",
             "type": "css"
         },
         "textAlignLast": {
-            "cssExampleSrc": "./live-examples/css-examples/fonts/fonts-base.css",
+            "cssExampleSrc": "./live-examples/css-examples/fonts/text-align.css",
             "exampleCode": "./live-examples/css-examples/text/text-align-last.html",
             "fileName": "text-align-last.html",
             "title": "CSS Demo: text-align-last",
diff --git a/live-examples/css-examples/text/text-indent.css b/live-examples/css-examples/text/text-indent.css
index 19caf0d6b..d392ba3b9 100644
--- a/live-examples/css-examples/text/text-indent.css
+++ b/live-examples/css-examples/text/text-indent.css
@@ -1,7 +1,4 @@
-@import '../fonts/fonts.css';
-
 #output section {
-    font-family: 'Fira Sans', sans-serif;
     font-size: 1.5em;
 }
 
diff --git a/live-examples/html-examples/content-sectioning/css/article.css b/live-examples/html-examples/content-sectioning/css/article.css
index 988371f4c..f4228a23b 100644
--- a/live-examples/html-examples/content-sectioning/css/article.css
+++ b/live-examples/html-examples/content-sectioning/css/article.css
@@ -2,7 +2,6 @@
     margin: 0;
     padding: 0.3rem;
     background-color: #eee;
-    font: 1rem 'Fira Sans', sans-serif;
 }
 
 .forecast > h1,
diff --git a/live-examples/html-examples/content-sectioning/css/aside.css b/live-examples/html-examples/content-sectioning/css/aside.css
index 6f83d946c..f9805dae5 100644
--- a/live-examples/html-examples/content-sectioning/css/aside.css
+++ b/live-examples/html-examples/content-sectioning/css/aside.css
@@ -11,7 +11,3 @@ aside {
 aside > p {
     margin: 0.5rem;
 }
-
-p {
-    font-family: 'Fira Sans', sans-serif;
-}
diff --git a/live-examples/html-examples/forms/css/datalist.css b/live-examples/html-examples/forms/css/datalist.css
index 0b13bb78a..3e728665c 100644
--- a/live-examples/html-examples/forms/css/datalist.css
+++ b/live-examples/html-examples/forms/css/datalist.css
@@ -1,3 +1,4 @@
 label {
-    font-family: 'Fira Sans', sans-serif;
+    display: block;
+    margin-bottom: 10px;
 }
diff --git a/live-examples/html-examples/forms/css/optgroup.css b/live-examples/html-examples/forms/css/optgroup.css
index 0b13bb78a..3e728665c 100644
--- a/live-examples/html-examples/forms/css/optgroup.css
+++ b/live-examples/html-examples/forms/css/optgroup.css
@@ -1,3 +1,4 @@
 label {
-    font-family: 'Fira Sans', sans-serif;
+    display: block;
+    margin-bottom: 10px;
 }
diff --git a/live-examples/html-examples/inline-text-semantics/css/u.css b/live-examples/html-examples/inline-text-semantics/css/u.css
index de17edde6..928f0a4ba 100644
--- a/live-examples/html-examples/inline-text-semantics/css/u.css
+++ b/live-examples/html-examples/inline-text-semantics/css/u.css
@@ -1,5 +1,5 @@
 p {
-    font: 1rem 'Fira Sans', sans-serif;
+    margin: 0;
 }
 
 u {
diff --git a/live-examples/html-examples/input/css/password.css b/live-examples/html-examples/input/css/password.css
index cfc5503ee..fcbee5b20 100644
--- a/live-examples/html-examples/input/css/password.css
+++ b/live-examples/html-examples/input/css/password.css
@@ -1,6 +1,5 @@
 label {
     display: block;
-    font: 0.9rem 'Fira Sans', sans-serif;
 }
 
 input[type='submit'],