====== fontface/Web font ======


===== 기본 형태 =====
<code css>
/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
</code>

====== 변환 서비스 ======
  * [[http://people.mozilla.com/~jkew/woff/|sfnt2woff]] : TTF 2 Woff {{:html:css:sfnt2woff.7z|윈도우 실행파일}} {{:html:css:woff-code-2009-10-04.zip|소스}}
  * [[http://www.eotfast.com/|EOT Fast]]] : TTF 2 EOT {{:html:css:eotfast-2010-02-22.zip|윈도우 실행파일}}
  * [[http://www.font2web.com/|Font2Web - Your Online Font Converter Converting .ttf and .otf to .woff, .eot and.svg]] - 웹 서비스
  * [[http://ttf2eot.sebastiankippe.com/|ttf2eot]] TTF 2 EOT 웹 서비스


====== Cross Domain Problem ======
  * Chrome을 제외한 다른 일부 브라우저에서는 웹 폰트가 font-face 설정이 동일 Domain 혹은 그 SubDomain에서 온게 아니면 무시해버린다.
  * [[http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html|Fixing Firefox font-face cross dmain problem]]
  * [[http://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains|Access-Control-Allow-Origin 다중 설정]]
  * [[http://blog.jidolstar.com/920|IE11에서 AWS S3에 올라간 Font자원을 로드하지 못하는 문제 해결하기 -지돌스타 - 쿠키랩 블로그-]]

===== Apache 설정 =====
<code 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"
</code>
  * ''.woff''는 과거에는 ''font/woff''였으나 현재는 ''application/font-woff''로 MIME 타입이 변경되었다. [[https://ko.wikipedia.org/wiki/%EC%9B%B9_%EC%98%A4%ED%94%88_%ED%8F%B0%ED%8A%B8_%ED%98%95%EC%8B%9D|웹 오픈 폰트 형식]]
  * ''.otf''는 과거에는 ''font/otf''였으나 현재는 ''font/opentype'' 으로 변경되었다.
===== nginx 설정 =====
  * [[http://drawingablank.me/blog/font-mime-types-in-nginx.html|Font mime types in Nginx ◔_◔ Drawing a Blank, by Mike Fulcher]]
  * ''mime.types''
<code>
font/ttf                      ttf;
font/opentype                 otf;
application/font-woff         woff;
application/font-woff2        woff2;
application/vnd.ms-fontobject eot;
</code>

====== 특정 영역만 적재 ======
  * ''unicode-range'' 로 특정 영역만 적재가 가능하다. 2012년 현재 IE 9+, Webkit 계열만 지원.
<code css>
@font-face {
  font-family: foo;
  src: url('foo.ttf');
  unicode-range: U+31-33;
}
</code>

====== 참조 ======
  * [[https://blog.banksalad.com/tech/font-preload-on-safari/|지연 시간 없이 웹폰트 서빙하기 - Feat. Safari & Edge functions | 뱅크샐러드]] : 최적화
  * [[http://naradesign.net/wp/2012/06/19/1830/|» 웹 폰트 문제 해결. @font-face troubleshooting.]] : @font-face를 가장 잘 설명한 듯.
  * [[http://siana.tistory.com/211|샷타이거's Simple Blog :: CSS 폰트 : 웹안전 폰트와 다운]]
  * [[https://developer.mozilla.org/en/css/@font-face|Mozilla Docs - @font-face]]
  * [[http://msdn.microsoft.com/en-us/library/ms530757%28VS.85%29.aspx|MSDN @font-face]]
  * Firefox/Safari/Chrome/IE9이상 최신 버전들은 WOFF 포맷 지원
  * IF8 이하는 EOT 포맷만 지원
  * [[https://fonts.google.com/|Google Fonts]]
  * [[http://www.google.com/webfonts|Google WebFonts]], [[https://www.google.com/webfonts/earlyaccess|Google WebFonts EarlyAccess]]
  * http://fontface.kr : 나눔글꼴 웹폰트 지원
  * http://api.mobilis.co.kr/webfonts/ : 다양한 오픈소스 웹 폰트 지원
  * http://www.nfont.co.kr/ : 상용 웹 폰트 서비스
  * [[http://frends.kr/topics/webfont-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0/|Webfont 사용하기 | FRENDS.KR]]
  * [[http://sixrevisions.com/css/font-face-web-fonts-issues/|How to Bulletproof @font-face Web Fonts]]
  * [[http://mygony.com/archives/3722|웹 폰트를 사용한 아이콘]]
  * [[http://blog.iolo.kr/500|독거노인 개발자의 우울 :: Typekit 웹폰트로더 활용]]
  * [[https://github.com/typekit/webfontloader|typekit/webfontloader]] : 웹폰트가 로딩되기전 기본 폰트로 보여주고, 로딩 후 웹폰트로 바꿔준다.
  * [[http://www.fontsquirrel.com/tools/webfont-generator|webfont generator]] TTF글꼴을 업로드하면 DATA-URI로 생성해줌
  * [[http://mytory.net/2016/06/15/webfont-best-practice.html|웹 폰트를 로컬 스토리지에 저장하는 기법 - 캐시 안정성 증가, 글꼴 깜빡임 현상 제거]]
  * [[https://taegon.kim/archives/5528|한국어와 웹 폰트에 관한 6.1가지 사실]]
  * [[https://spoqa.github.io/2017/02/15/using-shs-as-webfonts.html|스포카 한 산스 웹폰트로 사용하기]]
  * [[http://ppss.kr/archives/95221|한국어와 웹 폰트에 관한 6.1가지 사실]]
  * [[http://fontawesome.io/|FontAwesome]]
  * [[https://transfonter.org/|Online @font-face generator — Transfonter]]