웹폰트 나눔고딕 적용법 (@font-face)

■ 웹폰트 호환성

 @font-face를 이용하여 웹폰트를 적용하기에 앞서서 호환성에 주의를 기울여야한다. WOFF형식의 파일에서는 IE 9.0부터 지원하며, 크롬, 파이어폭스, 오페라, 사파리에서도 버전에 따라 다를 수가 있따. EOT형식의 파일은 IE6~IE9까지 지원을 하며 나머지 브라우저에는 지원을 하지 않는다.

 그러므로 두가지 파일을 모두 다 적용시킨다면 큰 문제는 되지 않는다. 그럼 나눔고딕 폰트와 나눔고딕 Bold 폰트를 적용 시켜보도록 하자.

■ 폰트(나눔고딕) 다운로드

 웹폰트를 우선 다운을 받아야 쓸 수 있지 않은가? 친절하게도 많은 사이트에서 폰트를 쉽게 구할 수 있으며, 개인적으로 쓰는 웹폰트를 올려본다. 다운받아서 알맞은 경로에 넣어주자.

NanumGothic.eot

NanumGothic.woff

NanumGothicBold.eot

NanumGothicBold.woff

■ 웹폰트 경로 설정하기

 폰트를 사용하려면 Eclipse 프로젝트 안에 넣어줘야된다. 

 개인적으로 필자는 webapp -> resources -> font 폴더에 나눔고딕 폰트를 넣어주었다. 이제 사용하는 일만 남았다.

■ 웹폰트 사용하기

 웹폰트를 사용하는 방법에는 다양한 방법이 존재한다. 직접 style에서 불러서 사용해도 되고, css를 사용해도 된다. 필자는 css를 이용해서 웹폰트를 사용하고자 한다.

◆ Style.css

 Style.css라는 CSS를 생성하고 간단히 코딩을 해주었다.

body {

font-family:"NanumGothic";

src:url('/spring/resources/font/NanumGothic.eot');

src:url('/spring/resources/font/NanumGothic.eot?#iefix') format('embedded-opentype'),

url('/spring/resources/font/NanumGothic.woff') format('woff'),

url('/spring/resources/font/NanumGothic.svg#NanumGothic') format('svg')

src:local(※), url('/spring/resources/font/NanumGothic.woff') format('woff');

}

 아까 설정한 경로를 가져와 url에 담아주고 위에와 같이 작성해준다. body에 사용한 이유는 전체적으로 웹폰트(나눔고딕)을 적용하기 위함이다. 특정한 부분에만 사용을 하기 원한다면 body에서 빼주어 사용하면 가능하다.

 

◆ JSP에서 사용하기

 이제 css파일을 만들어 소스를 넣었다. 그러면 JSP에서는 어떻게 가져다 쓸 것인가? 바로 link를 이용하여 css를 가져다 사용하자.

<link rel="stylesheet" href="/spring/resources/css/style.css" />

 이렇게 적용을 하였다면, 이제 웹폰트 사용이 가능하다. 각각에 대해서 코딩을 하지 않고도 body 안에 있는 모든 글자들이 웹폰트인 나눔고딕으로 적용되어 보이게 된다.

 개인적으로 사용하는 방식이며, 다른 타인들이 사용하는 방법은 다를 수도 있다는 것을 명심하라.

관련글 더 보기

 2016/04/15 - 이클립스 폰트, 글자크기 바꾸기 (나눔고딕코딩)

 2015/10/14 - [이클립스] 주석 자동완성 기능 (Code Template)

 2015/07/07 - [이클립스] 한글 깨졌을 시, 인코딩(Encoding) 설정하기

 2015/07/07 - [이클립스] 배경색 & 테마 변경하기, 가독성을 높이자

↓ 공감 을 눌러주시면 블로거에게 큰 힘이 됩니다 !