프리텐다드 폰트가 사파리에서는 적용이 이상하다..? | font-synthesis 폰트 합성 문제

font-synthesis 폰트 합성 문제

모바일 css 작업을 1차로 마친 후 실제 폰으로 잘 보이는지, 이상한 부분은 없는지 확인하고 수정하기로 했다.
나는 아이폰 15를 사용하고 있고 링크 주소를 열면 사파리로 이동하게 된다.

기능문제도 없었고 confirm 모달 쪽 width 수정 등등 자잘한 위치 조정이 필요했다.
그런데 조금 거슬리는 부분이 바로 폰트였다.

모바일은 물론 pc에서도 동일하게 폰트가 이상하게 보이고 있었다.
기본 Regular 400 굵기는 크롬 브라우저랑 동일하게 보였지만, 조금만 굵기가 달라지면 마치 폰트 적용이 안 된 것처럼 보이는게 너무 거슬렸다. 😭

pc에서는 대부분 크롬을 기준으로 작업을 하지만 모바일까지 신경 써서 작업을 하게 되니 이런 부분이 추가적으로 고려되었다.

원인 찾아보기 💥

1. 로컬폰트 확인하기

같은 웹폰트라도 속도를 우선해서 pretendard variable 폰트를 다운 받아서 로컬에 저장해두고 있었다.

// tailwind.config.ts
fontFamily: {
  pretendard: ["var(--font-pretendard)", "sans-serif"],
    yangjin: ["var(--font-yangjin)", "sans-serif"],
      wiggle: ["var(--font-wiggle)", "sans-serif"]
}

// global.css
:root {
  --font-yangjin: "Yangjin";
  --font-wiggle: "Wiggle";
  --font-Pretendard: "Pretendard";
}

// layout.tsx
const pretendard = localFont({
  src: "./fonts/PretendardVariable.woff2",
  variable: "--font-pretendard",
  display: "swap"
});

사실 지금까지 개발작업을 하면서 폰트 적용이 안 됐던 적은 없어서 이 부분은 재확인용으로 슬쩍 체크했다. 변수도 문제 없었고 경로도 문제없었다.

2. cdn 으로 import 하기

로컬로 적용된 게 문제라면 웹에서 url로 import 해볼까 해서 global.css 상단에 추가해주었지만 역시나 바뀌지 않았다...

@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css"); 💥 효과 없음

문제 해결 ✅

font-synthesis 폰트 합성 문제

엄청 구글링하다가 마지막이라고 생각하고 튜터님께 찾아갔다.

처음에는 튜터님도 사파리까지 신경을 써야할까? 하셨고 나는 아래처럼 대답했다.

🧑🏻‍🏫 튜터님 : 네이버 웨일도 아니고 사파리는 사용자가 적지 않나?
👩🏻‍💻 나 : pc 환경은 그럴 수 있지만 아이폰으로 열면 사파리로 열리는 경우가 많지 않을까요? 저부터가 일단 사파리로 여는데 사용자들도 그렇지 않을까요?

해결방법은 이 블로그 덕분에 해결할 수 있었다.. (감사합니다ㅜㅜ)

body, html {
  font-synthesis: none;
}

body와 html 에 폰트 합성 코드를 입력하면 해결된다!

✅ 결과확인

무슨 차이냐고 물어볼까봐 확대사진을 비교해보면 굵은 폰트일 때 확실히 알 수 있다.

전	후

폰으로 보면 작은 것도 크게 보이니까 사소하지만 신경쓰면 좋을 것 같다!

---

참고 자료

• https://jw910911.tistory.com/m/183
• https://jennythecode.tistory.com/546
• https://chaeyoung2.tistory.com/128
• https://minitoy.tistory.com/1319