"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", br: "br", code: "code", div: "div", figure: "figure", h2: "h2", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {MDXImage} = _components; if (!MDXImage) _missingMdxReference("MDXImage", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "얼마전 새로운 프로젝트를 시작하면서 Next.js에서 폰트를 적용하게 되었는데\n이전에 블로그 개발할 때처럼 여러 문서를 찾아다니는 저를 발견하고(...) 정리를 해보려고 해요." }), "\n", _jsx(_components.p, { children: "이 글은 다음과 같은 버전을 기준으로 작성되었어요." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "Next.js@15.1.7" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "TailwindCSS@3.4.1" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "Storybook@8.5.5" }) }), "\n"] }), "\n", _jsx(_components.h2, { children: "Next.js 에서 폰트 설정하기" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/optimizing/fonts", children: "Next.js 공식 문서" }), "에서는 폰트를 최적화하는 방법으로 Google Font와 Local Font 두가지를 설명하고 있어요."] }), "\n", _jsx(_components.p, { children: "현재 프로젝트에서는 Google Font에 없는 Pretendard를 폰트로 사용해서 Local Font를 설정하는 방식에 대해서 알아볼게요." }), "\n", _jsxs(_components.p, { children: ["먼저 ", _jsx(_components.code, { children: "next/font/local" }), " 을 import해서 저장한 폰트 파일이 위치한 경로를 지정해주세요.\nNext.js 팀은 variable fonts를 사용하는 것을 권장하고 있어요."] }), "\n", _jsxs(_components.p, { children: ["저는 ", _jsx(_components.a, { href: "https://github.com/orioncactus/pretendard?tab=readme-ov-file", children: "프리텐다드 Github" }), " 에서 다운로드한 ", _jsx(_components.code, { children: "PretendardVariable.woff2" }), " 폰트 파일을 ", _jsx(_components.code, { children: "public/fonts/" }), " 디렉토리에 넣어 경로를 지정했어요.\n(공식문서에서는 ", _jsx(_components.code, { children: "app/" }), " 디렉토리에 폰트파일을 함께 위치할 수도 있다고 소개하고 있어요.)"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// app/layout.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " localFont " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"next/font/local\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " pretendard" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " localFont" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\tsrc: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"./PretendardVariable.woff2\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\tdisplay: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"swap\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\tweight: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"45 920\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\tvariable: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"--font-pretendard\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "})" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://github.com/orioncactus/pretendard?tab=readme-ov-file#nextjs", children: "프리텐다드의 Github" }), "에서 Next.js를 사용하는 방법에 대해 다음과 같이 설명하고 있어요."] }), "\n", _jsx(MDXImage, { src: "/posts/nextjs-storybook-font/pretendard-git-next-js.png", alt: "프리텐다드의 Github의 Next.js 사용법", caption: "프리텐다드의 Github의 Next.js 사용법" }), "\n", _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "blockquote", children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "localFont 내부 프로퍼티" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "src: 폰트 파일의 경로를 지정" }), "\n", _jsxs(_components.li, { children: ["display: 폰트가 표시되는 방법을 결정 ", _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display", children: "MDN font-dispay" })] }), "\n", _jsx(_components.li, { children: "weight: 폰트의 굵기 범위를 지정" }), "\n", _jsxs(_components.li, { children: ["variable: 입력한 변수를 CSS 변수로 설정", _jsx(_components.br, {}), "\n", "그 외의 Font 함수와 관련된 인자들은 ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/api-reference/components/font", children: "여기" }), "에서 확인해보세요."] }), "\n"] }), "\n"] }) }), "\n", _jsxs(_components.p, { children: ["이렇게 ", _jsx(_components.code, { children: "localFont" }), "를 설정했다면 ", _jsx(_components.code, { children: "app/layout.tsx" }), "에서 다음과 같이 사용할 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// app/layout.tsx" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " localFont " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"next/font/local\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " pretendard" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " localFont" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F97583" }, children: "\t..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "})" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: "\tchildren" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Readonly" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<{" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: "\tchildren" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " React" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "ReactNode" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>) {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "\treturn" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "html" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " lang" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"kr\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "pretendard" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "className" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "}`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{children}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "localFont" }), "는 폰트를 사용할 수 있도록 ", _jsx(_components.code, { children: "pretendard.className" }), "와 같이 자동으로 클래스 이름을 생성해 사용할 수 있도록 해요.\n", _jsx(_components.code, { children: ".className" }), " 방식을 사용하면 폰트를 전역적으로 적용시킬 수 있어요."] }), "\n", _jsx(_components.h2, { children: "Tailwind CSS에서 variable 적용하기" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "localFont" }), "에서 설정한 ", _jsx(_components.code, { children: "variable" }), "을 Tailwind에 적용해 전역 또는 부분적으로 폰트를 적용할 수도 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// app/layout.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(...) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "\treturn" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "\t\t// pretendard.className 대신 pretendard.variable 사용" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "html" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " lang" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"kr\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{pretendard.variable}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{children}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "html" }), " 태그에 ", _jsx(_components.code, { children: "className" }), "으로 ", _jsx(_components.code, { children: "variable" }), "을 추가해주세요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typeScript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typeScript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "// tailwind.config.ts" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "import type { Config } from \"tailwindcss\";" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "export default {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\tcontent: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t\t..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\ttheme: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t\textend: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t\t\tfontFamily: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t\t\t\t// font-pretendard 등록" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t\t\t\tpretendard: [\"var(--font-pretendard)\"]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t\t\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "\tplugins: []," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { children: "}," }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["그리고 ", _jsx(_components.code, { children: "tailwind.config.ts" }), "에서 ", _jsx(_components.code, { children: "fontFamily" }), "로 ", _jsx(_components.code, { children: "pretendard" }), "를 추가해줄게요.\n이렇게 하면 ", _jsx(_components.code, { children: "font-pretendard" }), "라는 클래스로 폰트 스타일을 추가할 수 있어요."] }), "\n", _jsxs(_components.p, { children: ["다시 ", _jsx(_components.code, { children: "app/layout.tsx" }), "로 돌아와서,"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// app/layout.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(...) {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "\treturn" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "\t\t// font-pretendard tailwind class 추가" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "html" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " lang" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"kr\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "pretendard" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "variable" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "} font-pretendard`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t<" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{children}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t);" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이렇게 작성하게 되면 ", _jsx(_components.code, { children: "pretendard" }), " 폰트를 전역으로 적용할 수 있어요.\n폰트의 등록 흐름을 처음부터 순서대로 설명해볼게요."] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "./PretendardVariable.woff2" }), " 폰트 파일을\n", _jsx(_components.code, { children: "localFont" }), "를 통해 ", _jsx(_components.code, { children: "--font-pretendard" }), " 라는 이름으로 ", _jsx(_components.code, { children: "variable" }), " 변수에 설정했어요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// app/layout.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " pretendard" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " localFont" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\tsrc: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"./PretendardVariable.woff2\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\tvariable: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"--font-pretendard\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "})" }) })] }) }) }), "\n", _jsxs(_components.ol, { start: "2", children: ["\n", _jsxs(_components.li, { children: ["설정한 ", _jsx(_components.code, { children: "variable" }), "을 전역으로 설정 가능하도록 ", _jsx(_components.code, { children: "html" }), "에 ", _jsx(_components.code, { children: "className" }), "으로 등록했어요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// app/layout.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "html" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " lang" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"kr\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{pretendard.variable}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{children}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.ol, { start: "3", children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "tailwind.config.ts" }), "에서 ", _jsx(_components.code, { children: "variable" }), "의 값(", _jsx(_components.code, { children: "./PretendardVariable.woff2" }), ")을 ", _jsx(_components.code, { children: "fontFamily" }), "에 ", _jsx(_components.code, { children: "pretendard" }), "라는 이름으로 저장했어요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// tailwind.config.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F97583" }, children: "\t..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\ttheme: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\textend: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\tfontFamily: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t\tpretendard: [" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"var(--font-pretendard)\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F97583" }, children: "\t..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}," }) })] }) }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["저장한 ", _jsx(_components.code, { children: "font-pretendard" }), "이름의 ", _jsx(_components.code, { children: "fontFamily" }), "를 적용하고 싶은 노드에 추가했어요."] }), "\n"] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// app/layout.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " RootLayout" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "html" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " lang" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"kr\"" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "`${" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "pretendard" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "variable" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "} font-pretendard`" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "body" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">{children}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이 과정을 통해 Next.js 프로젝트에서 Tailwind CSS 를 통해 폰트를 적용할 수 있게 됐어요." }), "\n", _jsx(_components.h2, { children: "Storybook에서 폰트 설정하기" }), "\n", _jsx(_components.p, { children: "저는 컴포넌트 문서화를 위해 Storybook을 사용하고 있는데,\n페이지에 적용된 폰트를 Storybook에서도 확인할 수 있도록 폰트를 추가해 볼게요." }), "\n", _jsxs(_components.p, { children: ["Storybook에서는 next/font를 사용해서 폰트를 사용할 수 있다고 설명하고 있어요.\n저는 ", _jsx(_components.a, { href: "https://storybook.js.org/docs/get-started/frameworks/nextjs#nextjs-font-optimization", children: "이 방법" }), "으로 폰트가 적용되지 않아서 다른 방법으로 적용해보았어요.\n(아마 Next.js의 localFont 함수가 Storybook 빌드 중에 제대로 동작하지 않는것 같은데 조금 더 찾아볼게요..)"] }), "\n", _jsxs(_components.p, { children: ["그래서 저는 ", _jsx(_components.code, { children: ".storybook/fonts.css" }), "를 만들어 ", _jsx(_components.code, { children: "@font-face" }), "를 추가하고 ", _jsx(_components.code, { children: "tailwind.config.ts" }), " 에 등록해서 사용했어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@font-face" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-family" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"PretendardVariable\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " src" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "url" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/fonts/PretendardVariable.woff2\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "format" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"woff2\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-weight" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "45" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 920" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-display" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "swap" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: ".storybook/main.ts" }), "에서 ", _jsx(_components.code, { children: "staticDirs" }), "를 통해 폰트가 위치한 디렉토리를 지정할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " config" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " StorybookConfig" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // ..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " staticDirs: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " from: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"../public/fonts\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " to: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/fonts\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "from" }), " 프로퍼티는 ", _jsx(_components.code, { children: ".storybook" }), " 디렉토리를 기준으로 폰트가 위치한 상대 경로를 말하고,\n", _jsx(_components.code, { children: "to" }), " 프로퍼티는 해당 디렉토리를 루트로 하겠다는 말이에요."] }), "\n", _jsxs(_components.p, { children: ["이렇게 설정하게 되면 ", _jsx(_components.code, { children: "http://localhost:6006/fonts/PretendardVariable.woff2" }), " 이경로로 폰트를 가져와요."] }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "tailwind.config.ts" }), "에서 ", _jsx(_components.code, { children: "font-family" }), "를 등록할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// tailwind.config.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F97583" }, children: "\t..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\ttheme: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\textend: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\tfontFamily: {" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t\tpretendard: [" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\t\t\t\t\t\"var(--font-pretendard)\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Next.js localFont" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\t\t\t\t\t\"PretendardVariable\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#6A737D" }, children: "// Storybook" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t\t]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "\t}," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#F97583" }, children: "\t..." }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}," }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["위에서 추가했던 ", _jsx(_components.code, { children: "var(--font-pretendard)" }), " 뒤에 ", _jsx(_components.code, { children: "@font-face" }), "로 등록한 ", _jsx(_components.code, { children: "PretendardVariable" }), "을 추가해줄게요."] }), "\n", _jsxs(_components.p, { children: ["이렇게하면 폰트가 적용될 줄 알았는데 아직 적용되지 않는 이슈가 있네요.\n위에서 추가했던 ", _jsx(_components.code, { children: "var(--font-pretendard)" }), "가 ", _jsx(_components.code, { children: "localFont" }), "를 통해 폰트를 가져오지 못해서 기본 폰트를 적용하고 ", _jsx(_components.code, { children: "var(--font-pretendard)" }), "를 지우면 ", _jsx(_components.code, { children: "PretendardVariable" }), "이 폰트를 잘 가져오는 것을 확인했어요."] }), "\n", _jsxs(_components.p, { children: ["하지만 Next.js 환경에서 ", _jsx(_components.code, { children: "var(--font-pretendard)" }), "를 사용하기 때문에 이원화를 위해 ", _jsx(_components.code, { children: ".storybook/fonts.css" }), "에 다음과 같이 추가해줬어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "css", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "css", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "@font-face" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-family" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"PretendardVariable\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " src" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "url" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/fonts/PretendardVariable.woff2\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "format" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"woff2\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-weight" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "45" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " 920" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#79B8FF" }, children: " font-display" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "swap" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "// 추가" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: ":root" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " --font-pretendard" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"PretendardVariable\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이렇게 해서 프리텐다드 폰트를 Next.js와 Storybook 모두에 적용할 수 있었어요." }), "\n", _jsx(MDXImage, { src: "/posts/nextjs-storybook-font/pretendard-storybook.png", alt: "폰트가 Storybook의 Button에 적용된 모습", caption: "폰트가 Storybook의 Button에 적용된 모습" }), "\n", _jsx(_components.h2, { children: "출처" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/optimizing/fonts", children: "https://nextjs.org/docs/app/building-your-application/optimizing/fonts" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://github.com/orioncactus/pretendard", children: "https://github.com/orioncactus/pretendard" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://www.itsmo.dev/storybook-font/", children: "https://www.itsmo.dev/storybook-font/" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://velog.io/@pmthk__/Next.js-LocalFont-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-Pretendard", children: "https://velog.io/@pmthk__/Next.js-LocalFont-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-feat.-Pretendard" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://dev.to/algoorgoal/nextjs-tailwindcsse-pretendard-ponteu-jeogyonghagi-1g87", children: "https://dev.to/algoorgoal/nextjs-tailwindcsse-pretendard-ponteu-jeogyonghagi-1g87" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Next.js에서 Pretendard 적용하기(feat.Storybook)