웹폰트(font-face) 사용 – 나눔고딕

작성자 카이네드

XE/라이믹스 스킨을 제작하게 되면 가장 문제되는게 환경마다 다른 폰트에 따른 미묘한 뒤틀림을 볼 수 있습니다.

이에 따라 대부분의 스킨 개발자분들께서는 웹폰트(브라우저용 폰트)를 사용하게 되는데 폰트를 적용하는 방법은 2가지가 있습니다.

 

1. 구글 등에서 CDN으로 제공하는 웹폰트

2. 레이아웃/게시판 스킨 내 자체 적용 웹폰트

 

이번에는 2가지의 방법을 전부 설명해드리도록 하겠습니다.

 

 

1. 외부서버(CDN)를 이용한 웹폰트 적용

구글에서 제공하는 웹폰트를 이용합니다.

(사용방법은 비슷하니 구글로 설명합니다)

 

https://fonts.google.com/earlyaccess

해당 사이트에서 적용하고자 하는 폰트(나눔고딕/NanumGothic)를 검색합니다.

스크린샷 2017-11-14 오후 1.32.34.png

검색한 폰트에서 제공하는 코드를 CSS파일 내부 상단에 넣습니다.

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

 

그리고 폰트를 적용하고자 하는 범위(ID/클래스)에 폰트를 선언해 줍니다.

font-family: ‘Nanum Gothic’, sans-serif;

 

2. 레이아웃/게시판 스킨 내 자체 적용

아래의 나눔고딕 웹폰트를 다운로드 받습니다.

NanumGothic

다운받으신 압축파일을 원하는 레이아웃/게시판 스킨 내에 풀어줍니다.

CSS파일 내부에 아래의 코드를 넣습니다.

@font-face {
  font-family: 'Nanum Gothic'; /* 폰트 이름 설정 */
  src: url('./fonts/nanumgothic.eot'); /* IE8 이하 */
  src: url('./fonts/nanumgothic.eot?#iefix') format('embedded-opentype'),
       url('./fonts/nanumgothic.woff2') format('woff2'),
       url('./fonts/nanumgothic.woff') format('woff'),
       url('./fonts/nanumgothic.ttf') format('truetype'),
       url('./fonts/nanumgothic.svg#nanumgothicregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

[수정할 부분]

font-family: ‘Nanum Gothic‘;
url(‘./fonts/

 

– font-family : 원하는 폰트명칭을 지정합니다.(단 1개만 지정)

– src : 폰트가 설치된 위치를 지정합니다.(브라우저마다 다른 폰트확장자가 필요)

– font-weight : 폰트의 기본 굵기를 지정합니다.(ex. blod 및 400 으로 설정시 해당 weight 에만 적용)

– font-style : 폰트의 기본 스타일을 지정합니다.(ex. italic 으로 설정시 italic 일때만 적용)

 

그리고 1번 방법과 마찬가지로 원하는 범위에 폰트를 선언해줍니다.

font-family: ‘Nanum Gothic’, sans-serif;

 

 

1번의 방법을 사용하면 되면 트래픽 절감과 코드 적용에 편리함을 장점으로 들 수 있습니다.

하지만 외부회선에 의해 동작이 문제가 될 수 있습니다.

사이트는 로딩되지만 폰트가 늦게 적용되는 문제가 발생할 수 있고 아예 적용이 안될 가능성도 있습니다.

 

2번은 1번의 장점과는 반대로 폰트를 직접 로드하기 때문에 트래픽에 불리할 수 있습니다.

(제공한 웹폰트 파일도 웹용으로 최적화하였기 때문에 트래픽에 큰 영향이 없을 듯 합니다만..)

하지만 폰트 로드로 인한 문제는 없다는 장점이 있습니다.

 

두 방법의 장단점은 분명 존재합니다.

자신의 사이트에 맞춰 적용하셨으면 합니다.

댓글 남기기