Next.js에서 전역 스타일링 주기 (폰트)

안녕하세요!

프로젝트를 진행하면서 Next.js를 이용하고 있는데 도저히 전역 스타일링을 어떻게 해야되는지 모르겠더라구요.. ㅜ

그래서 프로젝트에서 스타일링을 주고 있지만 무조건 방법이 있겠거니 하면서 일단은 폰트만 빼고 이빨 빠진 것 처럼 진행을 하고 있었습니다!

정말 간단하더군요...!

그럼 알아보러 가볼까요?

먼저 src > app > globals.css

app 폴더 하위에 globals.css 컴포넌트를 만들어줍니다!

예전에 favicon 만들었던 layout.tsx 컴포넌트와 같은 위치로 컴포넌트를 만들어줍니다!

그 후 넣고 싶은 폰트를 import 해줍니다

저는 Pretendard 넣겠습니다!

@font-face {
    font-family: 'Pretendard-Regular';
    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

이런 식으로 저는 눈누에서 Pretendard를 검색하고 Pretendard 코드를 가져왔습니다

그 후 이렇게 적용해봅시다

* {
	font-family: "Pretendard";
}

별 표시는 모든 태그에 효과를 넣겠다 뜻으로 적용 되기 때문에 위의 태그 처럼 적용해줍니다

모든 태그에 넣기 싫고 나는 body에만 주고 싶다 하시면 별 표시 대신 body를 넣으시면 됩니다

---

이렇게 오늘은 간단하게 Next.js 환경에서 쉽게 전역 스타일링을 주는 방법에 대해 알아보았습니다!

요 며칠동안 계속 전역폰트 해야지해야지 했는데 이제 결국 하네요 ㅠㅠ

그래도 해결이 돼서 정말 다행입니다 구글 짱 ㅎ

오늘은 짧게 포스팅을 마치겠습니다

여러분 오늘도 화이팅이고

행복한 하루도 좋지만 마음이 편안한 하루 되세요!