모바일에서 폰트가 깨질 때 해결법｜font-family 설정으로 호환성 높이기

글쓴이 /

모바일 웹에서 폰트가 제대로 적용되지 않거나 깨지는 현상, 겪어보셨나요? 다양한 기기에서도 일관된 타이포그래피를 유지하려면 폰트 선언을 제대로 해야 합니다. 이 글에서는 모바일 호환성을 높이기 위한 font-family 설정법을 소개합니다.

font-family 설정으로 호환성 높이기

모바일 웹을 제작하다 보면 폰트가 깨지거나 적용되지 않는 문제를 종종 겪게 됩니다. 특히 iOS와 Android, 다양한 브라우저 환경에서 각각 다르게 동작하기 때문에 한 번에 깔끔하게 해결하기 어렵습니다.
그렇다면 어떻게 해결할 수 있을까요?

✅ 핵심은 font-family 선언 순서

아래와 같은 코드를 사용하면 대부분의 모바일 환경에서도 안정적으로 폰트가 적용됩니다.

* {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
}
CSS

📌 코드 설명

  • ‘Pretendard’ : 사용하고자 하는 웹폰트 (로컬 또는 웹에서 불러오기 가능)
  • -apple-system, BlinkMacSystemFont : iOS 및 macOS의 시스템 폰트
  • system-ui, Roboto, ‘Helvetica Neue’, ‘Segoe UI’ : Windows 및 안드로이드 주요 시스템 폰트
  • ‘Apple SD Gothic Neo’ : 한국어 환경에서 iOS 기본 한글 폰트
  • sans-serif : 마지막 대체 폰트

이처럼 우선순위 있는 선언을 통해, 사용자의 브라우저에서 폰트를 불러올 수 없을 경우에도 다음 후보군 폰트가 적용되어 깨짐 없이 텍스트를 렌더링할 수 있습니다.

🧑‍💻 실제 적용 팁

  • 웹폰트를 사용할 때는 @font-face나 CDN으로 폰트를 불러오되, Fallback 폰트들을 꼭 함께 선언하세요.
  • 특히 iOS Safari에서의 -apple-system 선언은 필수입니다. 이게 없으면 Pretendard가 적용되지 않고 시스템 기본 폰트로 대체될 수 있습니다.
  • font-display: swap; 속성도 함께 고려하면 폰트 로딩 문제 해결에 도움이 됩니다.

✍ 마무리

모바일 폰트 적용 문제 해결이 필요한 이유는 모바일 웹에서도 일관된 디자인과 가독성을 유지하는 건 매우 중요합니다. 특히 텍스트가 깨지거나 엉뚱한 폰트가 적용되면 사용자의 신뢰를 떨어뜨릴 수 있습니다.
이번 포스팅에서 소개한 font-family 설정법으로 다양한 환경에서도 안정적인 타이포그래피를 구현해 보세요.

위로 스크롤