개발/Nuxt.js

Nuxt.js에서 웹폰트 제대로 사용하는 방법

Nuxt.js로 프로젝트를 진행할 때 여느 때와 같이 main.css 내부에 @import로 webfont를 가져와서 사용하고 있는데, 어느 날 무언가 이상한 점을 발견했습니다. 개발환경에서는 웹폰트가 잘 적용되었기 때문에 "웹폰트가 잘 가져와졌구나"라고 생각했고, 프로젝트 배포를 위해 빌드 후 웹 서버에 올라간 Nuxt.js 프로젝트를 살펴보는데 뭔가 개발버전에서 맞춰놓은 간격과 위치가 미묘하게 다른 점을 발견하게 되었습니다. 폰트에 문제가 있음을 인지하게 되었고, 그 원인을 찾게 되었는데 @import 구문으로 가져오고 있던 웹폰트에 문제가 있었습니다. 프로젝트에서 사용하고 있었던 방법이 Nuxt.js 프로덕션(production) 모드에서 제대로 동작하고 있지 않음을 확인하고 다른 방법으로 변경함으..