diff --git a/client/src/components/layouts/default.tsx b/client/src/components/layouts/default.tsx
index 88754c42c1f..ba06a19ee6b 100644
--- a/client/src/components/layouts/default.tsx
+++ b/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'
diff --git a/client/src/components/layouts/fonts.css b/client/src/components/layouts/fonts.css
index a5bde1824b4..4a9c22687b8 100644
--- a/client/src/components/layouts/fonts.css
+++ b/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 {
diff --git a/client/src/components/layouts/variables.css b/client/src/components/layouts/variables.css
index 34de1535d0b..4e400246807 100644
--- a/client/src/components/layouts/variables.css
+++ b/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);
diff --git a/client/static/fonts/noto-sans-japanese/NotoSansJP-Black.woff b/client/static/fonts/noto-sans-japanese/NotoSansJP-Black.woff
new file mode 100644
index 00000000000..4c7ea1e4c86
Binary files /dev/null and b/client/static/fonts/noto-sans-japanese/NotoSansJP-Black.woff differ
diff --git a/client/static/fonts/noto-sans-japanese/NotoSansJP-Bold.woff b/client/static/fonts/noto-sans-japanese/NotoSansJP-Bold.woff
new file mode 100644
index 00000000000..20f1fe90d5c
Binary files /dev/null and b/client/static/fonts/noto-sans-japanese/NotoSansJP-Bold.woff differ
diff --git a/client/static/fonts/noto-sans-japanese/NotoSansJP-Light.woff b/client/static/fonts/noto-sans-japanese/NotoSansJP-Light.woff
new file mode 100644
index 00000000000..b4822f371cc
Binary files /dev/null and b/client/static/fonts/noto-sans-japanese/NotoSansJP-Light.woff differ
diff --git a/client/static/fonts/noto-sans-japanese/NotoSansJP-Regular.woff b/client/static/fonts/noto-sans-japanese/NotoSansJP-Regular.woff
new file mode 100644
index 00000000000..96cdb66ba9f
Binary files /dev/null and b/client/static/fonts/noto-sans-japanese/NotoSansJP-Regular.woff differ