사파리에서 폰트 CSS 안먹는 경우

https://dobiho.com/51598/ 

웹 폰트 woff2 맥/아이폰 사파리 적용 - dobiho on HCI

 

 

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

 

 

 

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

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

웹폰트 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;

}

 

 

 

 

https://dbreblog.com/31

[CSS] 웹사이트 사파리 브라우저에서 명조체로 보일 때 해결방법

 

사파리 브라우저에서 웹사이트 기본 폰트가 명조체로 보일 때 

 

웹사이트를 사파리 브라우저에서 볼 때 가끔 고딕체나 특정 폰트로 지정한 부분이 기본 명조체로 보여질 때가 있습니다.
사파리의 고유 기본 폰트명을 고딕체로 설정해주지 않아서 생기는 이슈인데요.

 

 

크롬 브라우저에서는 'Noto Sans'로만 지정되어있어도 텍스트가 고딕 폰트로 정상적으로 노출되지만,

 

 

사파리 브라우저에서는 이렇게 기본 명조체로 나타나게 됩니다.

 

 

해당 부분의 css 소스에서 'Apple SD Gothic Neo'를 추가하면 해결됩니다.

.text {font-family:'Noto Sans KR','Apple SD Gothic Neo',Sans-serif; }

 

위처럼 설정 시 '' 안에 들어간 폰트 순서대로 해당 폰트가 없는 경우 다음 폰트 순으로 보여집니다.

 

 

 

추가 후 정상적으로 고딕 폰트가 출력되는 것을 확인할 수 있습니다.