Fix fallback fonts for ar, he, ja, zh-Hans, zh-Hant, and ko, closes #232

adobe · Aug 19, 2019 · 7bd714a · 7bd714a
1 parent aa5dce6
commit 7bd714a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 11 deletions.
diff --git a/components/commons/fonts.css b/components/commons/fonts.css
@@ -11,7 +11,7 @@ governing permissions and limitations under the License.
 */
 
 :root {
-  --spectrum-font-fallbacks-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --spectrum-font-fallbacks-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 
   /* Not used
   --spectrum-font-fallbacks-serif: serif;
@@ -27,15 +27,15 @@ governing permissions and limitations under the License.
   --spectrum-font-family-condensed: adobe-clean-condensed, var(--spectrum-font-family-base);
   */
 
-  --spectrum-font-family-base: adobe-clean-ux, adobe-clean, "Source Sans Pro", var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-han: adobe-clean-han-japanese, var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-ar: myriad-arabic, var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-he: var(--spectrum-font-fallbacks-sans);
-  --spectrum-font-family-zh: var(--spectrum-font-family-han);
-  --spectrum-font-family-zhhans: var(--spectrum-font-family-han);
-  --spectrum-font-family-ko: var(--spectrum-font-family-han);
-  --spectrum-font-family-ja: var(--spectrum-font-family-han);
-
+  --spectrum-font-family-base: 'adobe-clean-ux', 'adobe-clean', 'Source Sans Pro', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-han: 'adobe-clean-han-japanese', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-ar: 'adobe-arabic', 'myriad-arabic', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-he: 'adobe-hebrew', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-zhhans: 'adobe-clean-han-simplified-c', 'SimSun', 'Heiti SC Light', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-zh: var(--spectrum-font-family-zhhans);
+  --spectrum-font-family-zhhant: 'adobe-clean-han-traditional', 'MingLiu', 'Heiti TC Light', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-ko: 'adobe-clean-han-korean', 'Malgun Gothic', 'Apple Gothic', var(--spectrum-font-fallbacks-sans);
+  --spectrum-font-family-ja: 'adobe-clean-han-japanese', 'Yu Gothic', '\30E1 \30A4 \30EA \30AA', '\30D2 \30E9 \30AE \30CE \89D2 \30B4  Pro W3', 'Hiragino Kaku Gothic Pro W3', 'Osaka', '\FF2D \FF33 \FF30 \30B4 \30B7 \30C3 \30AF', 'MS PGothic', var(--spectrum-font-fallbacks-sans);
   --spectrum-text-size: var(--spectrum-alias-font-size-default);
   --spectrum-text-body-line-height: var(--spectrum-alias-line-height-medium);
   --spectrum-text-size-text-label: var(--spectrum-label-text-size);

diff --git a/components/typography/docs/typography-international.yml b/components/typography/docs/typography-international.yml
@@ -70,7 +70,7 @@ components:
 
       <div class="spectrum" lang="ja">
         <p class="spectrum-Heading1">見出し1 <em>見出し1 重点</em> <strong>見出し1 強い強調</strong>.</p>
-        <p class="spectrum-Heading2">見出し2 <em>見出し2  重点</em> <strong>見出し2 強い強調</strong>.</p>
+        <p class="spectrum-Heading2">見出し2 <em>見出し2 重点</em> <strong>見出し2 強い強調</strong>.</p>
         <p class="spectrum-Heading3">見出し3 <em>見出し3 重点</em> <strong>見出し3 強い強調</strong>.</p>
         <p class="spectrum-Heading4">見出し4 <em>見出し4 重点</em> <strong>見出し4 強い強調</strong>.</p>
         <p class="spectrum-Heading5">見出し5 <em>見出し5 重点</em> <strong>見出し5 強い強調</strong>.</p>
@@ -84,6 +84,14 @@ components:
         <p class="spectrum-Heading5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
       </div>
 
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading3">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading4">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading5">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+
   heading-strong:
     id: heading-1
     name: Heading (Strong)
@@ -110,6 +118,11 @@ components:
         <p class="spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
       </div>
 
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+
   heading-quiet:
     id: heading-1
     name: Heading (Quiet)
@@ -136,6 +149,11 @@ components:
         <p class="spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
       </div>
 
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+
   display-1:
     id: heading-1
     name: Display
@@ -162,6 +180,11 @@ components:
         <p class="spectrum-Heading2--display">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
       </div>
 
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--display">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+
   display-strong:
     id: heading-1
     name: Display (Strong)
@@ -183,6 +206,12 @@ components:
         <p class="spectrum-Heading2--display spectrum-Heading2--strong">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
       </div>
 
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--display spectrum-Heading1--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--strong">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+
+
   display-quiet:
     id: heading-1
     name: Display (Quiet)
@@ -209,6 +238,11 @@ components:
         <p class="spectrum-Heading2--display spectrum-Heading2--quiet">القسم <em>القسم 1  تشديد</em> <strong>القسم 2 تأكيد قو</strong>.</p>
       </div>
 
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Heading1--display spectrum-Heading1--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+        <p class="spectrum-Heading2--display spectrum-Heading2--quiet">דגש כותרת <em>מאמר</em> <strong>חזק</strong>.</p>
+      </div>
+
   body-1:
     id: heading-1
     name: Body
@@ -247,6 +281,14 @@ components:
         <p class="spectrum-Body5">القسم 5 <em>القسم 5 تشديد</em> <strong>القسم 5 تأكيد قو</strong>.</p>
       </div>
 
+      <div class="spectrum" lang="he">
+        <p class="spectrum-Body1">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body2">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body3">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body4">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+        <p class="spectrum-Body5">טקסט גוף הדגשות <em>גוף חזק</em> <strong>גוף חזק</strong>.</p>
+      </div>
+
   body-han-1:
     id: heading-1
     name: Han

diff --git a/components/typography/font.css b/components/typography/font.css
@@ -26,6 +26,10 @@ governing permissions and limitations under the License.
     font-family: var(--spectrum-font-family-zhhans);
   }
 
+  &:lang(zh-Hant) {
+    font-family: var(--spectrum-font-family-zhhant);
+  }
+
   &:lang(zh) {
     font-family: var(--spectrum-font-family-zh);
   }