如何在vue和vuetify中插入本地项目中的字体？

// main.js

import Vue from 'vue';
import App from './App.vue';

// 引入字体文件
import '@/assets/fonts/your-font.ttf';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

<template>
  <div class="my-component">
    <p class="custom-font">Hello, World!</p>
  </div>
</template>

<style>
.my-component .custom-font {
  font-family: 'Your Font', sans-serif;
}
</style>

// vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib';

Vue.use(Vuetify);

export default new Vuetify({
  theme: {
    fonts: {
      // 设置字体
      yourFont: 'Your Font, sans-serif',
    },
  },
});

<template>
  <div class="my-component">
    <p class="custom-font">Hello, World!</p>
  </div>
</template>

<style>
.my-component .custom-font {
  font-family: 'yourFont';
}
</style>