gahusb/jaengseung-made
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Bagel Fat One 디스플레이 폰트 도입

Browse Source 
- next/font/google로 Bagel_Fat_One (weight 400) 로드
- --font-kx-hero 변수로 주입, .kx-display가 우선 적용
- 한글은 Bagel Fat One(latin-only) → Space Grotesk/CookieRun 자연 폴백
This commit is contained in:
gahusb
2026-04-16 04:07:17 +09:00
parent 835c154c01
commit c7086f3408
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/globals.css
View File

@@ -108,8 +108,8 @@ body {
color: var(--kx-on-variant); color: var(--kx-on-variant);
} }
.kx-display { .kx-display {
font-family: 'Space Grotesk', 'CookieRun', system-ui, sans-serif; font-family: var(--font-kx-hero), 'Bagel Fat One', 'Space Grotesk', 'CookieRun', system-ui, sans-serif;
letter-spacing: -0.02em; letter-spacing: -0.01em;
color: var(--kx-on-surface); color: var(--kx-on-surface);
} }
.kx-label { .kx-label {

5
app/layout.tsx
View File

@@ -1,12 +1,13 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import Script from "next/script"; import Script from "next/script";
import { Space_Grotesk, Inter, Manrope } from "next/font/google"; import { Space_Grotesk, Inter, Manrope, Bagel_Fat_One } from "next/font/google";
import "./globals.css"; import "./globals.css";
import DashboardShell from "./components/DashboardShell"; import DashboardShell from "./components/DashboardShell";
const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-kx-display", display: "swap" }); const spaceGrotesk = Space_Grotesk({ subsets: ["latin"], variable: "--font-kx-display", display: "swap" });
const inter = Inter({ subsets: ["latin"], variable: "--font-kx-body", display: "swap" }); const inter = Inter({ subsets: ["latin"], variable: "--font-kx-body", display: "swap" });
const manrope = Manrope({ subsets: ["latin"], variable: "--font-kx-label", display: "swap" }); const manrope = Manrope({ subsets: ["latin"], variable: "--font-kx-label", display: "swap" });
const bagel = Bagel_Fat_One({ weight: "400", subsets: ["latin"], variable: "--font-kx-hero", display: "swap" });
export const metadata: Metadata = { export const metadata: Metadata = {
title: { title: {
@@ -103,7 +104,7 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="ko" data-scroll-behavior="smooth" className={`${spaceGrotesk.variable} ${inter.variable} ${manrope.variable}`}> <html lang="ko" data-scroll-behavior="smooth" className={`${spaceGrotesk.variable} ${inter.variable} ${manrope.variable} ${bagel.variable}`}>
<head> <head>
<script <script
type="application/ld+json" type="application/ld+json"