.
[웹폰트] font-face 속성 지정 방법, 구글 CDN과 직접 파일 관리의 차이 본문
https://wit.nts-corp.com/2017/02/13/4258
웹폰트 사용하기 (웹폰트 101) « WIT - NTS UIT Blog WIT - NTS UIT Blog
1. 웹폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. 예를 들면, 웹폰트를 사용하지 않았을 경우 나눔고딕 폰트 미설치 PC에서는 기본 폰트인 돋움 폰트가 노출되고 나눔고딕 폰트 설치 PC에서는 나눔고딕 폰트가 노출됩니다. 하지만 웹폰트를 사용할 경우에는 나눔고딕 폰트 설치 유무와 상관 없이 나눔고딕 폰트가 노출됩니다. 2. 웹폰트를 사용하기 위해 알
wit.nts-corp.com
위 코드는 local(NanumSquareR) → local(NanumSquare) → url(NanumSquareR.eot) → url(NanumSquareR.woff) → url(NanumSquareR.ttf) 순으로 폰트를 찾습니다.
만약 나눔스퀘어 폰트가 설치되지 않은 PC 사용자가 크롬브라우저를 통해 웹 사이트에 접속하면 local(NanumSquareR) → local(NanumSquare) → url(NanumSquareR.eot) → url(NanumSquareR.woff) 순으로 이동하여 NanumSquareR.woff 파일이 적용 됩니다. 왜냐하면 크롬브라우저에서는 .eot파일을 지원해주지 않기 때문에 불필요한 다운로드가 일어난다.
이러한 불필요한 다운로드를 막기 위해서 format 속성을 사용합니다. format 속성을 사용하면 브라우저에서 지원 가능한 파일만 다운로드 받을 수 있습니다.
구글 CDN을 이용하면 별도의 @font-face를 정의하지 않아도 되기 때문에 편리하지만 서버에 직접 업로드하는 것보다 속도가 느리고 구글 CDN 서버가 제대로 동작하지 않을 때는 웹폰트를 제공받지 못 할 수 있습니다. 구글 CDN의 경우 @font-face에 WOFF와 WOFF2만 지원하므로 IE 6~8, IE 호환성 보기 모드에서는 웹폰트를 사용할 수 없습니다.
그래서 서버가 있으면 직접 서버에 업로드하여 사용하는 것이 좋습니다.
4-3. 로컬 서버 vs 구글 웹폰트 로드 차이
ttc : Mac 용
ttf: Window용
NotoSansCJK 용
NotoSansCJK 는... 다름이 아니라 중화, 일본, 한국어 두부깨짐 방지 구글 폰트라는 말......