Featured Lab

티스토리 블로그에 글 폰트를 원하는것으로 바꾸는 방법 가운데 네이버 나눔글꼴로 변경하는 방법에 대해서 오늘 정리해보았습니다.


저도 현재 실제로 나눔고딕 폰트로 적용해서 사용중인데요.


웹폰트로 나눔고딕 폰트를 적용해서 실제 방문자의 피씨에 나눔고딕이 깔려있지 않아도 나눔고딕으로 방문자 시선으로 보여지게 됩니다. (다만 티스토리 모바일 웹 설정한 경우의 모바일 화면에서는 제외.)


서버에 웹폰트를 올려놓고 스타일시트 선언하면 사실 해결되는 부분인데요. 접속자 증가하면 서버 부담도 생기고 또 굳이 유료로 서버 사서 웹폰트 운영하는것보다는 기본 폰트를 쓰는게 나을지도 모릅니다.


구글에서는 많이 사용하는 웹폰트를 오픈하여 가져다 쓸수 있게 제공하고 있습니다. (네이버 나눔고딕의 경우 early access로 제공)

https://fonts.google.com/earlyaccess


* 자세히 알고 싶다면 위 링크 접속후 Ctrl+F 찾기 하여 nanum gothic으로 검색하면 아래처럼 해당 선언 및 설명이 나올것입니다.


위 처럼 선언해도 되고, 아래처럼 넣어줘도 되는데요.

저의 경우는 아래와 같이 선언자 HTML상단에 구글 경로로 나눔고딕 쓸수 있도록 넣어주었습니다.

(관리자 > 꾸미기 > HTML/CSS편집)



다음으로 CSS가셔서 최상위 태그 선언문에 글자 스타일을 나눔고딕 명명해서 실제 쓸수있도록 선언해줍니다.

(저는 정확도를 위해 세가지 부분으로 ‘나눔고딕, ‘NanumGothic’, ‘Naunum Gothic’ 이렇게 3가지 폰트 이름으로 앞에 넣어줬어요. 그 뒤는 기존 사용하고 있는 폰트명을 두었습니다.)



실제 HTML을 불러오면 읽을때 가장 왼쪽부터 우선순위로 읽습니다. 위의 경우 ‘나눔고딕’이라는 웹폰트명이 없으면 다음 오른쪽 선언된 폰트명을 읽습니다. 그렇게 차례대로 인식여부를 판단하고 인식되면 그 폰트로 페이지(블로그)에 폰트로 불러오게 됩니다.


우리는 웹폰트로 지정했으므로 구글 서버에 이상있지 않는한은 잘 불러와질것입니다.ㅎㅎ (위쪽에 구글경로로 웹폰트 스타일시트 선언한 부분)



이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band