Vue.js 使用vuetify更改单个vue组件中的字体

我是vue新手，尤其是vuetify新手

我正在寻找一个解决方案，以改变一个单独的组成部分的字体。在使用vuetify之前，我只是在 具有样式范围的组件

<style scoped>

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');

html {
  font-family: 'Krona One', sans-serif;
}

变量.scss

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
$body-font-family: 'Krona One', sans-serif

但我不知道如何更改单个组件的字体，就像只更改标题组件（工具栏/导航栏）的字体一样

@import url('https://fonts.googleapis.com/css2?family=Krona+One&display=swap');
$body-font-family: 'Krona One', sans-serif