Changeset 44650 for trunk/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss

Timestamp:

01/18/2019 06:37:26 PM (6 years ago)

Author:

laurelfulford

Message:

Twenty Nineteen: Use a less aggressive approach for non-latin font fallbacks.

The theme's original approach to its non-latin font fallbacks required !important, which overrode fonts that shouldn't have been changed, like the icon fonts used for editor buttons.

Props kjellr, mako09, allancole.
Fixes #45731.

File:

• trunk/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss (modified) (2 diffs)

trunk/src/wp-content/themes/twentynineteen/sass/mixins/_mixins-master.scss

@@ -88 +88 @@
 }
 
-/* Fallback for non-latin fonts */
-
-@mixin non-latin-fonts( $wrapper_classname: '.site' ) {
-
-    /* Arabic */
-    html[lang="ar"] #{$wrapper_classname} *,
-    html[lang="ary"] #{$wrapper_classname} *,
-    html[lang="azb"] #{$wrapper_classname} *,
-    html[lang="ckb"] #{$wrapper_classname} *,
-    html[lang="fa-IR"] #{$wrapper_classname} *,
-    html[lang="haz"] #{$wrapper_classname} *,
-    html[lang="ps"] #{$wrapper_classname} * {
-      font-family: Tahoma, Arial, sans-serif !important;
-    }
-
-    /* Cyrillic */
-    html[lang="be"] #{$wrapper_classname} *,
-    html[lang="bg-BG"] #{$wrapper_classname} *,
-    html[lang="kk"] #{$wrapper_classname} *,
-    html[lang="mk-MK"] #{$wrapper_classname} *,
-    html[lang="mn"] #{$wrapper_classname} *,
-    html[lang="ru-RU"] #{$wrapper_classname} *,
-    html[lang="sah"] #{$wrapper_classname} *,
-    html[lang="sr-RS"] #{$wrapper_classname} *,
-    html[lang="tt-RU"] #{$wrapper_classname} *,
-    html[lang="uk"] #{$wrapper_classname} * {
-      font-family: 'Helvetica Neue', Helvetica, 'Segoe UI', Arial, sans-serif !important;
-    }
-
-    /* Chinese (Hong Kong) */
-    html[lang="zh-HK"] #{$wrapper_classname} * {
-        font-family: -apple-system, BlinkMacSystemFont, 'PingFang HK', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
-    }
-
-    /* Chinese (Taiwan) */
-    html[lang="zh-TW"] #{$wrapper_classname} * {
-        font-family: -apple-system, BlinkMacSystemFont, 'PingFang TC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
-    }
-
-    /* Chinese (China) */
-    html[lang="zh-CN"] #{$wrapper_classname} * {
-        font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', "Microsoft YaHei New", STHeiti Light, sans-serif !important;
-    }
-
-    /* Devanagari */
-    html[lang="bn-BD"] #{$wrapper_classname} *,
-    html[lang="hi-IN"] #{$wrapper_classname} *,
-    html[lang="mr"] #{$wrapper_classname} *,
-    html[lang="ne-NP"] #{$wrapper_classname} * {
-      font-family: Arial, sans-serif !important;
-    }
-
-    /* Greek */
-    html[lang="el"] #{$wrapper_classname} * {
-      font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
-    }
-
-    /* Gujarati */
-    html[lang="gu"] #{$wrapper_classname} * {
-      font-family: Arial, sans-serif !important;
-    }
-
-    /* Hebrew */
-    html[lang="he-IL"] #{$wrapper_classname} * {
-      font-family: 'Arial Hebrew', Arial, sans-serif !important;
-    }
-
-    /* Japanese */
-    html[lang="ja"] #{$wrapper_classname} * {
-      font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", Meiryo, "Helvetica Neue", sans-serif !important;
-    }
-
-    /* Korean */
-    html[lang="ko-KR"] #{$wrapper_classname} * {
-      font-family: 'Apple SD Gothic Neo', 'Malgun Gothic', 'Nanum Gothic', Dotum, sans-serif !important;
-    }
-
-    /* Thai */
-    html[lang="th"] #{$wrapper_classname} * {
-      font-family: 'Sukhumvit Set', 'Helvetica Neue', helvetica, arial, sans-serif !important;
-    }
-
-    /* Vietnamese */
-    html[lang="vi"] #{$wrapper_classname} * {
-      font-family: 'Libre Franklin', sans-serif !important;
-    }
-}
-
 /* Calculates maximum width for post content */
 @mixin postContentMaxWidth() {
@@ -203 +115 @@
 }
 
+/* Ensure all font family declarations come with non-latin fallbacks */
+@mixin font-family( $font_family: $font__body ) {
+    font-family: $font_family;
+    @extend %non-latin-fonts;
+}
+
+/* Build our non-latin font styles */
+%non-latin-fonts {
+    @each $lang, $font__fallback in $font__fallbacks {
+        &:lang(#{$lang}) {
+            font-family: unquote( $font__fallback );
+        }
+    }
+}
+
 @import "utilities";