diff --git a/client/src/about/index.scss b/client/src/about/index.scss index 802f46359872..5b262293963c 100644 --- 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 index 0c33a57132a8..9350b0c34645 100644 --- 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 index 7fdb5556ca31..88bf9620423a 100644 --- 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 index 57c1716cd891..eba698672a50 100644 --- 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 index 95f900957e3c..0f94bbcbf30a 100644 --- 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 index fc8ee24d19f6..0534c1a37b63 100644 --- 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 index 107f5636ff86..183f25c9ca71 100644 --- 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 index 2f974ab849d2..a4dcb2f6c660 100644 --- 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 index cef4df848211..53416b439b77 100644 --- 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 index 498e7f659baf..d7b93dec74bd 100644 --- 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 index 1f628aa2ea7d..3d952803e537 100644 --- 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 index 25310307d78a..f3aabbf73c01 100644 --- 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 index 1b5c851e4d17..c39827600646 100644 --- 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 index 3bbfaa169d8d..b63bde4b63f5 100644 --- 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 index 4e56629469b7..6adb032ff8f6 100644 --- 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 index 0d4c30536c6d..a5c630f6f36b 100644 --- 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 index 1c20b6965807..c6525ad7cc8b 100644 --- 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 index 5f12f60a0ca1..94ea6080a45d 100644 --- 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 {