웹폰트 적용 안될 때? 크롬 개발자 도구로 3초 만에 원인 찾는 법 (CSS 폰트 확인)

“분명 폰트 설정 다 했는데 왜 화면에선 그대로지?” 워드프레스나 웹사이트를 만들다 보면 웹폰트 적용 안됨 현상 때문에 머리 싸매는 순간이 꼭 온다. 이럴 때 감으로 CSS를 수정하지 말고, 크롬 개발자 도구(F12)를 켜서 팩트를 체크해야 한다.

폰트 파일이 제대로 다운로드되고 있는지, CSS 우선순위에서 밀린 건 아닌지 확인하는 가장 확실한 3단계 검증법을 정리했다.

폰트가 다운로드되고 있나? (Network 탭)

가장 먼저 확인해야 할 건, 브라우저가 폰트 파일을 제대로 가져오고 있는지다. 특히 구글 폰트 API를 쓸 때 “통째로 가져오는지, 조각(Subset)으로 가져오는지” 여기서 알 수 있다.

1. F12를 눌러 개발자 도구를 연다.
2. 상단 탭에서 Network를 클릭한다.
3. 필터에서 Font를 클릭한다. (이걸 안 누르면 이미지, 스크립트랑 섞여서 찾기 힘들다.)
4. 새로고침(F5)을 한 번 해준다.
5. Name 목록을 확인한다.
   • NotoSerifKR-Regular.woff2 처럼 파일이 보이면 성공! ✅
   • [꿀팁] 구글 폰트를 쓴다면 파일명이 KfoCnqn...woff2 처럼 이상한 문자로 보일 텐데, 이게 정상이다. 구글이 필요한 글자만 쪼개서(Dynamic Subsetting) 보내준 파일이기 때문이다. 용량(Size)이 10~30KB 정도로 작다면 아주 잘 작동하고 있는 것이다.
   • 반면, 직접 올린 파일이 3MB가 넘는다면? 당장 서브셋 작업이 필요하다는 신호다. 🚨

지금 내 눈앞의 글자는 무슨 폰트? (Computed 탭)

설정은 Noto Serif로 되어 있어도, 브라우저가 파일을 못 찾으면 몰래 Batang(바탕체)을 보여줄 수도 있다. “보여지는 폰트”의 진실을 확인하는 곳이다.

1. 확인하고 싶은 글자 위에서 우클릭 -> 검사(Inspect)를 누른다.
2. 개발자 도구 오른쪽 패널에서 Computed 탭을 클릭한다.
3. 스크롤을 맨~ 아래로 내린다.
4. Rendered Fonts 항목을 찾는다.
   • 여기에 Noto Serif KR (Local file) 또는 (Network resource)라고 떠야 진짜 적용된 것이다.
   • 만약 Batang이나 Malgun Gothic이 뜬다면? 설정은 했지만 실제로는 적용 실패했다는 뜻이다.
   • 글래프 8개, 이런식으로 뜨는건 그 폰트가 8개의 글자만 적용되고 있다는 것이다.

누가 내 폰트를 덮어썼나? (Styles 탭)

“나는 분명 명조체를 줬는데 왜 고딕이 나와?” 범인은 CSS 우선순위 싸움에 있다.

1. Elements 패널에서 해당 태그(h1, p 등)를 클릭한다.
2. Styles 탭을 본다.
3. font-family 속성을 찾는다.
   • 내 설정에 취소선(Strikethrough)이 그어져 있다면? -> 다른 설정이 덮어써서 무시당했다는 뜻이다.
   • 취소선이 없는 코드가 현재 승리자다.
4. 범인 색출:
   • inline이라고 적혀 있으면? -> 테마 설정(사용자 정의하기)이 덮어쓴 것이다.
   • style.css가 이겼다면? -> 차일드 테마나 CSS 파일이 덮어쓴 것이다.
   • 이 범인을 찾아서 제거하거나, 내 코드에 !important를 붙여서 강제로 이기게 만들면 된다.

✅ 요약: 3초 컷 체크리스트

1. Network 탭: 폰트 파일이 빨간색(에러) 없이 잘 들어오나? (용량 체크 필수)
2. Computed 탭: Rendered Fonts에 내가 원한 폰트 이름이 박혀 있나?
3. Styles 탭: 내 font-family 코드에 취소선이 그어져 있지 않나?

이 3가지만 확인하면 폰트 설정 때문에 밤새는 일은 없을 것이다. 😎