TL;DR

  • Google Fonts 웹 폰트를 사용할 때 방문자의 IP 주소가 Google에 전달되지 않도록 제공 코드를 그대로 붙여 넣지 않고, 폰트 파일을 내려받아 웹 서버에서 직접 호스팅하는 방식임.
  • Google Fonts의 다운로드 버튼은 TTF 파일을 제공하므로, 압축되고 서브셋으로 나뉜 WOFF2 파일을 CSS에서 찾아 내려받는 방식임.
  • 폰트의 라이선스를 확인하고 사용 조건을 준수해야 함.
  • 폰트 파일과 CSS를 버전이 바뀌는 폴더에 저장하고, CSS의 폰트 파일 경로를 상대 경로로 바꾸는 절차임.
  • HTML에서 CSS를 불러오고 CSS에 폰트 속성을 지정한 뒤, 라이선스 파일 링크를 제공하는 구성임.

Google Fonts 대신 직접 호스팅

  • 웹 폰트를 구할 때 흔히 이용하는 곳은 Google Fonts임.
  • Google Fonts에서 제공하는 코드를 그대로 붙여 넣으면 방문자의 IP 주소가 Google에 전달되므로, 폰트 파일을 내려받아 웹 서버에 저장하는 방식임.
  • Google Fonts의 다운로드 버튼은 WOFF2가 아닌 TTF 파일을 제공함. WOFF2는 압축되어 있고 Google Fonts가 서브셋으로 제공하므로 더 적합함.

라이선스 확인

  • 법률 자문이 아니며, 법률 대리 관계도 아님.
  • 폰트 사용이 라이선스를 준수하는지 확인해야 함.

폰트 파일과 CSS 내려받기

  • Google Fonts에서 원하는 폰트를 검색하고 Get font를 선택한 다음 Get embed code를 선택함. 제공된 코드는 붙여 넣지 않고, 포함할 옵션을 선택함.
  • 제공된 HTML에는 다음과 같은 링크가 포함됨: <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">.
  • 해당 요소의 href에 있는 URL을 사용해 CSS 파일을 내려받음: https://fonts.googleapis.com/css2?family=Fira+Code&display=swap.
  • 내려받은 CSS 파일에 참조된 폰트 파일을 각각 내려받아 한 폴더에 저장함. 업데이트 때마다 경로를 바꾸고 캐시 기간을 길게 설정하는 폴더 구조가 적절한 예는 /Assets/Fira/Code/2025-8-13/임.
  • CSS 파일도 같은 폴더에 복사하고, 폰트 파일 URL을 상대 경로로 변경함. 예를 들어 src: url(https://fonts.gstatic.com/s/firacode/v26/uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');를 src: url(uU9eCBsR6Z2vfE9aq3bL0fxyUs4tcw4W_D1sJVD7Ng.woff2) format('woff2');로 바꾸는 방식임.

라이선스 파일 추가

  • 폰트의 라이선스 내용을 파일에 저장함.
  • Google Fonts에서 해당 폰트를 검색하고 선택한 뒤 License를 선택해 라이선스를 확인함.

HTML에서 CSS 불러오기

  • 다음과 같이 HTML에 링크를 추가해 CSS를 불러옴: <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="preload"/> <link href="/Assets/Fonts/Fira/Code/2025-8-13/fira-code.css" rel="stylesheet"/>.

CSS에서 폰트 사용

  • 다음과 같이 폰트 패밀리와 글꼴 속성을 지정함: code { font-family: "Fira Code", monospace; font-optical-sizing: auto; font-weight: 400; font-style: normal; }.

라이선스 링크 제공

  • 폰트 라이선스 파일로 연결되는 링크를 추가하고, 폰트 사용이 라이선스를 준수하는지 확인함.