웹페이지 적용

CSS 에서 웹폰트 사용자 정의

/* 각 항목 설명 */
/* 폰트 경로는 풀경로를 사용하는 것을 원칙으로 한다. */
@font-face {
    font-family: MyHelvetica;
    src:url(HelveticaNeue-Regular.eot); /*IE9 호환성 보기*/

    src:local("Helvetica Neue"), /*로컬 서체 Full Name*/
        local("HelveticaNeue-Regular"), /*로컬 서체 Postscript Name*/

        url(//static.plaync.co.kr/font/NanumGothic-Regular.eot?#iefix) format("embedded-opentype"), /*IE 6-8*/
        url(//static.plaync.co.kr/font/NanumGothic-Regular.woff2) format("woff2"), /*WOFF ver2*/
        url(//static.plaync.co.kr/font/NanumGothic-Regular.woff) format("woff"), /*표준 브라우저*/
        url(//static.plaync.co.kr/font/NanumGothic-Regular.ttf) format("truetype"), /*IE를 제외한 대부분의 브라우저*/
        url(//static.plaync.co.kr/font/NanumGothic-Regular.svg#NanumGothicRegular) format("svg"); /*구버전 모바일 브라우저*/
}

/* 일반적인 사용법 */
@font-face {
    font-family: webNanumGothic;
    font-style: normal;
    font-weight: 400;
    src: url(//static.plaync.co.kr/font/NanumGothic-Regular.eot);
    src: local("※"),
       url(//static.plaync.co.kr/font/NanumGothic-Regular.eot?#iefix) format("embedded-opentype"),
       url(//static.plaync.co.kr/font/NanumGothic-Regular.woff2) format("woff2"),
       url(//static.plaync.co.kr/font/NanumGothic-Regular.woff) format("woff");
}

local() 속성

• 웹 폰트를 참조하기 전에 방문자의 컴퓨터에 설치 된 서체를 찾아 표현하는 local() 속성
• IE6~IE8이 local() 값을 처리하지 못하는 특징을 이용하여 woff 글꼴을 추가로 요청하지 않도록 해준다.
• 로컬 서체를 로딩조차 못하는 웹 브라우저들이 존재한다. (예를들어 IE6-8은 src 속성을 지원 안함)
• 운영체제/웹 브라우저 별로 참조하는 로컬 서체의 이름이 다르다.
• local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것.

• 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.

• 결론 : 로컬 서체의 참조는 아래 font-family에서 지정하고 @font-face에서는 참조하지 않는 방식을 사용

CSS 적용

• 외부자원 참조하기 이전에 시스템 글꼴을 우선 참조할 수 있도록 만들어준다.
• "나눔고딕 NanumGothic" 두번 적은 이유는 영문으로만 작성했을때 제대로 표시하지 못하는 브라우저 있기 때문. 한글 이름이 있을 경우 표기 해준다.
• 순서 : 한글폰트명, 영문폰트명, 웹폰트패밀리명, 폰트타입(serif, sans-sreif)

body{ font-family:"나눔고딕", "Nanum Gothic", webNanumGothic, sans-serif }

주의 ie9

• IE9는 @media규칙 내부에 @font-face 허용 하지 않으므로 @media규칙 외부에 작성한다
• 아래 코드는 IE9에서는 허용되지 않는다.

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
    @font-face{
        font-family:webNanumGothic;
        src:url(//static.plaync.co.kr/font/NanumGothic-Regular.eot);
        src:local(※), url(//static.plaync.co.kr/font/NanumGothic-Regular.woff) format(‘woff’)
    }
    body{font-family:나눔고딕, NanumGothic, ng}
}