fix(i18n): use Lato and NotoSansJP fonts for Japanese (#1032)

freeCodeCamp · Oct 18, 2024 · b8b22f9 · b8b22f9
1 parent 9b72d0c
commit b8b22f9
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/_includes/assets/css/global.css b/src/_includes/assets/css/global.css
@@ -16,6 +16,13 @@
   --gray00: #fff;
   --header-height: 38px;
   --blue-dark: #002ead;
+  /* Font */
+  --font-family-sans-serif: 'Lato', sans-serif;
+}
+
+/* Japanese Font */
+:root:lang(ja) {
+  --font-family-sans-serif: 'Lato', 'Noto Sans JP', sans-serif;
 }
 
 /* Fonts
@@ -136,7 +143,7 @@ img {
 }
 html {
   box-sizing: border-box;
-  font-family: 'Lato', sans-serif;
+  font-family: var(--font-family-sans-serif);
 
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
@@ -288,7 +295,7 @@ html {
 body {
   overflow-x: hidden;
   color: var(--gray90);
-  font-family: 'Lato', sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-size: 1.5rem;
   line-height: 1.6em;
   font-weight: 400;

diff --git a/src/_includes/assets/css/screen.css b/src/_includes/assets/css/screen.css
@@ -105,7 +105,7 @@ body {
   color: #fff;
   width: 100%;
   background: var(--theme-color);
-  font-family: 'Lato', sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-display: swap;
 }
 
@@ -176,7 +176,7 @@ body {
   align-items: flex-start;
   /* overflow-y: auto; */
   font-size: 1.2em;
-  font-family: Lato, sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-display: swap;
   height: var(--header-height);
   background: var(--theme-color);
@@ -498,7 +498,7 @@ a.nav-forum {
 }
 
 .post-card-excerpt {
-  font-family: 'Lato', sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-display: swap;
 }
 
@@ -798,18 +798,13 @@ make sure this only happens on large viewports / desktop-ish devices.
   margin: 0 auto;
   padding: 70px 150px 0;
   min-height: 230px;
-  font-family: 'Lato', sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-display: swap;
   font-size: 2.2rem;
   line-height: 1.6em;
   background: #fff;
 }
 
-/* Japanese font */
-.post-full-content:lang(ja) {
-  font-family: 'Lato', 'Noto Sans JP', sans-serif;
-}
-
 @media (max-width: 500px) {
   .post-full-content {
     padding: 0;
@@ -1869,7 +1864,7 @@ p:has(mjx-container.MathJax) {
   justify-content: center;
   align-items: center;
   margin: 0 0 10px;
-  font-family: 'Lato', sans-serif;
+  font-family: var(--font-family-sans-serif);
   font-display: swap;
   font-style: italic;
 }

diff --git a/src/_includes/layouts/default.njk b/src/_includes/layouts/default.njk
@@ -14,10 +14,9 @@
 
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Roboto+Mono:wght@400;700&display=swap">
         {% if site.lang === 'ja' %}
             <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&family=Roboto+Mono:wght@400;700&display=swap">
-        {% else %}
-            <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Roboto+Mono:wght@400;700&display=swap">
         {% endif %}
 
         {# Load Prism styles and scripts only for posts / pages #}