반응형
최대한 NextJs 의 기능들을 사용하고 싶어서 NextJs LocalFont 기능을 사용해보기로 했다.
물론 아래와 같은 장점도 있다ㅎ
1. 공통
Font 파일(왠만하면 subset font)들을 다운로드 해주고 woff2 로 변경한다.
- woff2 를 사용하는 이유는 용량이 적기 때문
- fallback 으로 woff 를 지정해주는데 이 프로젝트에서는 패스하겠다.
2. 스토리북 내부에서 세팅
NextJs 에서만 세팅한다고 스토리북 내에서도 세팅이 되는게 아니기 때문에! 따로 세팅을 진행해주어야한다.
1. localFont 변수를 생성한다.
import localFont from 'next/font/local';
export const pretendard = localFont({
src: './PretendardVariable.woff2',
display: 'swap',
weight: '45 920',
variable: '--font-pretendard',
});
export const hakgoansimMulgyeolB = localFont({
src: './HakgyoansimMulgyeolB.woff2',
display: 'swap',
variable: '--font-hakgoansimMulgyeolB',
});
export const caniculeDisplayB = localFont({
src: './CaniculeDisplayv0.1-Bold.Trial.woff2',
display: 'swap',
variable: '--font-caniculeDisplayB',
});
2. main.js 세팅
StoryBook Doc 에 의하면 storybook 에게 font directory 가 어디에 있는지 알려주어야한다고 한다. 그래서 main.js 에서 이걸 위한 세팅을 해준다.
import { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = {
// ...
staticDirs: [
{
from: '../src/components/fonts',
to: 'src/components/fonts',
},
],
};
export default config;
// storybook doc 예제
3. preview.jsx 세팅
1번에서 생성해둔 로컬 폰트 변수를 css var 로 사용할 수 있게끔 decorator 내부에 작성해준다.
const preview = {
...
decorators: [
Story => {
return (
<div
className={`${hakgoansimMulgyeolB.variable} ${pretendard.variable} ${caniculeDisplayB.variable}`}
>
<Story />
</div>
);
},
],
};
그러면 아래와 같이 var 세팅이 된다.
4. 사용
3번의 세팅을 마치면 아래와 같이 var 로 사용할 수 있다.
<div style={{ fontFamily: 'var(--font-hakgoansimMulgyeolB)', color: 'aliceblue' }}>
hakgoansimMulgyeolB
</div>
3. NextJs Layout 에서 세팅
1. layout 세팅
const fontVars = [hakgoansimMulgyeolB.variable, pretendard.variable, caniculeDisplayB.variable];
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="ko" className={fontVars.join(' ')}>
<body className={inter.className}>{children}</body>
</html>
);
}
2. 사용
<div style={{ border: '2px solid black', padding: 20 }}>
<div style={{ fontFamily: 'var(--font-pretendard)' }}>1. Pretendard</div>
<div style={{ fontFamily: 'var(--font-hakgoansimMulgyeolB)' }}>
2. hakgoansimMulgyeolB
</div>
<div style={{ fontFamily: 'var(--font-caniculeDisplayB)' }}>3. caniculeDisplayB</div>
</div>
하지만 스토리북에서 next/font 의 일부 기능을 지원하지 않는다!
반응형
'내가 경험한 것 > 1.5' 카테고리의 다른 글
| Vitest 간단 사용후기 (0) | 2024.04.22 |
|---|---|
| 스토리북에서 NextJs Local 폰트와 vanilla extract 함께 사용하기 (0) | 2024.03.18 |
| eslint 와 prettier 대신 사용하는 Biome?? (intelliJ 세팅 포함) (0) | 2024.02.22 |
| react 프로젝트 시작할 때 세팅목록 part2 (0) | 2024.02.04 |
| react 프로젝트 시작할 때 세팅 목록 1 (0) | 2024.02.03 |
