Amplify 폰트 적용 안되는 경우 - failed to decode downloaded font: <url>

폰트를 다운받아 프로젝트 안에 넣고, 아래와 같이 설정해줬습니다.

로컬에서 돌렸을 때는 폰트가 잘 적용되었는데 배포를 하고 나니까 적용이 안되어 있더라고요??!

@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Regular.woff2") format("woff2"), url("../font/Pretendard-Regular.woff") format("woff"),
    url("../font/Pretendard-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-SemiBold.woff2") format("woff2"), url("../font/Pretendard-SemiBold.woff") format("woff"),
    url("../font/Pretendard-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("../font/Pretendard-Bold.woff2") format("woff2"), url("../font/Pretendard-Bold.woff") format("woff"),
    url("../font/Pretendard-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

 

 

콘솔창을 켜보니 failed to decode downloaded font: <url>  라는 오류가 뜨는 것을 발견했습니다.

 

구글링 해본 결과, amplify에서 확장자에 대한 리다이렉트 설정이 문제라는 것을 알 수 있었습니다..!

 

amplify에 들어가서 다시쓰기 및 리디렉션쪽을 들어가면, 아래와 같은 창이 뜹니다.

 

편집을 눌러서 맨 아래에  woff, woff2, ttf 확장자를 추가해줍시다.

</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|woff|woff2|ttf)$)([^.]+$)/>

 

 

추가하고 나면 이제 다시 폰트가 잘 적용되는 것을 확인할 수 있습니다 :)