Nuxt.js 에 폰트 적용 방법

Nuxt.js 폰트를 적용하는 방법입니다.

 

1. 웹 폰트 사용

nuxt.config.js에 html head영역에 폰트 삽입하듯이 넣으시면 됩니다

// nuxt.config.js
export default {
  head: {
    link: [
      { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap' }
    ]
  }
}

 

2. 직접 폰트 삽입

assets/fonts 라는 폴더를 만들고 안에 폰트를 삽입해줍니다.

// assets/main.scss

@font-face {
    font-family: "Maplestory Light";
    src: local("Maplestory Light"),
    url('~assets/fonts/Maplestory Light.ttf') format("truetype");
}

// nuxt.config.js
export default {
  css: [ '~/assets/main.scss'],
}

 

 

참고

https://reactgo.com/nuxt-add-fonts/

https://nuxtjs.org/docs/2.x/directory-structure/assets