🔴 Next Font Google
nextJS 13버전이후로 font를 가져오는데 최적화 해주는 기능이 추가 되었다. 이를 알아보고 적용해보는 시간을 가졌다.
구글 폰트 접속하여 원하는 font를 적용할 수 있다.
nextJs 13버전에 추가된 next/font/google은 추가적인 패키지를 설치하지 않아도 기본적으로 제공된다.
Next/font/google의 장점
-next/font는 모든 글꼴 파일에 자동적으로 자체 호스팅이 내장되어있다.
-레이아웃 쉬프트 없이 폰트를 사용할 수 있다.
같은 텍스트와 같은 픽셀을 가진 글자를 서로 다른 폰트로 표현한 것이다. 폰트 차이로 레이아웃이 크게 차이나 보인다.
또한 font style을 입히는 과정에서 초기 화면은 기본 font가 적용되고 그 다음에 설정한 font가 적용된다. 이로 인해 layout이 깨져 사용자 경험이 좋지 못할 수 있다.
🟠 Next Font Google활용하기
// app/layout.tsx
import DefaultLayout from "../UI/Footer/DefaultLayout";
import { Providers } from "./ChakraUIProvider";
import "../app/global.scss";
import Provider from "./SessionProvider";
import { Noto_Sans_KR } from 'next/font/google'; /
/**적용하고자 하는 font*/
const notoSansKr = Noto_Sans_KR({
weight: ['500'],
subsets: ['latin'],
});
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
/**body에 스타일 주기*/
<body className={notoSansKr.className}>
<Providers>
<DefaultLayout>{children}</DefaultLayout>
</Providers>
</body>
</html>
);
} next.js의 구글 폰트는 자동으로 폰트를 preload한다. 이를 위해 지정하는 값이 subset (하위 집합) 이고 이를 통해 크기를 줄여 성능이 향상된다.하위 집합을 지정하지 않으면 preload 경고가 발생한다.
하지만 next font에서 지원하는 font는 한국어를 대부분 지원하지 않아 원하는 font를 적용시키기 어렵다.(한국어를 제외한 영어,한문,특수문자,숫자 등은 font가 적용이 되었다.)그렇다면 google font이외의 font를 적용하는 방법은 없을까?
🟡 Local Font
다행히 local에 font파일을 다운받아 적용시키는 방법이 존재한다.
app경로의 font폴더에 배달의 민족 주아체 파일일을 다운받아 넣어 저장해 두었다. 그리고 localFont에 font파일에 대한 경로와 스타일 등을 설정해 두었다.
"use client";
import { CacheProvider } from "@chakra-ui/next-js";
import {
ColorModeScript,
ThemeConfig,
extendTheme,
useColorMode,
} from "@chakra-ui/react";
import dynamic from "next/dynamic";
const ChakraProvider = dynamic(() =>
import("@chakra-ui/provider").then((mod) => mod.ChakraProvider)
);
import localFont from "next/font/local";
const BMJUA = localFont({
src: [
{
path: "./font/BMJUA_ttf.ttf",
weight: "normal",
style: "normal",
},
],
});
export function Providers({ children }: { children: React.ReactNode }) {
const { colorMode } = useColorMode();
const config: ThemeConfig = {
initialColorMode: colorMode,
useSystemColorMode: false,
};
const theme = extendTheme({
config,
fonts: {
body: BMJUA.style.fontFamily,
},
});
return (
<ChakraProvider theme={theme}>
<ColorModeScript initialColorMode="system" />
<CacheProvider>{children}</CacheProvider>
</ChakraProvider>
);
}
다음과 같이 layout변동없이 font적용이 잘되는 것을 확인할 수 있었다.☺️
👍올바른 피드백은 언제든지 환영입니다~!
