웹 폰트 woff2 맥/아이폰 사파리 적용


블로그의 본문 폰트를 고운바탕으로 바꿨다.

css 만 바꾸면 되는 간단한 건데 시간이 꽤 걸렸다.

 

 

 

웹 폰트 적용시 크롬과 사파리의 문제

구글폰트의 고운바탕 웹폰트를 적용했다.

그런데 크롬에는 잘 나오는데 맥 사파리나 아이폰 사파리에는 고운바탕 폰트가 나오지 않았다.

눈누에 있는 웹폰트를 적용하니 크롬과 사파리 둘다 잘 나왔다.

 

 

 

웹폰트 woff 2.0 지원 브라우저

이 둘의 차이는 구글폰트의 웹 폰트는 woff 버전2이고, 눈누는 woff 이다.

woff2.0 리포트를 보니 사파리 10 이상에서 지원된다고 되어 있다.

내 M1 맥북에어의 OS와 사파리는 최신 버전으로 macOS Big Sur (11.6) 이고 사파리는 15.0이다.

 

 

사파리는 woff 2.0 을 지원안하는 것 같다

간단한 html 로 css를 짜서 로칼로 테스트 해보았다.

사파리는  woff 2.0 에는 동작을 안한다.  내 맥 브라우저가 문제인가 했는데 아이폰의 사파리도 마찬가지이다.

 

 

woff와 woff2 파일 크기 비교

웹 폰트는 사용자가 볼 때 다운로드 되어야 정상적으로 볼수 있으니 파일크기가 중요하다. woff 2는 파일크기 획기적으로 줄었다고 한다.

네이버 포스트를 처음 만들때 웹 폰트를 작용하려고 검토했었는데 파일 크기 때문에 고민했던게 기억났다. 그래서 고운바탕 폰트 파일을 다운로드 받아서 비교해보았다.

아! woff2는 파일크기가 정말 작다.  9KB밖에 안된다. 이 정도면 웹 폰트 사용하는데 무리가 없다.

 

  • ttf: 1.8MB
  • otf: 419kb
  • woff: 1.8MB
  • woff2: 9kb

 

 

 

웹 폰트를 woff 와 woff2 지원하게

woff와 woff2를 동시에 제공하는 방법이 있다.

폰트 이름을 같게 해서 고운바탕 웹 폰트를 1개로 만들면 되었다.

@font-face {
    font-family: 'Gowun Batang';
    src: url('https://fonts.gstatic.com/s/gowunbatang/v1/ijwSs5nhRMIjYsdSgcMa3wRhWbH4yuF3PCOgtbXrpkZDCDpAGUeXohsoWQ.0.woff2') format('woff2'), url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

 

찾아보니 구글 폰트에서 제공하는 웹 폰트 css 는 한글 글자에 따라 css를 제공한다고 한다.

그래서 하나로 만든 고운바탕 css를 없애고 각각 추가했다.

대신 폰트 이름을 구글 폰트에서 제공하는 이름으로 일치 시키고 내 스타일에 같은 이름을 적용했다.

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

@font-face {
    font-family: 'Gowun Batang';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunBatang-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

 

스펙상 맥과 아이폰 사파리에서 woff2 를 지원하는게 맞을 텐데 내가 뭘 잘 못한것인지 모르겠다. 검색해도 안나오길래 일반 블로깅해 둔다.







추천 글





0 글이 마음에 드시면 하트를 눌러주세요~ 블로거에게 힘이 됩니다 (SNS/로그인/광고 관련 없습니다)



당신이 좋아할 만한 글







108배 절운동 절수행터
4.9
자동으로 인식해서 음성으로 세주는 108배 카운터












Add a Comment

이메일 주소는 공개되지 않습니다.

























이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받고 있습니다.



채널추가 버튼을 누르면 카카오톡 뷰에서 볼 수 있습니다.