[nuxt] vuetify 기본 폰트 수정하기 > IT 기술백서

IT 기술백서

직접 알아내거나 검색하기 귀찮아서 모아 둔 것

JavaScript | [nuxt] vuetify 기본 폰트 수정하기

본문

/assets/variables.scss 에 아래를 추가한다.

[code] 

@import '~vuetify/src/styles/styles.sass';


@import 'https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=block';


$body-font-family: 'Noto Sans';

$heading-font-family: $body-font-family; 

[/code]

 

이렇게 하면 바로 기본 폰트가 변경이 된다.  하지만 vuetify의 기본 폰트도 같이 로딩되기 때문에 쓸데없는 자원로딩으로 속도가 느려질 수 있다.  vuetify 기본폰트를 불러오지 않게 하기 위해서는 nuxt.config.js 의 vuetify 옵션에 아래를 추가한다.


[code]

vuetify: {

  treeShake: true,

  defaultAssets: false,

}

[/code]

 

그러나 또 문제가 있다.  기본폰트는 불러오지 않는데 아이콘도 불러오지 못한다.  이때는 필요한 assets을 직접 추가해줘야 한다.

nuxt.config.js 파일에 icons 항목을 추가해 주자

 

[code]

vuetify: {

  treeShake: true,

  defaultAssets: false,

  icons: {

    iconfont: 'mdi',  // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4' || 'faSvg' 등이 있다.  기본은 mdi (매트리얼디자인아이콘)

  }

}

[/code]

 

마지막으로 css 파일을 불러와야한다.  /plugins/vuetify.js 파일을 만들고 import 한다.

[code]

import 'material-design-icons-iconfont/dist/material-design-icons.css'

[/code]

 

vuetify.js 플러그인을 로딩할 수 있도록 nuxt.config.js 파일에 추가한다.

[code]

plugins: [

  '~/plugins/vuetify.js',

]

[/code]

 

 

댓글 0개

등록된 댓글이 없습니다.

Menu