티스토리 뷰
웹폰트 최적화에 대한 많은 글들이 있습니다. (아래 출처를 남겨놓겠습니다) 여기서는 결론만 남기도록 하겠습니다.
기본적인 사용법 (다른 사람이 만들어둔 CDN을 사용하는 경우)
1. 폰트 용량을 줄인다.
IE9부터 사용이 가능한 woof만 사용. (woof2는 더 용량이 적으며 IE/Edge를 제외한 브라우저에서 사용 가능)
폰트가 담겨진 CDN은 jsdelivr.net것만 사용한다. (여기가 안정적이고 속도가 빠릅니다)
2. CSS @import 방식이 아닌 <link href='***/***.css' rel='stylesheet'>로 최상단에 위치시켜 불러온다.
3. 2번까지 할 경우 IE는 랜더링 방식 문제로 인해 '기본 폰트에서 적용폰트'로 깜빡인다. 구글 webfont.js를 사용해 기본 폰트를 나타나지 않게 해 줍니다.
<!DOCTYPE>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/jeoungGyy/jg-free-fonts@master/dist/nanumsquareround/nanumsquareround.css"><!-- 다른 CSS 및 스크립트보다 상단에 둡니다. -->
<title>폰트 테스트</title>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['NanumSquareRound'],
urls: ['https://cdn.jsdelivr.net/gh/jeoungGyy/jg-free-fonts@master/dist/nanumsquareround/nanumsquareround.css']
}
});
</script>
<style>
* { margin: 0; padding: 0; font-family: 'Youth', 'Sans-serif'; font-weight: 400; font-size: 22px;}
body { padding: 150px;}
</style>
</head>
<body>
<div class="container">
<p>국가는 농지에 관하여 경자유전의 원칙이 달성될 수 있도록 노력하여야 하며, 농지의 소작제도는 금지된다. 모든 국민은 인간다운 생활을 할 권리를 가진다.</p>
</div>
</body>
</html><나눔스퀘어라운드체를 사용한 예>
4. 3번 방식으로 IE에서 해결되지 않는다면.
<script src="https://cdnjs.cloudflare.com/ajax/libs/fontfaceobserver/2.1.0/fontfaceobserver.standalone.js"></script>
<script>
document.documentElement.classList.add('blocking-time');
setTimeout(function() {
document.documentElement.classList.remove('blocking-time');
}, 200)
var font = new FontFaceObserver('NanumSquareRound');
font.load(null, 3000).then(function() {
document.documentElement.classList.add('fonts-loaded');
});
</script>
<style>
.blocking-time {
opacity: 0;
}
.fonts-loaded.blocking-time {
opacity: 1;
}
</style>폰트가 적용되는 동안 화면을 보여주지 않는 방식을 선택합니다.
웹폰트 최적화에 관련된 글:
출처: velog.io/@vnthf/웹폰트-최적화-하기
d2.naver.com/helloworld/4969726
showerbugs.github.io/2018-02-02/웹폰트-최적화-하기
상업적 이용 가능한 무료폰트 사이트:
출처: noonnu.cc