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

Nuxt.js production 모드에서 발생하는 웹폰트 문제를 해결하는 방법

Nuxt.js로 프로젝트를 진행할 때 여느 때와 같이 main.css 내부에 @import로 webfont를 가져와서 사용하고 있는데, 어느 날 무언가 이상한 점을 발견했습니다. 개발환경에서는 웹폰트가 잘 적용되었기 때문에 "웹폰트가 잘 가져와졌구나"라고 생각했고, 프로젝트 배포를 위해 빌드 후 웹 서버에 올라간 Nuxt.js 프로젝트를 살펴보는데 뭔가 개발버전에서 맞춰놓은 간격과 위치가 미묘하게 다른 점을 발견하게 되었습니다.

폰트에 문제가 있음을 인지하게 되었고, 그 원인을 찾게 되었는데 @import 구문으로 가져오고 있던 웹폰트에 문제가 있었습니다. 프로젝트에서 사용하고 있었던 방법이 Nuxt.js 프로덕션(production) 모드에서 제대로 동작하고 있지 않음을 확인하고 다른 방법으로 변경함으로써 이 문제를 해결하게 되었습니다.

기존 방법

기존에 사용하던 방식은 nuxt.config.js 파일의 css 프로퍼티에 css 파일을 넣어서 적용하고 있었습니다.

// nuxt.config.js
module.exports = {
  css: [
    '~/assets/css/main.css'
  ],
}

main.css에서 아래와 같이 구글 웹폰트를 불러오고 있었죠.

// main.css
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700');

위 방법으로 웹폰트를 적용하면 개발환경(development)에서는 정상적으로 웹폰트가 잘 반영이 됩니다. 하지만 배포환경(production)에서는 웹폰트가 적용이 되지 않는 점을 확인할 수 있습니다.

해결 방법

웹폰트 위치를 head 프로퍼티로 이동시켰습니다.

// nuxt.config.js
module.export = {
  head: {
	...,
    link: [
      {
        type: 'text/css',
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700'
      },
      ...
    ]
  },
}

head 프로퍼티로 웹폰트를 가져오는 부분을 이동시킴으로써 빌드과정에서 웹폰트가 누락되는 현상을 해결했습니다.

문제점

하지만 AWS 클라우드프론트에서 구글 웹폰트를 가져올 때 403에러가 발생하는 현상이 일어났습니다. 일시적으로 해당 문제를 해결하기 위해 "fonts.googleapis.com/css?family=Noto+Sans+KR:400,500,700"에서 가져오는 내용을 따로 css 파일로 만들고 S3에 저장해서 프로젝트에서 꺼내다쓰는 형식으로 구조를 변경했습니다.

// nuxt.config.js
module.export = {
  head: {
	...,
    link: [
      {
        type: 'text/css',
        rel: 'stylesheet',
        href: 'https://cdn.service-name.com/font.css'
      },
      ...
    ]
  },
}

결과적으로 프로젝트에서 웹폰트를 사용하는 구조는 위와 같이 변경되었습니다. 좀 더 효율적인 방법을 찾게 된다면 재차 공유하도록 하겠습니다.