본문 바로가기

이슈

[웹폰트] .woff 또는 .woff2 404 에러가 뜰 때 ::Toy-Toy DevStory


.woff, .woff2 폰트 파일 404 에러


1. 에러 메세지



이모티콘을 따로 이미지로 쓰기엔 너무 많고 용량을 많이 차지합니다.


그래서 웹 폰트를 다운 또는 cdn으로 받아쓰는데


저는 로컬에 woff 파일을 받아 쓰고 있었습니다.


그런데 다른 서버에 게시하고 작동 하는지 확인 하는도중 


다음과 같은 404 에러가 저를 괴롭혔습니다 ㅠㅠ



- HTTP 404 Not Found






2. 원인



서버의 입장에서는 woff, woff2는 예상치 못한 파일 형식입니다.


비록 이 파일과 형식은 매우 흔한 폰트 파일이지만


웹 서버의 기본 설정은 예상치 못한 파일 형식이라고 생각 하나 봅니다.


그래서 파일이 실제로 존재하고 올바른 형식임에도 불구하고


404 에러를 내뱉는 이유가 여기에 있었습니다.




2. 해결방법



이 문제를 해결하기 위해서 이 파일이 올바른 형식임을 서버에게 알려주는 간단한 설정을 해주면 됩니다.


고로 web.config을 수정 하시면 되겠습니다.


우선 <system.webServer>의 <staticContent>가 보이실 겁니다.


만약 없다면 새로 추가하시면 되겠습니다.




<system.webServer> <staticContent> <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" /> <remove fileExtension=".woff" /> <remove fileExtension=".woff2" /> <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" /> </staticContent> <modules>



하나 주의하실 점은 <remove>와 <mimeMap>태그입니다.


만약 <staticContent>가 이미 존재했었다면 위의 코드를 반드시 입력할 것을 추천 드립니다.





이렇게 하신면 여러분의 머리를 아프게 하던 HTTP 404 에러가 더 이상 나타나지 않으며


예쁘고 아름다운 웹 폰트들이 화면에 잘 나타나실 겁니다.


감사합니다.