CSS : font-synthesis 속성으로 모바일 IOS Safari 글꼴 굵게 표시되는 버그 수정하기 (feat: pretendard 폰트)

문제점

 

최근 개발 중에 개발 중인 반응형 웹 페이지의 폰트를 pretendard 폰트로 바꾸는 작업을 진행하였습니다.

 

이때 이상하게 모바일로 들어갔을 때 IOS Safari에서 bold로 처리한 폰트들의 글꼴이 유독 굵게 보였는데요, 원래 IOS에서는 pretendard 폰트가 이렇게 보이는 게 맞는지 몰라 디자이너분께 보여줬는데, 폰트가 조금 이상한 것 같다고 말씀해 주셨습니다.

 

실제 OS별로 확인을 해봐도 안드로이드 기기에서는 정상적으로 출력이 되고, 유독 IOS Safari에서 이상하게 보이는 것 같아서 원인을 찾아보게 되었습니다.

 

font-synthesis 속성

font-synthesis는 CSS 속성 중 하나로, 웹 페이지에서 특정 글꼴이 볼드, 이탤릭, 또는 소문자 대체(small-caps) 스타일을 제공하지 않는 경우, 브라우저가 이러한 스타일을 자동으로 합성할지를 결정하는 데 사용됩니다. 즉, 글꼴이 해당 스타일을 지원하지 않더라도, 브라우저가 자체적으로 합성하여 해당 스타일을 흉내 낼 수 있게 해 줍니다.

 

즉 폰트 합성을 설정하면 브라우저가 폰트를 처리할 때 `굵기(weight)` `기울임꼴 등의 스타일(style)` `작은 대문자(small-cap)` `위치 변형(position)` 등의 값이 글꼴에 정의되어있지 않다면 브라우저가 이를 자체적으로 이를 계산하여 처리할 수 있도록 지원합니다. 

 

font-synthesis

 

 

IOS Safari에서의 폰트 합성 문제

258050 – synthetic bold applied on top of bold font variant?

 

• 해당 문제는 Safari 17 버전에서 더욱 많이 보고되고 있으며, 특히 font-weight: 600 및 700에서 문제가 발생하고 있습니다.
• 비슷한 문제를 겪고 있는 사용자가 Safari에서 의도치 않은 합성 폰트 스타일이 적용되는 현상을 경험하고 있습니다.

 

 

 

위 애플 버그리포트에서 보고된 것과 같이 특정 폰트 weight에서 기본 폰트 굵기에 추가적으로 font-synthesis의 폰트 합성이 중첩돼서 적용되는 문제가 발생하였는데요, 위 버그와 동일한 증상이 제가 적용한 pretendard 폰트에서 비정상적으로 폰트 굵기가 굵게 보이는 현상이 발생한 상황이었습니다. 

 

해결 방법 

 

body, html {
  font-synthesis: none;
}

 

 

해결 방법은 간단하게 전체 페이지에 font-synthesis를 사용하지 않도록 설정해 주면 됩니다. 

 

 

마무리

 

오늘은 간단하지만 이유 원인을 찾기 힘들었던 Safari에서 폰트 굵기가 비정상적으로 굵어지는 문제에 대해 해결방법을 찾아서 적용한 부분을 공유드렸습니다.

 

해당 issue를 혹시나 겪고 계시면 도움이 되었으면 좋겠습니다. 

 

감사합니다.