fix(fonts): ensure italic looks like italic in Safari (#10828)

* Fix: Inter italic bug in Safari Text marked with <em> element is not slanted. See issue: #7203 * fix(fonts): apply font-variation-settings to all italic elements * fix(fonts): unset font-variation-settings where font-style is unset * fix(fonts): set font-variation-settings: normal where font-style: normal * revert: do not set font-variation-settings for mathml polyfill --------- Co-authored-by: Claas Augner <[email protected]>
mdn · May 2, 2024 · a06e429 · a06e429
1 parent d316348
commit a06e429
Show file tree

Hide file tree

Showing 18 changed files with 30 additions and 0 deletions.
diff --git a/client/src/about/index.scss b/client/src/about/index.scss
@@ -29,6 +29,7 @@
         font-family: var(--font-heading);
         font-size: 1.313rem;
         font-style: normal;
+        font-variation-settings: normal;
         font-weight: normal;
         line-height: 175%;
         margin: 0;

diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss
@@ -101,6 +101,7 @@
       border-left: 2px solid var(--category-color);
       display: inline-block;
       font-style: normal;
+      font-variation-settings: normal;
       font-weight: 600;
       padding: 0.25rem 0.25rem 0.25rem 0.5rem;
       width: 100%;

diff --git a/client/src/document/ingredients/browser-compatibility-table/index.scss b/client/src/document/ingredients/browser-compatibility-table/index.scss
@@ -180,6 +180,7 @@
 .bc-legend-tip {
   font-size: var(--type-smaller-font-size);
   font-style: italic;
+  font-variation-settings: "slnt" -10;
   margin-bottom: 1rem;
   margin-top: 0;
 }

diff --git a/client/src/document/organisms/sidebar/index.scss b/client/src/document/organisms/sidebar/index.scss
@@ -19,6 +19,7 @@
     border-left: 2px solid var(--category-color);
     display: inline-block;
     font-style: normal;
+    font-variation-settings: normal;
     font-weight: 600;
     hyphens: auto;
     padding: 0.25rem;

diff --git a/client/src/homepage/contributor-spotlight/index.scss b/client/src/homepage/contributor-spotlight/index.scss
@@ -13,6 +13,7 @@
     border: 0;
     display: flex;
     font-style: italic;
+    font-variation-settings: "slnt" -10;
     margin: 0;
     padding: 0;
 

diff --git a/client/src/minimal-prism.scss b/client/src/minimal-prism.scss
@@ -72,6 +72,7 @@ don't use any of that, we can safely ignore it.
 
 .token.italic {
   font-style: italic;
+  font-variation-settings: "slnt" -10;
 }
 
 .token.entity {

diff --git a/client/src/plus/ai-help/landing.scss b/client/src/plus/ai-help/landing.scss
@@ -42,6 +42,7 @@
       em {
         color: var(--category-color);
         font-style: unset;
+        font-variation-settings: unset;
       }
     }
 
@@ -140,6 +141,7 @@
 
         em {
           font-style: unset;
+          font-variation-settings: unset;
           font-weight: 600;
         }
       }

diff --git a/client/src/plus/collections/collection.scss b/client/src/plus/collections/collection.scss
@@ -69,6 +69,7 @@
     .breadcrumbs {
       font-size: 0.6875rem;
       font-style: italic;
+      font-variation-settings: "slnt" -10;
       margin-top: -0.5rem;
     }
 
@@ -98,6 +99,7 @@
       font-size: 0.875rem;
 
       font-style: italic;
+      font-variation-settings: "slnt" -10;
       gap: 1rem;
       padding: 1rem;
 
@@ -118,6 +120,7 @@
         &.code {
           font-family: var(--font-code);
           font-style: normal;
+          font-variation-settings: normal;
         }
       }
     }

