Next.js에 폰트 바꿔서 적용하기 (ttf파일 사용)
- 서론 (Next.js에서 폰트 바꿔서 사용하는 대략적인 가이드)
보통 인터넷이 연결 되어있는 상황에서는 패키지나, 구글폰트를 이용해 폰트적용을 많이 합니다.
아래와 같이 말이죠
layout.js
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}위 코드는 next.js의 layout.js파일입니다. 보면 inter font가 기본으로 적용되어 있습니다.
https://nextjs.org/docs/pages/building-your-application/optimizing/fonts
Optimizing: Fonts | Next.js
Using Pages Router Features available in /pages
nextjs.org
위 공식문서 링크에 들어가면 자세한 내용과 유튜브 강의까지 제공해 줍니다.
그치만 저는 오늘 로컬 환경에서, 폐쇄망에서, ttf파일을 이용해 폰트를 사용해야 하는 상황에 직면 했습니다.
몇개의 ttf파일을 보니 용량이 대략 5mb이하인것을 알 수 있었습니다.
회사마다 폰트의 종류는 다양하기에... 그 예시로 네이버 폰트 ttf파일을 이용해 사용해 보도록 하겠습니다.
- 본론 (ttf파일을 사용해서 next.js에 폰트 적용하기)
위와같이 이미 ttf 폰트파일을 다운받아서 가지고 있다고 가정합니다.
1.next.js 프로젝트에 public/fonts 폴더까지 만들어주고 폰트파일을 넣어준다.
2.global.css 파일을 아래와 같이 수정해준다.
global.css
body {
padding: 0;
margin: 0;
font-family: -apple-system, NanumPen, sans-serif;
}
@font-face {
font-family: "NanumPen";
font-weight: 200;
src: url("/fonts/NanumPen.ttf") format("truetype");
}3.layout.js는 아래와 같이 수정해준다. 사용하지 않는 inter모두 주석해줘도 되지만 우선 테스만 해보기위해
className부분만 주석 처리해줬다.
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body
// className={inter.className}
>{children}</body>
</html>
)
}4.결과 : 아래와같이 잘 적용되는것을 볼 수 있다.
- 다른 방법 : jsx global속성과 함께 새로운 css파일을 만들어 @font-face를 이용하는방법
https://developer.mozilla.org/ko/docs/Web/CSS/@font-face
@font-face - CSS: Cascading Style Sheets | MDN
CSS at-rule 인 @font-face 를 사용하여 웹페이지의 텍스트에 온라인폰트(online fonts)를 적용할 수 있다. @font-face 를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게함으로써, 컴퓨터에 설치
developer.mozilla.org
https://nextjs.org/blog/styling-next-with-styled-jsx
Styling Next.js with Styled JSX
Styled JSX is a CSS-in-JS library that allows you to write encapsulated and scoped CSS to style your components. This blog post will help you get started with using Styled JSX in Next.js.
nextjs.org
위에 두 링크를 참고해서 만들 수 있는데
물론 global.css에 body부분에 font-family에 속성을 줘도 된다.
style.css
body {
padding: 0;
margin: 0;
font-family: -apple-system, NanumPen, sans-serif;
}
@font-face {
font-family: "NanumPen";
font-weight: 200;
src: url("/fonts/NanumPen.ttf") format("truetype");
}그치만 _app.js, index.js, 혹은 layout.js에 <style jsx global>의 형태로 이미 템플릿이 정의 되어 있다면 그 안에
정의해도 상관없다. 결국 같은 방법이기 때문
아래 코드를보면 27번째 줄에 font-family에 설정을 해줬다. 결국 어디다 하느냐의 차이지 방법은 같다고 볼 수있다.
layout.js
'use client'
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body
// className={inter.className}
>{children}
<style jsx global>{`
body {
margin: 0;
padding: 0;
font-size: 40px;
font-weight: 400;
line-height: 1.8;
font-family: -apple-system, NanumPen, sans-serif;
}
h1 {
font-weight: 700;
}
p {
margin-bottom: 10px;
}
`}</style>
</body>
</html>
)
}