<aside>
⚠️ CSS 파일 최상단에 @import 구문을 사용해서 폰트를 불러오면 CSS 파일이 완전히 로드되고 파싱될 때까지 리소스 로드가 지연돼서 성능 저하를 초래할 수 있다. 반면, HTML <head> 안에서 <link> 태그를 통해 폰트를 불러오면 여러 리소스를 병렬로 로드할 수 있어 더 효과적이다. 실제로 <link> 방식이 @import 보다 1.3~1.6초 정도 더 빠르게 폰트를 로드한다고 한다.
</aside>
사용하고 싶은 구글 폰트 이름을 주소의 family 값에 입력하면 Font Family CSS 파일을 가져올 수 있다. 참고로 display=swap 파라미터는 폰트 파일 로드를 기다리는 동안 텍스트가 보이지 않는 현상을 방지 하기 위해 대체 폰트를 보여주는 옵션이다. 그 외에 wght, italic 등 여러 파라미터들을 사용할 수 있다(API Docs).
<https://fonts.googleapis.com/css2?family=Oswald&display=swap>
@font-face {
font-family: "Oswald";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(<https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZSSUhiCXABTV.woff2>) format('woff2');
/* unicode-range 속성을 지정하면 해당 문자 범위에만 폰트가 적용된다 */
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
CSS 파일 가장 상단에 @import 구문을 사용하여 해당 서체의 모든 font-face를 불러올 수 있다. 이 방법은 편리하지만 페이지 로딩 시간에 영향을 줄 수 있으므로 주의가 필요하다. 특히 @import 구문이 여러개 있는 경우 페이지 성능을 저하시킬 수 있다.
@import url("<https://fonts.googleapis.com/css2?family=Oswald:[email protected]&display=swap>");
h1 {
font-family: "Oswald", sans-serif;
}
@font-face 구문을 사용하여 특정 font-face만 불러올 수 있다. 폰트 스타일, 두께, 유니코드 범위 등 폰트를 더 세밀하게 통제할 때 유용하다. 참고로 주소의 v53은 폰트 버전을 의미한다.
@font-face {
font-family: "Oswald";
font-style: normal;
font-weight: 400;
src: url(<https://fonts.gstatic.com/s/oswald/v53/TK3_WkUHHAIjg75cFRf3bXL8LICs1_FvsUtiZSSUhiCXABTV.woff2>) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
h1 {
font-family: "Oswald", sans-serif;
}