[Vue3] VUE 폰트 적용하기 (font.scss에서 font-face 설정하는데 폰트 설정이 제대로 안될때)

이슈

[현재프로젝트 구조]
src
└ [DIR] assets   
       └ [DIR] fonts
└ [DIR] styles    
       └ [DIR] common       
                    └ font.scss
       └ app.scss

기존 font.scss

 

현재 vue3 프로젝트 폴더구조는 위와 같다.
그런데 /src/assets/styles/font.scss에서 font-face 설정을 하고 Monserrat 폰트를 사용하고 싶은데
실제 렌더링 된 모습을 보면 아래처럼 computed탭이나 network탭에서도 폰트를 제대로 불러오지 않는 것을 확인할 수 있었다. 

 

computed에 실제 적용된 폰트

 

---

해결

network탭의 headers를 확인해봤더니 ~@ 하면 src를 찾아야하는데 찾지 못하고 그대로 내려온 모습을 확인할 수 있었다. font.scss에서 /src/assets 로 변경해주었더니 정상적으로 나오는 모습을 확인할 수 있었다.

@font-face {
  font-family:'Montserrat';
  font-style:normal;
  font-weight:400;
  src:local('MontserratRegular'), local('MontserratRegular'), url(/src/assets/fonts/Montserrat-Regular.eot);
  src:url(/src/assets/fonts/Montserrat-Regular.eot?#iefix) format('embedded-opentype'),
  url(/src/assets/fonts/Montserrat-Regular.woff2) format('woff2'),
  url(/src/assets/fonts/Montserrat-Regular.woff) format('woff');
}​

network 탭 잘못된 request url 주소

 

정상적으로 나오는 network 탭 모습