fix: improve Japanese typography (lang attribute and font fallback) (#706)

GunseiKPaseri · web-flow · commit fe92b7899c9b · 2026-01-23T10:33:12.000+01:00
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
@@ -50,22 +50,65 @@
 }
 @font-face {
     font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
-    font-family: 'Noto Sans';
+    font-family: 'Noto Sans SC';
     font-style: normal;
     font-weight: 400;
     src: url('../fonts/noto-sans-sc-chinese-simplified-400-normal.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
 }
 
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Noto Serif JP';
+    font-style: normal;
+    font-weight: 200;
+    src: url('../fonts/noto-serif-jp-japanese-200-normal.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Noto Serif JP';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/noto-serif-jp-japanese-400-normal.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Noto Serif JP';
+    font-style: normal;
+    font-weight: 900;
+    src: url('../fonts/noto-serif-jp-japanese-900-normal.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
+@font-face {
+    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
+    font-family: 'Noto Sans JP';
+    font-style: normal;
+    font-weight: 400;
+    src: url('../fonts/noto-sans-jp-japanese-400-normal.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
+}
+
 :root {
     --color-highlight: #F5DEB3FF;
     --color-background-dark: #3b3b3b;
     --color-background-dark-light: #5c5c5c;
     --color-text-white: #e3e3e3;
     --color-text-gray: #c0c0c0;
-    --serif-font: "Fraunces", 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;;
+    --serif-font: "Fraunces", 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
     --memories-header-height: 550px;
     --box-shadow: 0 8px 25px rgba(245, 222, 179, 0.2);
-    --sans-serif-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC",  'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+    --sans-serif-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+}
+
+/* CJK Language-specific font stacks */
+:root:lang(ja) {
+    --serif-font: "Fraunces", 'Noto Serif JP', 'Hiragino Mincho ProN', 'YuMincho', serif;
+    --sans-serif-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'YuGothic', 'Meiryo', sans-serif;
+}
+
+:root:lang(zh-CN) {
+    --serif-font: "Fraunces", 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
+    --sans-serif-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
 }
 
 body {
diff --git a/src/main/resources/static/fonts/noto-sans-jp-japanese-400-normal.woff2 b/src/main/resources/static/fonts/noto-sans-jp-japanese-400-normal.woff2
diff --git a/src/main/resources/static/fonts/noto-serif-jp-japanese-200-normal.woff2 b/src/main/resources/static/fonts/noto-serif-jp-japanese-200-normal.woff2
diff --git a/src/main/resources/static/fonts/noto-serif-jp-japanese-400-normal.woff2 b/src/main/resources/static/fonts/noto-serif-jp-japanese-400-normal.woff2
diff --git a/src/main/resources/static/fonts/noto-serif-jp-japanese-900-normal.woff2 b/src/main/resources/static/fonts/noto-serif-jp-japanese-900-normal.woff2
diff --git a/src/main/resources/templates/error.html b/src/main/resources/templates/error.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/error/magic-link-error.html b/src/main/resources/templates/error/magic-link-error.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/fragments/main-navigation.html b/src/main/resources/templates/fragments/main-navigation.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <body>
 <div th:fragment="main-navigation(activeSection)" class="navigation-container">
     <div class="navbar">
diff --git a/src/main/resources/templates/fragments/places.html b/src/main/resources/templates/fragments/places.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <body>
 
 <div th:fragment="geocoding-response-content">
diff --git a/src/main/resources/templates/fragments/settings-navigation.html b/src/main/resources/templates/fragments/settings-navigation.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <body>
     <div th:fragment="settings-nav(activeSection, dataManagementEnabled, isAdmin)" class="settings-nav">
         <a th:href="@{/settings/job-status}"
diff --git a/src/main/resources/templates/fragments/shared-instances.html b/src/main/resources/templates/fragments/shared-instances.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <body>
 <div th:fragment="shared-instances-content">
     <p th:text="#{integrations.shared.instances.description}" style="margin-bottom: 20px; color: var(--color-text-white);">Connect to other Reitti instances to share location data with friends, family, or colleagues. This allows you to view their location data alongside yours on the timeline map.</p>
diff --git a/src/main/resources/templates/fragments/statistics.html b/src/main/resources/templates/fragments/statistics.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <body>
 
 <div class="years-navigation" th:fragment="years-navigation">
diff --git a/src/main/resources/templates/fragments/timeline.html b/src/main/resources/templates/fragments/timeline.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
 </head>
diff --git a/src/main/resources/templates/fragments/trip-edit.html b/src/main/resources/templates/fragments/trip-edit.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
 </head>
diff --git a/src/main/resources/templates/fragments/user-management.html b/src/main/resources/templates/fragments/user-management.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <body>
 
 
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/memories/blocks/edit.html b/src/main/resources/templates/memories/blocks/edit.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/memories/edit.html b/src/main/resources/templates/memories/edit.html
@@ -1,4 +1,4 @@
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/memories/fragments.html b/src/main/resources/templates/memories/fragments.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
 </head>
diff --git a/src/main/resources/templates/memories/list.html b/src/main/resources/templates/memories/list.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/memories/new.html b/src/main/resources/templates/memories/new.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/memories/view.html b/src/main/resources/templates/memories/view.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/about.html b/src/main/resources/templates/settings/about.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/api-tokens.html b/src/main/resources/templates/settings/api-tokens.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/edit-place.html b/src/main/resources/templates/settings/edit-place.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/export-data.html b/src/main/resources/templates/settings/export-data.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/fragments/integrations.html b/src/main/resources/templates/settings/fragments/integrations.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <body>
 <!-- Integrations Content Fragment -->
 <div th:fragment="integrations-content">
diff --git a/src/main/resources/templates/settings/geocode-services.html b/src/main/resources/templates/settings/geocode-services.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/import-data.html b/src/main/resources/templates/settings/import-data.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/integrations.html b/src/main/resources/templates/settings/integrations.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/job-status.html b/src/main/resources/templates/settings/job-status.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/logging.html b/src/main/resources/templates/settings/logging.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/manage-data.html b/src/main/resources/templates/settings/manage-data.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/places.html b/src/main/resources/templates/settings/places.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/share-access.html b/src/main/resources/templates/settings/share-access.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/transportation-modes.html b/src/main/resources/templates/settings/transportation-modes.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/user-management.html b/src/main/resources/templates/settings/user-management.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/settings/visit-sensitivity.html b/src/main/resources/templates/settings/visit-sensitivity.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/setup.html b/src/main/resources/templates/setup.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org">
+<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
diff --git a/src/main/resources/templates/statistics.html b/src/main/resources/templates/statistics.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<html xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml" th:lang="${#locale.toLanguageTag()}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
