Skip to content

Commit 52a0409

Browse files
jcmartinezdevclaude
jcmartinezdev
and
claude
committed
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 <noreply@anthropic.com>
1 parent 36b58a5 commit 52a0409

8 files changed

Lines changed: 39 additions & 25 deletions

File tree

src/libs/theme/fonts/NotoSansJP-Bold.otf renamed to public/fonts/NotoSansJP-Bold.otf

File renamed without changes.

src/libs/theme/fonts/NotoSansJP-Medium.otf renamed to public/fonts/NotoSansJP-Medium.otf

File renamed without changes.

src/libs/theme/fonts/NotoSansJP-Regular.otf renamed to public/fonts/NotoSansJP-Regular.otf

File renamed without changes.

‎public/fonts/japanese-fonts.css‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@font-face {
2+
font-family: "Noto Sans JP";
3+
src: url("/fonts/NotoSansJP-Regular.otf") format("opentype");
4+
font-weight: 400;
5+
font-style: normal;
6+
font-display: swap;
7+
}
8+
9+
@font-face {
10+
font-family: "Noto Sans JP";
11+
src: url("/fonts/NotoSansJP-Medium.otf") format("opentype");
12+
font-weight: 500;
13+
font-style: normal;
14+
font-display: swap;
15+
}
16+
17+
@font-face {
18+
font-family: "Noto Sans JP";
19+
src: url("/fonts/NotoSansJP-Bold.otf") format("opentype");
20+
font-weight: 600;
21+
font-style: normal;
22+
font-display: swap;
23+
}
24+
25+
.japanese-font {
26+
font-family: "Noto Sans JP", sans-serif;
27+
}
28+
29+
:root {
30+
--font-japanese: "Noto Sans JP", sans-serif;
31+
}

‎src/features/common/components/layout/page-layout/page-layout.component.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,9 @@ export const PageLayoutComponent: React.FC<LayoutComponentProps> = ({
2121
return (
2222
<html lang={languageCode} data-theme={themeCode}>
2323
<head>
24+
{languageCode === "ja" && (
25+
<link rel="stylesheet" href="/fonts/japanese-fonts.css" />
26+
)}
2427
<script
2528
dangerouslySetInnerHTML={{
2629
__html: `

‎src/features/common/components/shell/shell.component.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { UiLocalizationService } from "@/features/localization/services/ui-local
1818
import { clsx } from "clsx";
1919
import {
2020
getLocalizedPrimaryFont,
21-
JapaneseFont,
2221
MonoFont,
2322
PrimaryFont,
2423
SecondaryFont,
@@ -98,7 +97,6 @@ export const ShellComponent: React.FC<ShellComponentProps> = ({
9897
styles.container,
9998
PrimaryFont.variable,
10099
SecondaryFont.variable,
101-
JapaneseFont.variable,
102100
MonoFont.variable,
103101
)}
104102
data-theme={themeCode}

‎src/libs/theme/fonts.tsx‎

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -36,29 +36,11 @@ export const MonoFont = Roboto_Mono({
3636
variable: "--font-mono",
3737
});
3838

39-
export const JapaneseFont = localFont({
40-
src: [
41-
{
42-
path: "./fonts/NotoSansJP-Regular.otf",
43-
weight: "400",
44-
style: "normal",
45-
},
46-
{
47-
path: "./fonts/NotoSansJP-Medium.otf",
48-
weight: "500",
49-
style: "normal",
50-
},
51-
{
52-
path: "./fonts/NotoSansJP-Bold.otf",
53-
weight: "600",
54-
style: "normal",
55-
},
56-
],
57-
variable: "--font-japanese",
58-
});
39+
// Japanese fonts are loaded via CSS in public/fonts/japanese-fonts.css
40+
// to avoid bundling them for non-Japanese users
5941

6042
export const getLocalizedSecondaryFont = (language: string) =>
61-
language === "ja" ? JapaneseFont.className : SecondaryFont.className;
43+
language === "ja" ? "japanese-font" : SecondaryFont.className;
6244

6345
export const getLocalizedPrimaryFont = (language: string) =>
64-
language === "ja" ? JapaneseFont.className : PrimaryFont.className;
46+
language === "ja" ? "japanese-font" : PrimaryFont.className;

‎src/middleware.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ export function middleware(request: NextRequest) {
159159

160160
export const config = {
161161
matcher: [
162-
"/((?!api/|favicon.ico|sitemap.xml|robots.txt|google30e29a6679a06e08.html|manifest.webmanifest|_next/static|_next/image|diagrams/|icons/|images/|img/|apple-icon/|icon/).*)",
162+
"/((?!api/|favicon.ico|sitemap.xml|robots.txt|google30e29a6679a06e08.html|manifest.webmanifest|_next/static|_next/image|diagrams/|icons/|images/|img/|apple-icon/|icon/|fonts/).*)",
163163
"/",
164164
],
165165
};

0 commit comments

Comments
 (0)