[Plug-in] webfont load callback - fontfaceonload.js

웹사이트 제작시 많이 사용되는 webfont는 시스템 폰트보다 훨씬 큰 용량을 차지한다. 그런 이유로 웹폰트 제작업체는 webfont의 로딩후 콜백함수를 호출하는 등 작업에 필요한 API를 제공하는게 보통이다. 하지만 API를 제공하지 않는다면?

페이지를 정상적으로 렌더링하려면 이미지, css, 자바스크립트 등 많은 resource 파일들이 정상적으로 먼저 로딩되어야 한다. 하지만 큰용량을 차지하는 webfont의 로딩을 관리하는 API가 제공되지 않는다면 생각지 못한 오류를 만날 수 있다.

fontfaceonload.js

fontfaceonload.js (github.com/zachleat/fontfaceonload) 플러그인은 webfont가 정상적으로 로딩되었는지 실패하였는 지에 따라 콜백함수를 실행할 수 있도록 API를 제공한다.

Usage

@font-face를 선언하는 css

@font-face {
    font-family: My Custom Font Family;
    /* src and other properties as normal */
}

라이브러리를 포함시킨 후 스크립트 호출

FontFaceOnload("My Custom Font Family", {
    success: function() {},
    error: function() {},
    timeout: 5000 // in ms. Optional, default is 10 seconds
});

예시

아래와 같이 css에 @font-face를 사용하여 웹폰트를 사용할 수 있도록 선언한다

@font-face {
	font-family: 'ssm';
	font-style: normal;
	font-weight: normal;
	src: url('/fonts/Sweet-SweetSans-Medium.eot');
	src: local('※'),
		 url('/fonts/Sweet-SweetSans-Medium.woff') format('woff'),
		 url('/fonts/Sweet-SweetSans-Medium.ttf') format('truetype'),
		 url('/fonts/Sweet-SweetSans-Medium.ttf') format('svg');
}

html문서의 head 태그에 fontfaceonload.js를 포함하고 아래와 같이 FontFaceOnload 함수를 호출하면 'ssm' 웹폰트의 로딩이 끝난 후 gnbMargin() 함수를 호출할 수 있다.

	<script type="text/javascript" src="js/fontfaceonload.js"></script>
	<script>
	$(document).ready(function(){
		FontFaceOnload( "ssm", {
			success: function() {
				document.documentElement.className += "ssm";
				if($('html').hasClass('ssm')){
					gnbMargin();
				}
			}
		});
	});
	</script>