2026-10-08

Google Fonts 글꼴을 직접 호스팅하면 외부에서 글꼴을 불러오는 방식보다 속도와 개인정보 보호 측면에서 이점이 있다. NPM을 이용하면 수동으로 설정하는 대신 글꼴 패키지를 설치해 사용할 수 있다.

NPM 설정

이미 NPM을 설정했다면 이 단계는 건너뛴다.

  • npm init을 실행한다.
  • .gitignore 또는 이에 해당하는 파일에 node_modules를 추가한다.
  • 다른 개발자나 CI는 코드를 사용하기 전에 npm ci를 실행해야 한다.

글꼴 패키지 설치

이 안내는 가변 글꼴을 기준으로 한다. 비가변 글꼴에도 비슷한 단계를 적용할 수 있다.

fontsource.org에서 원하는 글꼴을 검색한다. 예를 들어 Google Sans Flex를 검색한 다음 “Get Font”, “Developer Setup”을 차례로 누른다. 표시된 npm install @fontsource-variable/google-sans-flex 같은 명령을 실행한다.

npm install 뒤에 오는 패키지 이름을 복사한다. 예시에서는 @fontsource-variable/google-sans-flex가 패키지 이름이다. 원문에서는 이 값을 $FONT_PACKAGE라고 부른다. ./node_modules/$PACKAGE_NAME 폴더가 생기며, 정적 사이트 생성기(SSG) 등을 사용한다면 이 폴더와 files 하위 디렉터리를 그대로 복사되도록 설정한다.

글꼴 사용

사용할 축을 정한다. 예시에서는 wght만 사용한다. 각 축에 해당하는 CSS를 ./node_modules/PACKAGE_NAME에서 가져온다. 이 블로그의 예시는 다음과 같다.

<link rel="stylesheet" href="/node_modules/@fontsource-variable/google-sans-flex/wght.css">

가져온 CSS의 font-family 규칙에서 글꼴 이름을 확인한 뒤, font-family CSS 규칙을 사용해 글꼴을 지정한다. 사용 중인 글꼴의 라이선스를 준수해야 한다. 라이선스는 ./node_modules/PACKAGE_NAME/LICENSE에 있으며, 경우에 따라 라이선스 링크를 표시해야 한다.

수동 설정 방법은 Google Fonts 웹 글꼴을 직접 호스팅하는 방법에서 확인할 수 있다.