From 52a04091c8c9c974bffd8a4a05bd0df5717b0c59 Mon Sep 17 00:00:00 2001 From: Juan Cruz Martinez Date: Wed, 22 Apr 2026 19:49:57 +0200 Subject: [PATCH] Lazy-load Japanese fonts only for Japanese users Move Japanese Noto Sans JP fonts (~13MB) out of Next.js bundling to avoid loading them for English users. Fonts are now loaded via CSS @font-face only when languageCode === "ja". - Move NotoSansJP fonts from src/libs/theme/fonts/ to public/fonts/ - Add public/fonts/japanese-fonts.css with @font-face declarations - Remove JapaneseFont from next/font/local in fonts.tsx - Conditionally load CSS stylesheet in page-layout for Japanese - Add fonts/ to middleware matcher exclusions Co-Authored-By: Claude Opus 4.6 --- .../fonts/NotoSansJP-Bold.otf | Bin .../fonts/NotoSansJP-Medium.otf | Bin .../fonts/NotoSansJP-Regular.otf | Bin public/fonts/japanese-fonts.css | 31 ++++++++++++++++++ .../page-layout/page-layout.component.tsx | 3 ++ .../components/shell/shell.component.tsx | 2 -- src/libs/theme/fonts.tsx | 26 +++------------ src/middleware.ts | 2 +- 8 files changed, 39 insertions(+), 25 deletions(-) rename {src/libs/theme => public}/fonts/NotoSansJP-Bold.otf (100%) rename {src/libs/theme => public}/fonts/NotoSansJP-Medium.otf (100%) rename {src/libs/theme => public}/fonts/NotoSansJP-Regular.otf (100%) create mode 100644 public/fonts/japanese-fonts.css diff --git a/src/libs/theme/fonts/NotoSansJP-Bold.otf b/public/fonts/NotoSansJP-Bold.otf similarity index 100% rename from src/libs/theme/fonts/NotoSansJP-Bold.otf rename to public/fonts/NotoSansJP-Bold.otf diff --git a/src/libs/theme/fonts/NotoSansJP-Medium.otf b/public/fonts/NotoSansJP-Medium.otf similarity index 100% rename from src/libs/theme/fonts/NotoSansJP-Medium.otf rename to public/fonts/NotoSansJP-Medium.otf diff --git a/src/libs/theme/fonts/NotoSansJP-Regular.otf b/public/fonts/NotoSansJP-Regular.otf similarity index 100% rename from src/libs/theme/fonts/NotoSansJP-Regular.otf rename to public/fonts/NotoSansJP-Regular.otf diff --git a/public/fonts/japanese-fonts.css b/public/fonts/japanese-fonts.css new file mode 100644 index 00000000..63fe42f4 --- /dev/null +++ b/public/fonts/japanese-fonts.css @@ -0,0 +1,31 @@ +@font-face { + font-family: "Noto Sans JP"; + src: url("/fonts/NotoSansJP-Regular.otf") format("opentype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Noto Sans JP"; + src: url("/fonts/NotoSansJP-Medium.otf") format("opentype"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "Noto Sans JP"; + src: url("/fonts/NotoSansJP-Bold.otf") format("opentype"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +.japanese-font { + font-family: "Noto Sans JP", sans-serif; +} + +:root { + --font-japanese: "Noto Sans JP", sans-serif; +} diff --git a/src/features/common/components/layout/page-layout/page-layout.component.tsx b/src/features/common/components/layout/page-layout/page-layout.component.tsx index bc4d9d7b..e9b0182e 100644 --- a/src/features/common/components/layout/page-layout/page-layout.component.tsx +++ b/src/features/common/components/layout/page-layout/page-layout.component.tsx @@ -21,6 +21,9 @@ export const PageLayoutComponent: React.FC = ({ return ( + {languageCode === "ja" && ( + + )}