1. Load Google Fonts First
구글 임포트 코드를 HEAD 태그의 가장 첫번째 - CSS 화일보다 더 앞 - 에 위치시킨다. 이렇게 하면 CSS보다 먼저 폰트를 로드한다.
2. Use Link Format
구글 웹폰트를 도딩하는 방법은 @import, 참조 링크, 자바스크립트 3가지이다. 참조 링크를 이용하면 HTML의 최상에 코드를 넣을 수 있으며, CSS 화일보다 가장 빠르게 로드할 수 있다.
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>3. Load Fewer Fonts
표제를 위한 볼드 타입과 기사를 위한 가독성이 좋은 폰트 - 최대 2개의 폰트를 선정하는 것이 좋은 생각이다. 폰트를 많이 선정할수록 로딩 시간은 더 길어진다.
4. Combine Font Codes
코드 한 줄에 여러 구글 폰트를 로드할 수 있다. 로드하려는 각 폰트마다 한 줄 코드를 넣을 필요가 없다. Open Sans와 Oswald 폰트를 결합하는 방법은 아래와 같다.
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'>5. Load Default Variants
폰트 옵션으로 폰트를 여러가지 스타일로 로드할 수 있다. 여러 옵션으로 로딩하는 것은 여러 폰트를 로드하는 것과 똑같다. 폰트의 디폴트 스타일을 선택하면 하나의 옵션으로만 로드된다.
예 - Open Sans 폰트를 기본 옵션으로 로드하면 15 로딩타임의 임팩트를 준다.
모든 옵션을 선택하면 10배의 페이지 로드 임팩트가 증가할 것이다.
6. Load Faster Fonts
구글 폰트의 페이지는 폰트가 로드하는 시간을 매우 명확히 하고 있다. 폰트 옆의 로드 측정기는 각 폰트가 얼마나 빨리 로드되는지 보여준다. 폰트를 더 많이 로드할수록 로드되는 시간은 더 길어진다. 몇몇 폰트는 무겁고 로드 시간이 거의 두배가 걸릴 수 있다. 그러므로 빠르게 로딩되는 폰트를 현명하게 선택하라. 예로, Open Sans는 15 페이지 임팩트이지만 Droid Sans는 25 이상이다!
7. Use Web Font Loader
단순히 CSS가 로드되기 전에 구글 폰트가 로드되길 원하고, 스타일되지 않은 텍스트가 번쩍거리지 않게 하려면, 웹 폰트 로더를 사용하라. 웹 폰트 로더는 사이트의 나머지가 로드되기 전에 로드하고, 스타일되지 않은 텍스트가 번쩍되는 것을 확실하게 피해준다. 비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하게 하기위해 동기 스크립트를 사용하는 것이 좋다.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
WebFont.load({
google: {
families: ['Open Sans', 'Oswald']
}
});
</script>