그 외 정보

넥슨 레벨업 웹 폰트 적용방법

게임어바웃 2020. 10. 28. 22:21

넥슨 Lv.2 고딕

넥슨 Lv.2 고딕

티스토리 블로그를 시작하면서 가독성 있는 깔끔한 폰트를 찾다가 유료 폰트를 구매하기에는 뭔가 아쉬운 마음이 들었다. 무료 폰트 중에 가독성 높고 깔끔한 고딕 글꼴을 찾다가 발견한 것이 넥슨에서 제공하는 상업용으로도 사용 가능한 넥슨 레벨업 폰트다. 그중에서도 레벨 1과 레벨 2가 있는데 고민 끝에 레벨 2를 선택했다.

 

 

넥슨 레벨 업 무료 폰트 5종 다운로드 모음 (배찌체, 메이플 스토리, 풋볼 고딕, Lv.1 고딕, Lv.2 고

변경된 사용 정책 넥슨 폰트를 자유롭게 사용하실 수 있도록 사용 정책이 변경되었습니다. 제공되는 모든 서체는 개인, 학교, 공익목적의 자선, 구호단체에서 비상업적인 용도로만 사용 가능했

travous.tistory.com

 

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

넥슨 Lv.2 고딕은 다양한 분야에서 두루 사용할 수 있는 넥슨 Lv2. 고딕 서체 온/오프라인등 적용점에 구애받지 않고, 젊고 귀여운 넥슨 Lv.1 고딕보다 성숙하고 어른스러운 느낌의 서체다. 웹폰트를 적용하는 방법은 폰트 페이스를 사용하여 적용할 것이다.

@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' 변경하고 여러 폰트명이 있다면 가장 앞쪽에 입력하자. 넥슨 레벨업 Lv.2 고딕 폰트는 세 가지의 Light, Normal, Bold 속성이 존재한다.

 

Bold 속성을 적용할 때 앤티앨리어싱이 적용되어 가장자리가 훨씬 부드러운 텍스트 표현이 가능하고, 'NEXON Lv2 Gothic Bold' 로 적용 시 더욱 선명한 폰트로 표현이 가능하다.

 

넥슨 Lv.2 고딕 웹폰트를 본문에 적용한 스크린샷

가독성

블로그 환경에 따라 자간 등을 설정함에 따라 가독성이 차이 나는데 자간:Letter-spacing은 0으로 설정하는 것이 가장 무난하고 베스트로 표현 된다. 횡간의 경우 가독성을 위해서 기본값인 1.8을 권장하고 있으며 1.4 이상부터는 깔끔하게 표현이 되고 있다.