본문 바로가기
PC

나눔바른고딕 웹폰트 쉽게 적용하는 방법을 알려드릴께요~

2015. 10. 20.

블로그나 사이트를 운영하다 보면 나눔바른고딕 웹폰트를 적용하고 싶을 때가 있죠? 네이버에서 고맙게도 무료로 폰트를 뿌렸는데 그중에서 가장 예쁜 폰트가 나눔바른고딕입니다.




가독성을 높여주고 깔끔해보여서 많은 분들이 사용하는데, 문제는 이 폰트가 PC에 설치 되어 있지 않으면 그 방문자는 나눔바른고딕 글씨체를 못본다는 것이에요.

따라서 티스토리 기준으로 웹폰트를 적용하는 방법을 알려드리겠습니다.




1.웹폰트와 일반 폰트의 구별.


웹폰트의 가장 큰 특징은 인터넷에서 폰트를 읽어온다는 것이에요. 그래서 누가 들어와도 폰트가 출력이 되죠. 따라서 운영자가 방문자 모두에게 글씨체를 보여주고 싶을 때 적합합니다.


하지만 단점도 있습니다. 바로 접속 속도라 느려질 수 있다는 것이죠. 인터넷으로 부터 나눔바른고딕 웹폰트를 불러오면 그만큼 트래픽이 더 소모되고 블로그에 이것저것 덕지덕지 붙인 상태라면 더더욱 접속 속도라 느려져서 사람들이 나갈 수 있습니다. 글도 읽지 않고요..


따라서 웹폰트를 쓰더라도 빠른 곳에서 빌려 쓰는 것이 좋습니다.(저도 티스토리 기준으로 빠르게 사용할 수 있는 곳을 알려드릴께요~)




2.티스토리에서 웹폰트 적용하는 방법


(1)다음의 코드를 skin.html의 <head>아래에 삽입해줍니다.


<link href='https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css' rel='stylesheet' type='text/css'>


(2)그리고 style.css의 첫줄에 아래의 코드를 넣습니다.


@import url(https://cdn.rawgit.com/openhiun/hangul/14c0f6faa2941116bb53001d6a7dcd5e82300c3f/nanumbarungothic.css);




(3)마지막입니다. 이부분이 많이 어려울 수 있는데요. 

Style.css에서 원하는 부분에 'Nanum Barun Gothic'를 넣어줘야합니다.


즉 컨트롤+F를 누르시면 찾기창이 뜨는데요. 여기에 font-family 라고 입력하고 찾아보면 여러개의 font-family를 발견할 수 있습니다.

제목.본문,사이드 폰트 등등 여러 장소가 나오는데요. 원하는 곳에 다음과 같이 수정해 주면 됩니다.


font-family: 'Nanum Barun Gothic', sans-serif;


이런식으로 수정해주시면됩니다.


그럼 이제 나눔바른고딕 웹폰트가 똭!! 나옵니다.

알고나면 쉽지만, 모르면 어려울 수 있는 폰트적용하기 팁이었습니다.^^



댓글