[쇼핑몰 구축기] 폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법

이번에는 폰트어썸(Font Awesome) 적용 시 흔히 마주치는 woff2관련 404에러 문제를 어떻게 풀어야 하는지에 대해서 살펴봅니다.

폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법

쇼핑몰 구축기를 연재하는 이유

최근 지인이 워드프레스를 이용해 쇼핑몰 구축을 시도하면서 배웠던 배웠던 다양한 경험들을 해당 쇼핑몰 블로그에 연재해 왔는데요.

쇼핑몰이 상품만 파는 것이 아니라 쇼핑몰을 방문하는 고객들에게 열가지 유용한 정보를 제공하는 블로그의 효용성이 높다는 점을 십분 활용하고, 처음 시작하는 쇼핑몰의 신뢰성을 주기 위해 비록 삽질이지만 삽질기를 낱낱히 공개하기로 했다고 하네요.

그 쇼핑몰의 주소는  https://puripia.com로 아직도 공사중이기는 합니다.) 

쇼핑몰 구축 시 도와주었던 인연으로 그 쇼핑몰을 알리고 쇼핑몰 구축 경험담을 보다 널리 알리기 위해서 여기 happist.com에도 같이  공유합니다. 조금 사심이 있기는 합니다.

폰트어썸(Font Awesome) 적용 시 woff2관련 404 에러 대처법

이모티콘이나 이모지등이 널리 활성화되면서 웹페이지에서 이러한 경향을 다소 늦었지만 적극적으로 수용하려는 시도가 지속되어 왔습니다.

아이콘을 사용해 보다 직관적으로 사용 경험을 제공할 수 있고, 군더더기 설명을 줄일 수 있어 깔끔한 사이트 구현도 가능합니다.

이렇게 웹 페이지에서 아이콘을 구현하는 여러가지 방법이 있지만 가장 널리 사용되는 것이 바로 폰트어썸 (Font Awesome) 아이콘 폰트입니다.

폰트어썸 (Font Awesome) 공식 페이지 살펴보기

1. 폰트어썸 (Font Awesome) 적용 시 woff2관련 404 에러

폰트어썸 (Font Awesome)이 등장한지 어느 정도 시간이 걸려서 일반적인 웹사이트에서 이를 적용하는 것은 어렵지는 않습니다.

그러나 이를 적용하는 과정에서 아무래도 열가지 장애를 만나게 되는데요.

이 중 오늘 이야기하는 woff2를 표현하지 못하고 404에러를 뿜어내면서 적용되지 못하는 현상을 어떻게 해결할 것인지에 대해 그동란 뻘짓하면서 알아낸 내용을 공유하고자 합니다.

이는 webpagetest.org에서 테스트해보면 다른 항목들은 제대로 작동하는데 woff2는 작동하지 않는 것을 알 수 있습니다.

2. 폰트어썸 (Font Awesome) 적용 시 점검 사항

왜 이런 문제가 발생하는 것일까요?

저도 처음에는 어떻게 접근해야할지 몰라서 너무 당황했고 몇달동안 그냥 무시했습니다.

사이트 운영에서 큰 문제는 없었기 때문에요. 아마 어느 부분이제대로 표현되지 않았을텐데 그냥 감내하기로 한것이지요.

그러는 가운데 이문제를 한번 풀어야겠다고 마음먹고 엄청난 구글링 작업에 들어갔습니다.

2.1. MIME 타입에 woff2가 등록되었는지 확인

그러면서 어쩌면 당연하겠지만 woff2를 MIME 타입에 등록한다는 사실을 알게되었습니다. 초심자라 모르는게 너무 많군요!!!!!!

• 폰트, 이미지, 텍스트 등 대부분의 형식들은 MIME 타입을 등록합니다.
• woff2 파일 형식이 등장했던 시기에 이 파일을 woff2를 어떻게 등록할 것인지에 대한 가이드가 많이 있었습니다.

아는 nginx라면 /etc/nginx/mime.types라는 파일에 정의되어 있습니다. 여기에서 woff2가 제대로 등록되어 있는지 확인해보면 됩니다.

대부분 아래처럼 등록이 되어 있습니다.

font/woff   woff;
font/woff2   woff2;
Code language: PHP (php)

2.2. 웹서버 설정 확인 – woff2가 전부 반영되었는지

웹서버 설정에서 별다른 설정을 하지 않았다면 별 문제가 없을지도 모릅니다.

그러나 대부분 내용이 쉽게 변하지않는 파일의 경우 속도 향상을 캐싱하도록 만드는 옵션을 적용하고는 합니다.

아래는 nginx에서 적용했던 옵션인데요.

location ~ \.(?:asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    add_header Cache-Control "public, must-revalidate, proxy-revalidate";
}Code language: PHP (php)

여기를 보시면 woff는 있는데 woff2는 없다는 것을 알 수 있습니다.

이 옵션이 사용 유무를 결정하는 것은 아닐텐데요. 여기에 없다는 이유로 woff2는 작동하지 않더군요.

그래서 여기 리스트에 woff2를 넣어주었습니다. 그랬더니 아무일 없었다는 듯 작동하더군요..

조금 허무했습니다. 최종 적용 옵션입니다.

location ~ \.(?:asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|odb|odc|odf|odg|odp|ods|odt|ogg|ogv|otf|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|t?gz|tif|tiff|ttf|wav|webm|wma|woff|woff2|wri|xla|xls|xlsx|xlt|xlw|zip)$ {
    expires 31536000s;
    include /etc/nginx/security-headers.conf;
Code language: PHP (php)

여기서 include /etc/nginx/security-headers.conf;를 삽입한 이유를 간단히 설명하죠.

이전에 설명한 “[쇼핑몰 보안] NGINX에서 HTTP 보안 헤더(Security Headers) 적용 時 주의점“에서 설명한 내용과 같습니다.

즉 nginx는 보안 헤더관련 명령이 뒤에 나오면 앞에서 설정한 모든 보안 헤더관련 옵션이 무효화됙 때문에 보안 헤더 적용을 파일을 블러오는 것으로 처리했기 때문입니다.

[참고] Apache와 IIS에서 woff2 등록 방법

아마 최근에 설치된 최신 웹서버라면 woff2는 기본으로 등록되어 있겠지만 Apache와 IIS에서 woff2를 등록하는 방법은 아래와 같다고 합니다.

Apache에서 woff2 등록하기

.htaccess 파일에 아래 내용을 추가합니다.

# MIME Mappings
AddType font/woff .woff
AddType font/woff2 .woff2Code language: PHP (php)

IIS에서 woff2 등록하기

IIS 엡서버를 사용하는 경우에는 woff2는 아래와 같은 스니펫(snippet)을 추가해 해결할 수 있습니다.

<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
      <mimeMap fileExtension=".woff2" mimeType="font/woff2" />
    </staticContent>
  </system.webServer>
</configuration>Code language: PHP (php)