XE/라이믹스 스킨을 제작하게 되면 가장 문제되는게 환경마다 다른 폰트에 따른 미묘한 뒤틀림을 볼 수 있습니다.
이에 따라 대부분의 스킨 개발자분들께서는 웹폰트(브라우저용 폰트)를 사용하게 되는데 폰트를 적용하는 방법은 2가지가 있습니다.
1. 구글 등에서 CDN으로 제공하는 웹폰트
2. 레이아웃/게시판 스킨 내 자체 적용 웹폰트
이번에는 2가지의 방법을 전부 설명해드리도록 하겠습니다.
1. 외부서버(CDN)를 이용한 웹폰트 적용
구글에서 제공하는 웹폰트를 이용합니다.
(사용방법은 비슷하니 구글로 설명합니다)
https://fonts.google.com/earlyaccess
해당 사이트에서 적용하고자 하는 폰트(나눔고딕/NanumGothic)를 검색합니다.
검색한 폰트에서 제공하는 코드를 CSS파일 내부 상단에 넣습니다.
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);
그리고 폰트를 적용하고자 하는 범위(ID/클래스)에 폰트를 선언해 줍니다.
font-family: ‘Nanum Gothic’, sans-serif;
2. 레이아웃/게시판 스킨 내 자체 적용
아래의 나눔고딕 웹폰트를 다운로드 받습니다.
다운받으신 압축파일을 원하는 레이아웃/게시판 스킨 내에 풀어줍니다.
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번의 장점과는 반대로 폰트를 직접 로드하기 때문에 트래픽에 불리할 수 있습니다.
(제공한 웹폰트 파일도 웹용으로 최적화하였기 때문에 트래픽에 큰 영향이 없을 듯 합니다만..)
하지만 폰트 로드로 인한 문제는 없다는 장점이 있습니다.
두 방법의 장단점은 분명 존재합니다.
자신의 사이트에 맞춰 적용하셨으면 합니다.