[NextJs14] 글꼴 설정방법 ( google font )
FrontEnd/React

[NextJs14] 글꼴 설정방법 ( google font )

728x90

 

NextJs에서 구글 폰트를 사용하기 위한 방법으로는 크게 두가지 정도가 있었다.

 

 

예를들어 배달의 민족의 JUA체를 사용한다고 생각해보자.

 

 

 

1. global.css 사용

 

 

처음에는 구글 폰트에서 제공하는 대로 HTML태그나 CSS를 넣어주는 방법이다. 

 

//global.css
body {
  margin: 0;
  font-family: "Jua", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

 

 

// import "styles/globals.css";

를 RootLayout에 넣어준다.

 

이런 방식은 틀린 방법은 아니지만 구글폰트 페이지에서 폰트를 다운로드 받는 과정이 섞여있기에 유저의 기기 상태가 나쁘면 폰트가 순간적으로 변하게 되는 깜박임 현상이 나타나 사용자에게 안 좋은 경험을 주게된다.

 

 

2. @next/font 사용

NextJs에서는 @next/font란 패키지를 설치하여 구글 폰트를 자유롭게 쓸 수 있다.

 

 

import { Jua } from "@next/font/google";


const jua = Jua({ subsets: ["latin"], weight: ["400"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body className={jua.className}>
        {children}
      </body>
    </html>
  );
}

 

 

위와 같이 라이브러리에서 google font에 등록된 폰트를 미리 가져와서 보여주는 것이 가능하다.

 

 

NextJs 14

위 라이브러리를 NextJs 14에서 사용하면 @next/font 라이브러리를 더이상 사용할 수 없다고 나오는데, 사라진건 아니고 기본 패키지로 들어와서 굳이 설치가 필요없어졌다.

 

 

 

 

import { Jua } from "next/font/google";
// @를 떼주자

const jua = Jua({ subsets: ["latin"], weight: ["400"] });

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html>
      <body className={jua.className}>
        {children}
      </body>
    </html>
  );
}

 

 

따라서 굳이 라이브러리를 설치하지 않고 위처럼 적용해주면 예전보다 더 쉬운 방법으로 구글 폰트를 NextJs에 적용하는 것이 가능하다!

 

728x90

'FrontEnd > React' 카테고리의 다른 글

[React] 리액트 19 beta 변경점 알아보기  (1) 2024.04.27
[React] 부모, 자식 컴포넌트 리렌더링 관계 (props,state)  (0) 2024.04.12
[React] TanStack(React-Query) DeepDive 해보기  (1) 2024.02.23
[NextJs] Next.js14에 styled components 적용하기  (0) 2024.02.20
[JEST,Recoil] jest에서 recoil사용하기  (0) 2024.02.01

    티스토리툴바