이챙의 개발 log
Next.js 13 로컬 폰트 사파리에서 적용 안되는 이슈 (+Tailwind와 함께 사용)
이챙(leechaeng)
이번 프로젝트에 지마켓 산스 웹폰트를 사용했다.
그런데..분명 크롬에서는 폰트가 잘 나왔었는데 사파리에서는 적용이 안되서 나왔다.
궁서체처럼 나오는것이 너무 맘에 안들었다. ㅡㅡ 굉장히 구려보이고요
일단 저 궁서체 같은 폰트를 해결하고자 sans-serif를 적용했다. 고딕체로 나오도록.
그러나 내가 원하는건 지마켓 산스 웹폰트가 나와야 하는것!!!!!
app/layout.tsx 파일에 로컬폰트를 아래와 같이 적용했다.
//app/layout.tsx
const customFont = localFont({
src: [
{
path: '../../public/fonts/GmarketSansLight.woff',
weight: '300',
style: 'normal',
},
{
path: '../../public/fonts/GmarketSansMedium.woff',
weight: '400',
style: 'normal',
},
{
path: '../../public/fonts/GmarketSansBold.woff',
weight: '700',
style: 'normal',
},
],
})
👩💻 해결과정
구글링을 하며 여러가지 해결법을 찾아서 적용해봤다. i am 삽질과정~~
1. 폰트 대소문자가 문제일까..?
사파리는 워낙 예민한 친구 이기때문에 대소문자가 문제일수도 있겠다라는 생각에
GmarketSanBold.woff -> gmarketsansbold 로 바꿔봄.
소용 없었음.
2.font-famliy의 쉼표가 문제일까!!!
body {
font-family: 'GmarketSansMedium'
...
}쉼표를 쓰면 안된다 뭐 이런글을 또 발견!! 그래 혹시 될지 몰라 하는 맘에 쉼표도 제거 해봤지만 안됨!!!!
3. 그래..그러면 woff가 적용이 안되는걸까..!!!!
혹시 몰라 ttf로도 불러와봤으나 안됨.
4. 네트워크에서 폰트를 못불러오고 있나??
그렇다고 하기엔 너무나 잘불러오고 있었음;;
이때 아 폰트는 문제 없는거 같은데.. 라는 생각을 하게됬음
5. 음..Tailwind랑 같이쓰면 tailwind.config.ts에 따로 설정을 해줘야 한다!
// app/layout.tsx
const customFont = localFont({
src: [
{
path: '../../public/fonts/GmarketSansLight.woff',
weight: '300',
style: 'normal',
},
{
path: '../../public/fonts/GmarketSansMedium.woff',
weight: '400',
style: 'normal',
},
{
path: '../../public/fonts/GmarketSansBold.woff',
weight: '700',
style: 'normal',
},
],
variable: '--my-custom-font',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="ko">
<body className={`${customFont.variable}`}>
<RecoilRootProvider>
<div className="max-w-[var(--container)] m-auto h-screen">
{children}
</div>
</RecoilRootProvider>
</body>
</html>
)
} // tailwind.config.ts
theme: {
extend: {
fontFamily: {
sans: ['var(--my-custom-font)'],
serif: ['var(--my-custom-font)'],
// mono: ['var(--my-custom-font)'],
// body: ['var(--my-custom-font)'],
// display: ['var(--my-custom-font)'],
},
}로컬 폰트에 변수명을 넣어준다음에 tailwind.config.ts 파일 fontFamily에 그 변수명을 적용시켜줘야함!!
👌오케이~!! 왠지 될거같은데??
결과론적으로 안됬음 ㅋㅋㅋㅋㅋㅋㅋ
넘나 절망적이었고..
6. 지마켓 산스 홈페이지를 분석해보자.
지마켓 산스가 사파리에서 적용이 안되는 폰트일까?
지마켓 산스 홈페이지를 사파리에서 확인해보니 너무나 잘나오고 있었다.
지마켓에서도 woff 파일로 폰트를 불러오고 있는 듯 했다.
그렇다면 여기서 알 수 있는건 폰트파일 문제없고! 뭔가 내 프로젝트에서 폰트 셋팅이 잘못된거임...분명 뭔가가 빠졌음...🤔🤔🤔🤔
⭐️최종결과⭐️
내 코드가 뭔가 잘못됬다는걸 깨닫고 폰트 적용한 코드를 유심히 보기 시작함.
어허 어디보자..
layout.tsx에 폰트 변수로 만들어줬고..body에 폰트 변수 내려줬고...tailwind.config.ts에 적용해줬고...
global.css파일을 함봐보자..흠...
body {
font-family: Gmarket Sans;
color: #2f2f2f;
font-weight: 400;
}Gmarket Sans..? 뭔가 이상한데..?
변수명으로 바꿔봐야겠다 🤨
body {
font-family: var(--custom-font);
color: #2f2f2f;
font-weight: 400;
}
삽질일기 끄읏!!
'회고록 > 날씨 프로젝트' 카테고리의 다른 글
| parallel route 사용했더니 First Load JS가 🔴200kb -> 🟢80kb대로 (0) | 2023.12.21 |
|---|---|
| Next.js 13 클라이언트 컴포넌트에서 data fetch는 어떻게 해야 할까 (0) | 2023.11.25 |
이챙(leechaeng)
프론트엔드 개발도 하고 뛰기도 하고