[크롬] 웹 사이트 폰트 추출하기(웹폰트 다운로드 방법)

웹사이트를 보면 ‘이 폰트 뭐지? 예쁘다’ 싶은 경우 있죠?
그런데 내 컴퓨터에 그 폰트가 설치되어 있지 않아도, 웹사이트에서는 정상적으로 글씨가 잘 보이는데요.

이건 바로 웹폰트(Web Font) 덕분입니다.

 

웹폰트는 사이트에 접속할 때 브라우저가 자동으로 해당 폰트를 불러와서 보여주는 방식이에요.
그래서 어떤 PC나 브라우저로 접속하더라도 항상 같은 폰트로 사이트가 표시되는 거죠.

 

오늘은 크롬 브라우저으로 웹폰트를 추출하는 방법을 알려드리겠습니다.

---

주의할 점

• 웹폰트는 ‘사이트용 폰트’라 일반 PC용 폰트랑 구조가 조금 달라요.
• 일부 폰트는 저작권이 있어서 개인 사용이나 상업적 이용이 불가능할 수도 있습니다.
  (다운받기 전에 꼭 저작권 정책을 확인하세요.)

---

 

크롬으로 웹사이트 폰트 다운로드하는 방법

1. 크롬으로 폰트를 추출할 사이트 접속

오른쪽 상단 메뉴 클릭 → 도구 더보기 → 개발자 도구 선택 (단축키는 Ctrl + Shift + i)

 

2. 개발자도구 창이 열린 상태에서 F5 눌러 새로고침해 주세요.

 

3. 상단 메뉴에서 ‘Network’ 선택 → 하단의 ‘Font’ 탭 클릭

이제 이 사이트에 사용된 웹폰트 목록이 쭉 뜹니다.

 

4. 폰트를 클릭하면 우측 ‘Preview’ 탭에서 미리보기 가능

어떤 글꼴인지 바로 확인할 수 있어요.

 

5. 마음에 드는 폰트 에 마우스를 올려 확장자(.woff2 등) 를 확인해 둡니다.

6. 다운받고 싶은 항목에서 우클릭 → Copy → Copy response 선택.

 

7. 그다음 크롬 새 창을 열어주고 주소창에 붙여넣기(Ctrl + V) → 엔터!

 

8. 이제 웹폰트 파일이 다운로드됩니다. 다운된 파일로 이동해, 아까 확인한 확장자(.woff2 등)로 이름을 수정해주면

웹폰트를 사용할 수 있습니다.

그러나, PC에서 설치해서 사용하려면 woff2를 그대로 사용할 수는 없고,

PC 사용용 OTF로 바꿔줘야합니다.

 

바꾸는 방법은 아래 링크 확인

https://7yena.tistory.com/entry/woff2-otf

웹 폰트 woff2를 컴퓨터에 설치하는 방법(OTF 변환)

 

---

간단하죠?
단, 앞서 말했듯 저작권 문제는 꼭 체크하고 사용하시길 바랍니다.

절대 배포하거나 상업적으로 사용하시면 안됩니다.