fix(css): Change font-family only when it's needed (#2457)

mdn · Jul 21, 2023 · 87fc49c · 87fc49c
1 parent 7b1e5a7
commit 87fc49c
Show file tree

Hide file tree

Showing 15 changed files with 150 additions and 158 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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/...xamples/css-examples/fonts/fonts-base.css → ...xamples/css-examples/fonts/text-align.css b/...xamples/css-examples/fonts/fonts-base.css → ...xamples/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1,6 +1,5 @@
 label {
     display: block;
-    font: 0.9rem 'Fira Sans', sans-serif;
 }
 
 input[type='submit'],