기본 셋팅
Nextjs + Typescript + Tailwind + storybook
내가 쓰고자하는 "Poppins" 폰트가 가변폰트가 아니라
next/font/google 지원을 안하는거 같음
다른공부들이 먼저인지라 스타일 입히는것보다 폰트는 가중치가 후순위기도
폰트는 깡 global.css에서 import 해서 사용하고있었음
기존 import 버전
global.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,500;0,600;1,300;1,500;1,600&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
.fonts-poppins {
font-family: "Poppins", sans-serif;
}
tailwind.config.ts
theme: {
fontFamily: {
Poppins: ['Poppins', 'sans-serif'],
},
//...
}
rootLayout.tsx
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className="font-poppins">{children}</body>
</html>
);
}
이렇게 쓰고 있었는데
신경쓰이는게 사전로딩도 안되기도 하고
storybook 을 설정했는데 폰트가 적용이 안되는거라..
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#local-fonts
Optimizing: Fonts | Next.js
Optimize your application's web fonts with the built-in `next/font` loaders.
nextjs.org
안되....
왜안되....
뭘해도 안되....
프로젝트 새로 떠봐도 안되..
계속 모듈에러나....
화가난다...
https://fonts.google.com/variablefonts
Variable Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
nextjs 에서 지원하는 localfont 에 "Poppins" 폰트를 지원하지않아
따로 다운받아서 ttf 로 다운받음
검색의 검색을 구글지옥과 영어 지옥을 격고 격동의 시간을 지나 찾은 방법을 나의 기록용으로 남긴다...
Next.js에 로컬 폰트 적용하기
public/fonts 폴더를 만든다
해당경로에 다운받은 ttf,otf 등등 폰트파일을 넣는다.
같은 경로에 style.css 를 생성한다.
style.css 에 @font-face 를 작성한다
style.css
@font-face {
font-family: 'Poppins';
src: url('Poppins-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
tailwind.config.ts // 전과 동일함
theme: {
fontFamily: {
Poppins: ['Poppins', 'sans-serif'],
},
//...
}
rootLayout.tsx
동일한거 같은데 여기서 다른점은 class="font-Popins" << import 할때는 내가 설정한 클래스 명이였으면 지금은 tailwind 에서 theme 에서 컴파일된 클래스로 사용할수 있다.
( 아래 그림 참고!! webstorm 을 쓰고 있습니다 다른에디터는 어떨지 모른...)
import "@/public/fonts/style.css";
import "./globals.css";
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className="font-Poppins">{children}</body>
</html>
);
}
근데 이렇게 하니까 또!!!!!!!!!!!!!
아직 storybook을 커스더마이징을 안했더니
css 를 import 해도 rootLayout 에서 적용했더니 스토리북에 폰트 적용이 안됨..
global.css
body {
/*todo storybook용 임시 폰트설정 추후 변경필요*/
font-family: 'Poppins', sans-serif;
}
적용완료
이제 잘된다!!
글써주신분 너무 감사함다!!
참고 :
'Dev > Nextjs' 카테고리의 다른 글
| [Nextjs] 공통 인터페이스를 이용해서 컴포넌트 생성하기 (0) | 2024.09.25 |
|---|---|
| [SVGR] SVG 파일 컴포넌트 사용 (0) | 2024.09.22 |
| [Nextjs]Vercel + TypeORM (0) | 2024.09.05 |
| Nestjs 설정하기 (0) | 2024.09.05 |
| [Nextjs] Type 추가하는 방법 (0) | 2024.09.05 |