목차

fontface/Web font

기본 형태

/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}

변환 서비스

Cross Domain Problem

Apache 설정

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/opentype .otf
AddType application/font-woff .woff
AddType application/font-woff2 .woff2
 
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
 
# 아래와 같이 여러 도메인을 추가 할 수 있다는 얘기가 있는데, 실제론 작동하지 않았다.
Header add Access-Control-Allow-Origin "http://domain1.com"
Header add Access-Control-Allow-Origin "http://domain2.com"

nginx 설정

font/ttf                      ttf;
font/opentype                 otf;
application/font-woff         woff;
application/font-woff2        woff2;
application/vnd.ms-fontobject eot;

특정 영역만 적재

@font-face {
  font-family: foo;
  src: url('foo.ttf');
  unicode-range: U+31-33;
}

참조