나눔바른고딕(NanumBarunGothic) 웹폰트 적용

네이버 NanumBarunGothic(나눔바른고딕) 폰트를 웹폰트로 변환하여 홈페이지에 적용했다. 개발자들이 코딩 완성하면 이런 기분이겠구나. 다 해서 한 여섯 시간 이상 투입한 것 같다
http://onlinefontconverter.com/
위의 사이트에서 특정 폰트를 웹폰트로 변환시킨다.
나눔바른고딕을 예로 들자면 나눔바른고딕 TTF
~~혹은 OTF 파일을~~받으면 된다. 폰트 설치가 프로그램 설치형식이라면 제어판>글꼴에 가면 원본 파일을 찾을 수 있다. 혹여나 저작권 이슈로 논란이 될 수도 있으니 잘 확인해보고 사용하는 것이 좋을 것이다.
이 홈페이지에서 eot, woff, svg, otf 네 가지 형태로만 변환해서 개인 FTP 혹은 홈페이지에 업로드 하면 된다. 간편하게 font 폴더를 하나 만들어서 모아두는 것이 편할 거다. 워드프레스 사용자의 경우 style.css 가장 하단에 아래 코드를 넣어주면 된다. 가장 상위의 font 폴더에 eot, woff, svg, otf 이 폰트들을 넣어놨다면 아래 코드를 참조하여 경로를 지정해주면 된다.
나는 /font/NanumBarunGothic.eot 로 경로를 지정했다.

@font-face {
font-family: ‘Nanum Barun Gothic’ ;
font-style: normal;
font-weight: 700;
src: local(‘Nanum Barun Gothic Bold’), local(‘Nanum Barun Gothic-Bold’), local(‘NanumBarunGothic Bold’);
src: url(“/Font/NanumBarunGothicBold.eot”);?/*A*/
src: url(“/Font/NanumBarunGothicBold.eot?#iefix”) format(‘embedded-opentype’),??/*B*/
url(“/Font/NanumBarunGothicBold.woff”) format(‘woff’),?/*C*/
url(“/Font/NanumBarunGothicBold.ttf”) format(‘truetype’);?/*D*/
url(“/Font/NanumBarunGothicBold.svg”) format(‘svg’);?/*E*/
}

body, div, ul, li
{
font-family: ‘Nanum Barun Gothic’,sans-serif !important;
}

</style>

웹폰트는 각 브라우저별로 구분되어 적용되어야 한다. 위의 코드에 /*A*/ 형태로 기입해둔 것이 각각의 (아래) 브라우저에 대응하기 위한 코드이다. iOS만 별도로 지원하는 코드도 있다 (/*E*.) 일반 안드로이드 크롬 브라우저에서까지는 적용이 안되는 것으로 확인을 했는데 내가 잘 모르는 것일 수도 있다.
A : for ie 6 and older
B : for ie 7 & 8
C : for modern browsers
D : for less modern browsers but which can use otf
E : for iOs

@charset “utf-8″;

위 코드는 서버에서 폰트를 불러올 때까지 문자열이 깨지는 것을 방지하기 위한 코드이다.

body, div, ul, li
{
font-family: ‘Nanum Barun Gothic’,sans-serif !important;
}

또 위 코드는 전체 텍스트 중에 적용하고 싶은 범위를 지정하는 거다. 필요한 부분만 반영하면 된다. 가끔 위의 코드로 적용이 안 되는 부분이 있는데 그런 경우에는 해당 영역을 직접 찾아서 font-family 코드를 직접 넣어주는 것도 하나의 방법이다. font-family: ‘NanumBarunGothic’; 이런 형태로 말이다.

~~CSS 파일을 사용할 경우 아래의 코드를 활용하면 된다.~~?스타일 시트에 코드 적용 후 header.php에 아래 코드를 삽입해줘야 완료된다. <head> 와 </head> 사이에 넣어줘야한다.
아래의 CSS 파일은 다른 분이 잘 만들어둔 게 있어서 새로 만들기 귀찮아 그대로 가져다가 쓰긴 했는데, 상단의 스타일시트에 들어갈 내용들을 긁어다가 메모장에 붙여놓고 CSS로 저장하면 된다. 정확한 구성을 알고 싶으면 아래 주소 복사해서 브라우져에 붙여넣으면 어떤 내용으로 CSS를 구성해야하는지 알 수 있다.

html5css2018

이 블로그 검색

나눔바른고딕(NanumBarunGothic) 웹폰트 적용