오늘은 제가 요즘 한창 하고있는 제 프로젝트에서 폰트를 귀여운 걸로 바꾸기 위해 적용한 내용을 작성해볼까 합니다.
다운로드
이 글씨체가 너무 잘 어울린다고 생각해서 적용했고 해당 폰트는
https://www.yd.go.kr/?page_id=120264&tab=4
영덕 바다체 입니다.
해당 사이트에 접속 해보면
TTF, OTF 파일 두개가 있습니다 저는 TTF 파일로 사용했습니다.
- public/font/Yeongdeok_Sea.ttf해당 위치로 저는 파일을 다운로드 해줬습니다.
Global font 적용
import localFont from "next/font/local";
export const metadata: Metadata = {
title: "하루공감",
description: "하루하루 공감과 기록을",
};
const yeongdeockSea = localFont({
src: "../public/font/Yeongdeok_Sea.ttf",
display: "swap",
weight: "45 920",
variable: "--font-sea",
});
...
return (
<html lang="en" className={yeongdeockSea.variable}>
<body
className={`${inter.className} min-h-screen max-w-[528px] mx-auto bg-[#f5f5f5]`}
>
<AuthProvider accessToken={session?.access_token}>
<ReactQueryClinetProvider>
<RecoilProvider>
<MainLayout>{children}</MainLayout>
</RecoilProvider>
</ReactQueryClinetProvider>
</AuthProvider>
<KakaoScript />
</body>
</html>
);
}로컬 폰트 import -> 상단 yeongdeockSea 를 정의해주시면 됩니다.
그 후, 해당 로직을 보면 html 에 variable로 들어가 있는 모습을 볼수 있습니다.
tailwind.config.ts 에서 사용하기 좋게 추가 해줍니다.
tailwind.config.ts
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./layouts/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
fontFamily: {
sea: ["var(--font-sea)"],
},
},
},
};아래쪽 fontFamily 로 css variable을 추가해줍니다.
사용기
<h1 className="font-sea">
영덕 바다체!
</h1>간단한 css 로 글로벌과 tailwind.config 추가로 바로 적용이 가능합니다.
깨알 팁 💡
아까 layout 에서 localfont 에는 display 관련 옵션을 선택할수 있습니다.
auto : 폰트가 로드될 때 까지 브라우저는 기본 시스템 폰트를 사용하고, 완료되면 커스텀 폰트로 교체됩니다.
swap : 폰트가 로드되면 즉시 커스텀 폰트로 대체합니다.
block : 폰트가 로드될때까지 텍스트를 숨기고 로드가 완료된 후에만 텍스트를 표시합니다.
fallback : 시스템 폰트를 먼저렌더링하고 그 후 swap과 동일하게 커스텀 폰트로 대체됩니다 하지만 일정 시간 안에 폰트가 로드되지 않으면 폰트 교체를 하지 않습니다.
optional : 폰트 로드 시간이 짧으면 커스텀 폰트를 사용하지만, 로드 시간이 길어지면 시스템 폰트를 그대로 사용하며 폰트 대체를 하지 않습니다. 네트워크 상태가 좋지 않거나 폰트 로드가 느릴 때, 시스템 폰트만 사용될 가능성이 높습니다.
이상으로 로컬 폰트 사용기를 마치겠습니다.
