CSS 파일 최상단에 @import 구문을 사용해서 폰트를 불러오면 CSS 파일이 완전히 로드되고 파싱될 때까지 리소스 로드가 지연돼서 성능 저하를 초래할 수 있다. 반면, HTML <head> 안에서 <link> 태그를 통해 폰트를 불러오면 여러 리소스를 병렬로 로드할 수 있어 더 효과적이다. 실제로 <link> 방식이 @import 보다 1.3~1.6초 정도 더 빠르게 폰트를 로드한다고 한다.

구글 폰트 CSS 파일 가져오기 팁

사용하고 싶은 구글 폰트 이름을 주소의 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 파일에서 폰트 불러오기

방법 1 - @import 구문 사용

CSS 파일 가장 상단에 @import 구문을 사용하여 해당 서체의 모든 font-face를 불러올 수 있다. 이 방법은 편리하지만 페이지 로딩 시간에 영향을 줄 수 있으므로 주의가 필요하다. 특히 @import 구문이 여러개 있는 경우 페이지 성능을 저하시킬 수 있다.

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap");

h1 {
  font-family: "Oswald", sans-serif;
}

방법 2 - @font-face 구문 사용

@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;
}

레퍼런스

CSS API 업데이트 | Google Fonts | Google for Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. CSS API 업데이트 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 이제 Google Fonts는 v2 API 업데이트에서

developers.google.com

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요

저작자표시 비영리 변경금지

'🪄 Programming' 카테고리의 다른 글

[DevTools] 개발자 친화적인 터미널 LS — PLS (0)	2024.05.10
[HTML/CSS] 펼침/접힘 Transition 효과와 요소 숨김 방식 차이점 (0)	2024.05.10
[DevTools] 구글 크롬 디자인 모드 (Design Mode) (0)	2024.05.10
[JS] Lodash Import 용량 줄이기 팁 (0)	2024.05.10
[React] background-image에 svg 사용하기 (inline SVG) (0)	2024.05.10

[HTML/CSS] 구글 폰트 사용 방법 / CSS에서 웹폰트 사용하기

구글 폰트 CSS 파일 가져오기 팁

CSS 파일에서 폰트 불러오기

방법 1 - @import 구문 사용

방법 2 - @font-face 구문 사용

레퍼런스

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

티스토리툴바

구글 폰트 CSS 파일 가져오기 팁

CSS 파일에서 폰트 불러오기

방법 1 - @import 구문 사용

방법 2 - @font-face 구문 사용

레퍼런스

'🪄 Programming' 카테고리의 다른 글

댓글

이 글 공유하기

다른 글

[DevTools] 개발자 친화적인 터미널 LS — PLS

[HTML/CSS] 펼침/접힘 Transition 효과와 요소 숨김 방식 차이점

[DevTools] 구글 크롬 디자인 모드 (Design Mode)

[JS] Lodash Import 용량 줄이기 팁

티스토리툴바