Add support for localized font families (#677)

Resolves: rdar://108129110

Author: marinaaisa

src/styles/base/_typography.scss

@@ -18,7 +18,14 @@ html {
   @include inTargetWeb {
     font: var(--typography-html-font, $body-font-size $font-content);
   }
+  /// The quotes CSS property sets how the browser should render quotation marks
+  /// added through a CSS content field or the HTML q element
   quotes: "“" "”";
+  @each $lang, $quotes in $localizedQuotes {
+    &:lang(#{$lang}) {
+      quotes: $quotes;
+    }
+  }
 }
 
 body {

src/styles/core/_vars.scss

@@ -81,3 +81,11 @@ $on-this-page-aside-width: 192px;
 
 // Suggest Lang
 $suggest-lang-height: 52px;
+
+// Localized Quotes
+$localizedQuotes: (
+  ja-JP: "「" "」",
+) !default;
+
+// Localized Fonts
+$localizedFonts: () !default;

src/styles/core/typography/_font-style-utils.scss

@@ -60,6 +60,16 @@ $font-weight-bold: 700 !default;
   } @else {
     @warn 'The font style `#{$font-style-name}` is not defined.';
   }
+  //
+  // Add support for localized font families
+  //
+  @if ($localizedFonts) {
+    @each $lang, $fonts in $localizedFonts {
+      :lang(#{$lang}) & {
+        font-family: $fonts;
+      }
+    }
+  }
 }
 
 //