완전 오랜만의 글이다😭
기존에 'next/font/google'에서 폰트를 사용하고 있었다.
next/font/google
폰트 최적화를 지원하며, 빌드시 다운로드되고, 배포에 포함되며 배포와 동일한 도메인에서 제공 (google에 요청하지 않음)
그런데 디자인시스템 바꾸면서 폰트가 바뀌어서 맞추어서 적용해야했는데,
그것은 google font에 없는 Pretendard🫢
많이 바쁘시구나..
그래서 생각한건
아 그럼 public폴더에 폰트 파일 저장하고, localFont를 사용해보자. 였다
next/font/local
Font Module 관련 내용 > 🔗
그래서 폰트를 다운받고, Woff2파일을 assets 하위에 넣었다.
근데 여기서 문제
기존처럼 root layout파일에 추가했는데, path에 절대경로가 적용이 안됨
AS-IS (next/font/google)
// layout.tsx
import { Noto_Sans } from 'next/font/google';
const notoSans = Noto_Sans({
weight: '400',
preload: false,
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html className={globalFont.variable}>
<body>
{children}
</body>
</html>
);
}
TO-BE
root layout파일에서 assets까지 상대경로 지정하기 너무 불편해서 파일을 분리하고 파일 자체를 import시키는 형태로 변경
// assets/font/font.ts
import localFont from 'next/font/local';
export const pretendard = localFont({
src: [
{
path: './Pretendard-Regular.woff2',
weight: '400',
},
{
path: './Pretendard-Medium.woff2',
weight: '500',
},
{
path: './Pretendard-SemiBold.woff2',
weight: '600',
},
{
path: './Pretendard-Bold.woff2',
weight: '700',
},
{
path: './Pretendard-ExtraBold.woff2',
weight: '800',
},
],
variable: '--pretendard',
display: 'swap',
weight: '400',
});// layout.tsx
import { pretendard } from '@/root/lib/font';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html
lang={lang}
dir={dir(lang)}
className={cn(pretendard.variable, 'font-pretendard')} // 'font-pretendar'로 기본 폰트 지정
>
<body>
{children}
</body>
</html>
);
}
tailwind 설정
// tailwind.config.js
module.exports = {
...
theme: {
...
extend: {
...
fontFamily: {
pretendard: ['var(--pretendard)'],
},
...
},
},
variants: {
...
},
};
storybook 설정
// tsconfig.json
{
...
"include": [
...
".storybook/**/*.tsx"
],
...
}
staticDirs 관련 참고
Storybook에서 로드될 정적 파일 디렉토리 목록 설정
https://storybook.js.org/docs/api/main-config-static-dirs
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
...
staticDirs: [
...
{
from: '../assets/fonts',
to: 'assets/fonts',
},
],
...
};
export default config;
// .storybook/preview.tsx
// .ts 파일이라면 .tsx로 변경해야함!
const preview: Preview = {
parameters: {
...
},
decorators: [
(Story) => (
<div className={cn(pretendard.variable, 'font-pretendard')}>
<Story />
</div>
),
],
};참고로 `cn` util함수 관련 정보
https://stackoverflow.com/questions/69687530/dynamically-build-classnames-in-tailwindcss/76660733#76660733
+ antd 쓰시는 분들
theme로 font를 설정하는antd는 아직 local font 설정 할 수 있는 방법이 없는것같습니다!
그래서 저는 아래처럼 클래스로 선택해서 적용되도록 해뒀습니다.
// global style file
[class*='ant'] {
font-family: var(--pretendard);
}https://github.com/ant-design/ant-design/discussions/39346
✔️ 참고
'Next.js' 카테고리의 다른 글
| [Next.js] Next.js app router error page 무한 새로고침 에러 (2) | 2023.06.29 |
|---|---|
| [Next.js] monorepo환경에서 next-seo, next-sitemap, robot 설정 | 사용하기 (0) | 2023.04.02 |
| [Next.js] Hydrate 간단하게 정리 (0) | 2022.08.27 |
| [Next.js] next/Link 사용하기 (공식문서 내용 정리) (0) | 2022.05.19 |
| [Next.js] next/router 사용하기 (공식문서 내용 정리) (0) | 2022.05.15 |
