/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]
