[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선
웹폰트 용량은 생각보다 크다.
이미지는 경량화하는데 폰트는 왜 안하는가?
서버에 올려 사용하는 것은 추천하지 않는다.
안정적이지만 용량이 매우 크기때문이다.
웹폰트 로드방식
-
링크
-
CSS import
-
웹폰트 로더
link
css 파일보다 앞에 link를 추가한다.
css 파일보다 먼저 로드할 수 있다.
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
CSS import
로딩이 느리다.
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
webfont.js
세밀한 컨트롤이 가능하다.
웹폰트 로더를 통한 [동기] 방식
-
비동기 방식에 비해 렌더링이 느림
-
폰트가 먼저 로드되게하기 위해서는 동기방식을 사용해야한다.
<style>
body {
font-family: "Nanum Gothic", sans-serif;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js"></script>
<script type="text/javascript">
WebFont.load({
// For google fonts
google: {
families: ['Droid Sans', 'Droid Serif']
},
// For early access or custom font
custom: {
families: ['Nanum Gothic'],
urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
}
});
</script>
웹폰트 로더를 통한 [비동기] 방식
- 특정 브라우저에서 재 렌더링 시 화면이 깜빡이는 FOUT 현상이 있음
<style>
body {
font-family: "Nanum Gothic", sans-serif;
}
</style>
<script type="text/javascript">
WebFontConfig = {
custom: {
families: ['Nanum Gothic'],
urls: ['http://fonts.googleapis.com/earlyaccess/nanumgothic.css']
}
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1.4.10/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>
좀더 빠르게 로드하는 방법
-
Load Google Fonts First
-
<head>태그의 가장 첫번째에 import 코드를 추가한다.(css 파일보다 앞에)
-
-
최대 2개의 폰트만 사용하자
-
폰트옵션도 여러개를 로드하는것과 동일하므로 디폴트 스타일만 선택한다.
-
폰트가 많을 수록 로드가 오래걸린다.
-
- 구글 웹 폰트에서 빠른 로드가 되는 폰트를 선정
- 한줄로 로드하는 방식 사용 (여러줄넣을 필요가 없다.)
<link href="http://fonts.googleapis.com/css?family=Open+Sans|Oswald" rel="stylesheet" type="text/css">
[웹폰트] 올바른 방법으로 로딩하자. - 사이트 로딩 속도 개선
https://web-atelier.tistory.com/43