블로그의 본문 폰트를 고운바탕으로 바꿨다.
css 만 바꾸면 되는 간단한 건데 시간이 꽤 걸렸다.
 

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

구글폰트의 고운바탕 웹폰트를 적용했다.
그런데 크롬에는 잘 나오는데 맥 사파리나 아이폰 사파리에는 고운바탕 폰트가 나오지 않았다.
눈누에 있는 웹폰트를 적용하니 크롬과 사파리 둘다 잘 나왔다.
 
 
 

웹폰트 woff 2.0 지원 브라우저

이 둘의 차이는 구글폰트의 웹 폰트는 woff 버전2이고, 눈누는 woff 이다.
woff2.0 리포트를 보니 사파리 10 이상에서 지원된다고 되어 있다.
내 M1 맥북에어의 OS와 사파리는 최신 버전으로 macOS Big Sur (11.6) 이고 사파리는 15.0이다.
 

• Google Chrome (36+), Chrome for Android(36+), Opera (24+), Samsung Internet (4+), QQ Browser (1.2+) (all Blink-based)
• Mozilla Firefox (39+)
• Microsoft Edge (14+)
• Safari (10+, on Sierra or later) and iOS safari (10.2+)

사파리는 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 를 지원하는게 맞을 텐데 내가 뭘 잘 못한것인지 모르겠다. 검색해도 안나오길래 일반 블로깅해 둔다.