diff --git a/client/src/plus/common/login-banner.scss b/client/src/plus/common/login-banner.scss
@@ -12,6 +12,7 @@
   .plus-link {
     color: var(--text-primary);
     font-style: normal;
+    font-variation-settings: normal;
     text-decoration: underline;
     text-decoration-thickness: 0.15rem;
     text-underline-offset: 0.1em;

diff --git a/client/src/plus/icon-card/index.scss b/client/src/plus/icon-card/index.scss
@@ -43,6 +43,7 @@
     display: flex;
     font-size: 0.75rem;
     font-style: italic;
+    font-variation-settings: "slnt" -10;
     height: 3rem;
     justify-content: center;
     padding: 0.5rem;

diff --git a/client/src/plus/offer-overview/offer-overview-subscribe/index.scss b/client/src/plus/offer-overview/offer-overview-subscribe/index.scss
@@ -16,6 +16,7 @@
       color: var(--text-primary);
       font-size: 24px;
       font-style: normal;
+      font-variation-settings: normal;
       font-weight: 650;
       line-height: 120%;
       margin-bottom: 2rem;
@@ -103,6 +104,7 @@
             .sub-price {
               font-size: 36px;
               font-style: normal;
+              font-variation-settings: normal;
               font-weight: 650;
               grid-column: 1/2;
               justify-self: right;
@@ -117,6 +119,7 @@
             .sub-length {
               font-size: 0.8rem;
               font-style: normal;
+              font-variation-settings: normal;
               grid-column: 2/3;
               justify-self: left;
               line-height: 120%;
@@ -178,6 +181,7 @@
             color: var(--text-invert);
             font-size: 14px;
             font-style: italic;
+            font-variation-settings: "slnt" -10;
             margin-top: auto;
             text-decoration: underline;
 

diff --git a/client/src/plus/plus-docs/index.scss b/client/src/plus/plus-docs/index.scss
@@ -8,6 +8,7 @@
   .main-page-content {
     em {
       font-style: normal;
+      font-variation-settings: normal;
       text-decoration: underline;
       text-decoration-color: var(--text-link);
       text-decoration-thickness: 0.15rem;
@@ -40,6 +41,7 @@
 
       p {
         font-style: italic;
+        font-variation-settings: "slnt" -10;
       }
     }
 

diff --git a/client/src/site-search/index.scss b/client/src/site-search/index.scss
@@ -2,6 +2,7 @@
 
 .query-string {
   font-style: italic;
+  font-variation-settings: "slnt" -10;
 }
 
 .site-search {

diff --git a/client/src/site-search/search-results.scss b/client/src/site-search/search-results.scss
@@ -11,6 +11,7 @@
 
   .highlight {
     font-style: italic;
+    font-variation-settings: "slnt" -10;
   }
 
   .nerd-data {
@@ -83,6 +84,7 @@
     border-radius: var(--elem-radius);
     color: var(--text-primary);
     font-style: italic;
+    font-variation-settings: "slnt" -10;
   }
 }
 

diff --git a/client/src/ui/base/_prism.scss b/client/src/ui/base/_prism.scss
@@ -53,6 +53,7 @@
 
 .token.italic {
   font-style: italic;
+  font-variation-settings: "slnt" -10;
 }
 
 .token.entity {

diff --git a/client/src/ui/base/_reset.scss b/client/src/ui/base/_reset.scss
@@ -62,6 +62,11 @@ picture {
   max-width: 100%;
 }
 
+/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */
+em {
+  font-variation-settings: "slnt" -10;
+}
+
 /* Inherit fonts for inputs and buttons */
 input,
 button,

diff --git a/client/src/ui/molecules/quote/index.scss b/client/src/ui/molecules/quote/index.scss
@@ -14,6 +14,7 @@ blockquote.quote {
   p {
     display: flex;
     font-style: italic;
+    font-variation-settings: "slnt" -10;
 
     .icon {
       margin-right: 1rem;

diff --git a/client/src/ui/molecules/search/index.scss b/client/src/ui/molecules/search/index.scss
@@ -140,6 +140,7 @@
 
     .nothing-found {
       font-style: italic;
+      font-variation-settings: "slnt" -10;
     }
 
     .result-item {