[CSS] 웹폰트 적용하는 방법2

블로그 포스팅 하던 초기 “[CSS] 웹폰트 적용하는 방법” 이라는 글을 쓴 적이 있습니다.

당시 웹폰트 적용에 관해 문의하시던 분들이 많아 한 때는 답변 드리느라 바빴던 적도 있었습니다. 당시 추천해드렸던 방법은 브라우저 별로 지원하는 폰트만을 서버에서 다운 받게 끔하는 방법이었습니다. 2013년 7월 글이었는데 벌써 5년이 되어가네요.

시간이 흐르면서 웹폰트에도 많은 발전이 있었습니다. 당시 한글 웹폰트의 큰 용량과 그에 따른 웹사이트 로딩 속도 저하 이슈에도 감수하면서 써왔습니다.

“웹폰트 적용하면 원래 좀 느려”

거의 당연 시 하던 말이었습니다. 하지만 이번에 Google Font에서 한국어 폰트를 지원하게 되었습니다.

아직 몇 가지 되진 않지만 장족의 발전입니다. Google Font에서의 한국어 지원이라는 의미는 용량과 속도에서 큰 이점을 가져간다는 것입니다.

지금까지 CJK(중국어+일어+한국어) 폰트는 모든 가용 범위 내의 문자를 포함하기 위해 용량이 MB단위로 형성되어있었습니다. 영문폰트가 아무리 커도 500KB이상을 넘지 못하는 것에 비하면 차이가 큽니다.

적용해보니 웹폰트를 사용하지 않는 웹사이트와 속도가 비등할 수준으로 로딩 속도가 빨라졌습니다. 이제 웹폰트 적용되었다고 느린건 핑계가 되겠네요. 이 블로그에도 웹폰트가 적용되어 있습니다.

적용 방법은 간단하고 2가지 방법이 있습니다.

HEAD 부분에 Link 태그 삽입

<head>
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
</head>

CSS 파일에 @import 추가

@import url('https://fonts.googleapis.com/css?family=Noto+Sans');

위 두가지 방법 중 하나만 정의하시면 되고 폰트는 아래와 같이 적용하면 됩니다.

body {font-family: "Noto Sans";}

위 예시는 블로그에 적용되어있는 본고딕(Noto Sans)을 기준으로 작성된 것이고 그외 다양한 한글 폰트를 적용하시려면 위 관련 링크에서 폰트명을 확인하신 후에 폰트 주소의 파라미터를 바꾸시면 됩니다.

freezner