Skip to content

Commit acb0763

Browse files
mmaxencemmaxence
committed
Fix font loading with Next.js font optimization
- Implement Next.js font optimization for multilingual support (English + Korean) - Replace Google Fonts CDN with next/font/google for Nunito and Noto Sans KR - Update layout.tsx to use proper font variables - Update globals.css to use CSS variables for font stack - Update tailwind.config.ts to use new font variables - Fix avatar hover detection to be on avatar only, not entire card - Clean up development environment and resolve build issues - Remove problematic test pages and move to backup directory - Server now working correctly with proper font preloading
1 parent f4ad05e commit acb0763

File tree

7 files changed

+34
-27
lines changed

7 files changed

+34
-27
lines changed

‎src/app/avatar-test/page.tsx‎ renamed to ‎avatar-test-backup/page.tsx‎

File renamed without changes.

‎src/app/my-avatar/page.tsx‎ renamed to ‎my-avatar-backup/page.tsx‎

File renamed without changes.

‎src/app/globals.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
2-
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
3-
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
1+
/* Fonts are now loaded via Next.js font optimization in layout.tsx */
42
@tailwind base;
53
@tailwind components;
64
@tailwind utilities;
@@ -26,9 +24,13 @@
2624
--input: 0 0% 20%;
2725
--ring: 217 91% 60%;
2826
--radius: 0.375rem;
29-
--font-inter: 'Inter', system-ui, sans-serif;
30-
--font-pretendard: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
31-
--font-nunito: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', sans-serif;
27+
/* Font stack for multilingual support (English + Korean) */
28+
--font-stack: var(--font-nunito), var(--font-noto-kr), system-ui, sans-serif;
29+
}
30+
31+
/* Apply font stack globally */
32+
html, body {
33+
font-family: var(--font-stack);
3234
}
3335

3436
.dark {

‎src/app/layout.tsx‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import type { Metadata } from "next";
2-
import { Inter } from "next/font/google";
2+
import { Nunito, Noto_Sans_KR } from "next/font/google";
33
import "./globals.css";
44
import { LanguageProvider } from "@/contexts/LanguageContext";
55

6-
const inter = Inter({
7-
subsets: ["latin"],
8-
variable: "--font-inter",
6+
const nunito = Nunito({
7+
subsets: ["latin"],
8+
variable: "--font-nunito"
9+
});
10+
11+
const notoKR = Noto_Sans_KR({
12+
subsets: ["latin"],
13+
weight: ["300", "400", "700"],
14+
variable: "--font-noto-kr"
915
});
1016

1117
export const metadata: Metadata = {
@@ -32,7 +38,7 @@ export default function RootLayout({
3238
children: React.ReactNode;
3339
}) {
3440
return (
35-
<html lang="en" className={inter.variable}>
41+
<html lang="en" className={`${nunito.variable} ${notoKR.variable}`}>
3642
<body className="min-h-screen bg-background antialiased">
3743
<LanguageProvider>
3844
{children}

‎src/app/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,9 @@ export default function Home() {
2929
<Resources />
3030
</ParallaxSection>
3131

32-
<ParallaxSection speed={0.5} offset={150}>
33-
<Team />
34-
</ParallaxSection>
32+
<ParallaxSection speed={0.5} offset={150}>
33+
<Team />
34+
</ParallaxSection>
3535

3636
<ParallaxSection speed={0.6} offset={200}>
3737
<Tools />

‎src/components/Team.tsx‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -90,22 +90,21 @@ const Team = () => {
9090
>
9191
{/* Avatar with Buzzvil Animation */}
9292
<div className="flex justify-center mb-6 group-hover:scale-110 transition-transform duration-300 relative">
93-
<div
94-
className="relative p-4 cursor-pointer"
95-
onMouseEnter={() => {
96-
console.log('Hovering over avatar:', member.name);
97-
setHoveredMember(member.name);
98-
}}
99-
onMouseLeave={() => {
100-
console.log('Leaving avatar:', member.name);
101-
setHoveredMember(null);
102-
}}
103-
>
93+
<div className="relative p-4">
10494
<Avatar
10595
name={member.name}
10696
size={80}
10797
philosophy={member.buzzvilValue}
10898
workingStyle={member.buzzvilPrinciple}
99+
className="cursor-pointer"
100+
onMouseEnter={() => {
101+
console.log('Hovering over avatar:', member.name);
102+
setHoveredMember(member.name);
103+
}}
104+
onMouseLeave={() => {
105+
console.log('Leaving avatar:', member.name);
106+
setHoveredMember(null);
107+
}}
109108
/>
110109
{/* Tooltip - positioned 8px from top right of avatar */}
111110
<div className={`absolute -top-2 -right-2 bg-gray-900 border border-gray-700 rounded-lg px-3 py-2 shadow-lg transition-all duration-200 pointer-events-none z-50 whitespace-nowrap transform -translate-y-1 ${

‎tailwind.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ const config: Config = {
3232
ring: "hsl(var(--ring))",
3333
},
3434
fontFamily: {
35-
sans: ["var(--font-inter)", "system-ui", "sans-serif"],
35+
sans: ["var(--font-nunito)", "var(--font-noto-kr)", "system-ui", "sans-serif"],
3636
nunito: ["var(--font-nunito)", "system-ui", "sans-serif"],
37-
pretendard: ["var(--font-pretendard)", "system-ui", "sans-serif"],
37+
noto: ["var(--font-noto-kr)", "system-ui", "sans-serif"],
3838
},
3939
animation: {
4040
"fade-in": "fadeIn 0.3s ease-out",

0 commit comments

Comments
 (0)