字體是網頁設計中非常重要的一部分，選擇合適的字體能讓網頁更加美觀、易讀。在Vue中，我們可以通過引用外部字體來實現這一目的。

<!-- 在HTML文件中引入字體文件 -->
<link  rel="stylesheet">
<!-- 在Vue組件中使用字體 -->
<template>
<div style="font-family: 'Roboto', sans-serif;">
<p>這是一段使用Roboto字體的文字</p>
</div>
</template>

上面的代碼展示了如何在Vue組件中使用引用的字體。我們首先在HTML文件中引入了來自Google Fonts的Roboto字體文件，并在Vue組件的樣式中使用了該字體。這樣，在組件中的文字就會使用該字體了。

除了使用外部字體文件，我們還可以使用Vue中提供的內置字體。通過在項目中安裝所需的字體庫，我們就可以在Vue組件中使用這些字體。

<!-- 在項目中安裝字體庫 -->
npm install typeface-roboto --save
<!-- 在Vue組件中使用字體 -->
<template>
<div class="roboto-text">
<p>這是一段使用Roboto字體的文字</p>
</div>
</template>
<script>
import 'typeface-roboto'
export default {
// ...
}
</script>
<style>
.roboto-text {
font-family: 'Roboto', sans-serif;
}
</style>

在代碼中，我們使用npm在項目中安裝了typeface-roboto字體庫，并在Vue組件中導入了該字體庫。在組件的樣式中，我們通過設置字體族來使用該字體。

總結一下，在Vue中引用字體可以分為兩種方式：使用外部字體文件和使用內置字體庫。前者需要在HTML文件中引入字體文件，并在Vue組件中設置樣式；后者需要在項目中安裝字體庫，然后在Vue組件中導入字體庫，最后通過在組件樣式中設置字體族來使用字體。