넥슨 고딕 웹폰트 적용방법

넥슨 고딕은 레벨 1과 레벨 2로 나눠져 있습니다. 장평(글의 가로길이)가 짧은 것이 넥슨 고딕 Lv2입니다. 개인적으로는 레벨 2가 더 웹폰트에 적합하고 예쁘다고 생각하고 있습니다. 넥슨 고딕 레벨 1도 예쁘지만, 타이틀에 더 적합하다고 생각합니다.

겉으로 드러난 건 없지만, 최근에 작업이 많아진터라 업데이트가 늦어지고 있습니다. 티스토리 블로그를 포함헤 웹폰트는 어떤 웹사이트에서도 쉽게 적용할 수 있습니다. 공식 홈페이지에서 별도로 웹폰트 파일을 다운받을 수 있으나 수고를 덜고 싶으신 분들을 위해 하단에 파일을 업로드합니다.

 

0123

넥슨 Lv.2 고딕 웹폰트 적용방법

넥슨 Lv.2 고딕은 위와 같은 폰트입니다. 다양한 분야에서 두루 사용할 수 있는 서체입니다. 티스토리를 예로 들어 적용방법을 알아보겠습니다. 다른 웹사이트도 동일하며, 워드프레스도 같은 원리로 적용이 가능합니다. 가장 빠르게 폰트를 적용시킬 수 있는 폰트 페이스 방법으로 적용합니다.

@font-face {
  font-family: "NEXON Lv2 Gothic";
  src: url("./images/NEXON_Lv2_Gothic.eot");
	src: url("./images/NEXON_Lv2_Gothic.woff");
	src: url('./images/NEXON_Lv2_Gothic?#iefix') format('embedded-opentype'),
}

@font-face {
  font-family: "NEXON Lv2 Gothic Light";
  src: url("./images/NEXON_Lv2_Gothic_Light.eot");
	src: url("./images/NEXON_Lv2_Gothic_Light.woff");
	src: url('./images/NEXON_Lv2_Gothic_Light?#iefix') format('embedded-opentype'),
}

@font-face {
  font-family: "NEXON Lv2 Gothic Bold";
  src: url("./images/NEXON_Lv2_Gothic_Bold.eot");
	src: url("./images/NEXON_Lv2_Gothic_Bold.woff");
	src: url('./images/NEXON_Lv2_Gothic_Bold?#iefix') format('embedded-opentype'),
}

 

티스토리의 경우 위의 @font-face를 복사하여 자신의 스킨편집 → CSS 부분 상단의 적당한 위치에 작성합니다. 그리고 다운 받은 웹폰트 파일을 스킨편집에 업로드하면 기본적으로 웹폰트를 불러올 수 있게 됩니다.

B_WEB_NEXON_Lv2_Gothic.zip

3.87MB

그 다음에 font-family 속성에 들어가는 폰트명에 "NEXON Lv2 Gothic"으로 변경하거나 맨 앞에 추가해주면 웹폰트를 변경할 수 있습니다. 보통은 알다시피, 이렇게 적용이 가능하며, 3가지 종류의 볼륨을 제공합니다. 다만 별도의 Bold 속성도 적용되며 앤티앨리어싱이 적용되기 때문에 훨씬 부드러운 텍스트 표현이 가능해집니다.

그와는 반대로 Bold 속성이 아닌 폰트 자체의 볼륨인 "NEXON Lv Gothic Bold"로 불러오면 훨씬 선명한 폰트를 표현할 수 있게 됩니다.

정말 많은 웹폰트를 직접 적용해봤습니다만, 가장 마음에 드는 웹폰트라고 생각합니다. 무엇보다도 일본어(히라가나, 가타가나)도 표현이 가능하기 때문에 굉장히 활용도가 높고 기본에 충실한 단단한 웹폰트 고딕서체라고 생각합니다.

 

넥슨 Lv.2 고딕 웹폰트 예쁘게 적용하는 방법

사용자에 따라서 임의로 자간 등을 설정하셔도 좋겠지만, 기본적으로 자간(Letter-spacing)은 0;으로 설정하는 것이 가장 깔끔하고 예쁘게 표현됩니다. 특히, 본문에는 가장 기본값으로 설정하는 것이 무난하고 선명합니다. 타이틀과 같은 부분은 부분적으로 자간을 줄이거나 늘릴 수 있습니다.

횡간의 경우에는 가독성을 위해서는 기본값인 1.8을 권고하지만, 1.4 이상부터는 깔끔하게 표현이 되고 있습니다. 나눔스퀘어 폰트와는 달리 작은 글씨에도 선명하게 표현되는 장점이 있습니다.

예시)

위의 부분은 타이틀, 아래 부분은 본문 속성으로 적용되었습니다.

위와 같이 굉장히 깔끔하면서도 세련된 느낌의 넥슨 고딕서체를 웹폰트로 적용할 수 있습니다.