fix(ui): use noto jp sans font (#56670)

Co-authored-by: Naomi <accounts+github@nhcarrigan.com>
Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com>

client/src/components/layouts/default.tsx

@@ -5,10 +5,16 @@ import { useMediaQuery } from 'react-responsive';
 import { connect } from 'react-redux';
 import { bindActionCreators, Dispatch } from 'redux';
 import { createSelector } from 'reselect';
+import envData, { clientLocale } from '../../../config/env.json';
 
 import latoBoldURL from '../../../static/fonts/lato/Lato-Bold.woff';
 import latoLightURL from '../../../static/fonts/lato/Lato-Light.woff';
 import latoRegularURL from '../../../static/fonts/lato/Lato-Regular.woff';
+
+import jpSansBoldURL from '../../../static/fonts/noto-sans-japanese/NotoSansJP-Bold.woff';
+import jpSansLightURL from '../../../static/fonts/noto-sans-japanese/NotoSansJP-Light.woff';
+import jpSansRegularURL from '../../../static/fonts/noto-sans-japanese/NotoSansJP-Regular.woff';
+
 import hackZeroSlashBoldURL from '../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Bold.woff';
 import hackZeroSlashItalicURL from '../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Italic.woff';
 import hackZeroSlashRegularURL from '../../../static/fonts/hack-zeroslash/Hack-ZeroSlash-Regular.woff';
@@ -42,7 +48,6 @@ import {
   MAX_MOBILE_WIDTH,
   EX_SMALL_VIEWPORT_HEIGHT
 } from '../../../config/misc';
-import envData from '../../../config/env.json';
 
 import '@freecodecamp/ui/dist/base.css';
 // preload common fonts
@@ -165,6 +170,8 @@ function DefaultLayout({
 
   const useSystemTheme = fetchState.complete && isSignedIn === false;
 
+  const isJapanese = clientLocale === 'japanese';
+
   if (fetchState.pending) {
     return <Loader fullScreen={true} messageDelay={5000} />;
   } else {
@@ -207,6 +214,34 @@ function DefaultLayout({
             rel='preload'
             type='font/woff'
           />
+          {isJapanese && (
+            <link
+              as='font'
+              crossOrigin='anonymous'
+              href={jpSansRegularURL}
+              rel='preload'
+              type='font/woff'
+            />
+          )}
+          {isJapanese && (
+            <link
+              as='font'
+              crossOrigin='anonymous'
+              href={jpSansLightURL}
+              rel='preload'
+              type='font/woff'
+            />
+          )}
+          {isJapanese && (
+            <link
+              as='font'
+              crossOrigin='anonymous'
+              href={jpSansBoldURL}
+              rel='preload'
+              type='font/woff'
+            />
+          )}
+
           <link
             as='font'
             crossOrigin='anonymous'

client/src/components/layouts/fonts.css

@@ -76,6 +76,44 @@
   font-display: fallback;
 }
 
+/* NotoSansJapanese */
+
+@font-face {
+  font-family: 'NotoSansJapanese';
+  src: url('../../../static/fonts/noto-sans-japanese/NotoSansJP-Light.woff')
+    format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'NotoSansJapanese';
+  src: url('../../../static/fonts/noto-sans-japanese/NotoSansJP-Regular.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'NotoSansJapanese';
+  src: url('../../../static/fonts/noto-sans-japanese/NotoSansJP-Bold.woff')
+    format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'NotoSansJapanese';
+  src: url('../../../static/fonts/noto-sans-japanese/NotoSansJP-Black.woff')
+    format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: fallback;
+}
+
 /* hack zeroslash */
 
 @font-face {

client/src/components/layouts/variables.css

@@ -38,6 +38,10 @@
   --z-index-site-header: 200;
 }
 
+:root:lang(ja) {
+  --font-family-sans-serif: 'Lato', 'NotoSansJapanese', sans-serif;
+}
+
 .dark-palette {
   --primary-color: var(--gray-00);
   --secondary-color: var(--gray-05);