当您在Sveltekit项目中添加字体时，理想情况下，您希望以隐私友好的方式进行操作。这意味着不从外部CDN加载字体，而是在本地托管它们，或者在您控制的CDN上托管。
为了使用Sveltekit执行此操作，您可以使用Fontsource项目。他们将所有Google Fonts目录作为NPM软件包托管。
假设我们要使用Roboto字体。
安装字体
npm i @fontsource/roboto
加载字体
我们希望将字体加载到全球的某个地方，以便您的所有组件可用。一个好地方是您的src/routes/+layout.svelte文件夹。
让我们添加我们的字体：
<script>
import "@fontsource/roboto";
</script>
现在我们可以在应用程序中的任何地方使用它。假设我们有一个HelloWorld.svelte组件：
<style>
h1 {
font-family: 'Roboto', sans-serif;
}
</style>
<h1>Hello world in Roboto!</h1>
如果我们想使用不同的字体重量，我们可以先咨询Fontsource上的Roboto字体页面。在那里，我们可以看到Roboto支持许多权重，例如300、400和700。默认情况下，导入字体时，通常会获得400个权重。如果我们想使用400 和 700变体，我们可以导入它们：
<script>
import "@fontsource/roboto/400.css";
import "@fontsource/roboto/700.css";
</script>
然后在我们的组件中我们使用这些权重样式：
<style>
h1, h2 {
font-family: 'Roboto', sans-serif;
}
h1 {
font-weight: 400;
}
h2 {
font-weight: 700;
}
</style>
<h1>Hello world normal weight!</h1>
<h2>Hello world in bold weight!</h2>