워드프레스 woff2 파일 로딩 오류 (ERR_ABORTED 404)

크롬 브라우저에서 워드프레스 사이트 로딩 시 woff2 파일이 로드되지 않는 오류가 발생하는 경우가 있습니다. 다음 그림과 같이 크롬 개발자 도구에서 확인해보면 woff2 파일을 찾을 수 없는 오류(404 에러)가 발생하는 경우인데요. 이 경우 확인 사항에 대해 살펴보겠습니다.

워드프레스 woff2 파일 로딩 오류 (ERR_ABORTED 404)

워드프레스 사이트에서 위와 같이 woff2 파일이 로딩되지 않으면서 오류가 발생하는 문제를 접하게 되었습니다.

GET https://example.com/wp-content/themes/breek/assets/fonts/remixicon.woff2 net::ERR_ABORTED 404
The resource https://example.com/wp-content/themes/breek/assets/fonts/remixicon.woff2 was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate `as` value and it is preloaded intentionally.

이 문제를 검색해보면 1) 서버 레벨 문제이거나 2) 워드프레스 관련 문제로 귀결되는 것 같습니다. 다음 티스토리 문서에서는 "파일이 올바른 형식임을 서버에게 알려주는 간단한 설정을 해주면" 문제가 해결된다고 합니다.

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

이 문제가 서버 세팅 관련 문제가 아니라면 CSS 최적화 세팅과 관련이 있을 가능성이 높습니다. GeneratePress 테마의 포럼 글에서는 이 문제가 WP Rocket 플러그인의 Optimize CSS Delivery 설정과 관련되어 발생한다고 하는 사용자가 있습니다.

실제로 WP Rocket 플러그인을 사용할 경우 이 오류가 발생할 수 있습니다.

WP Rocket 플러그인을 사용하면 사이트 속도가 유의미하게 개선되는 경우가 있습니다. 하지만 이 플러그인은 유료 플러그인이고, 예상치 못한 에러가 발생하는 경우가 드물지만 있습니다.

중요한 사이트가 아니라면 무료 캐시 플러그인을 사용하여 세부적으로 세팅을 하면 사이트 속도가 향상될 수 있습니다. 저는 대부분의 사이트에 Cache Enabler라는 캐시 플러그인과 Clearfy라는 최적화 플러그인을 사용하고 있습니다. 

https://avada.tistory.com/2513

워드프레스 사이트 속도 향상을 위한 Clearfy 플러그인 세팅 예시

마치며

이상으로 워드프레스에서 woff2 폰트 파일 로딩 오류가 발생하는 경우 확인 사항에 대해 살펴보았습니다. WP Rocket 플러그인을 사용하면 없는 파일을 로드하려고 시도하여 이 오류가 발생할 수 있습니다. WP Rocket 세팅 변경으로 문제가 해결되지 않으면 플러그인 개발자에게 연락하여 지원을 요청해볼 수 있을 것입니다.

참고

https://avada.tistory.com/2241

워드프레스 GeneratePress 테마: 구글 페이지 스피드 인사이트 점수