【ChatOllama开源笔记】02 柴米油盐 - Nuxt 3与谷歌字体

ChatOllama 从 2024 年初开始起步，最初只是围绕 Ollama 模型搭建的一个简单聊天界面。项目虽小，但作为一款面向用户的 Web 应用，该有的基础功能一个都不能少。经过最初的几周开发，核心功能——模型管理、知识库创建、系统设置——都已完成，但前端细节还停留在“能用就行”的阶段，字体就是其中之一。

02 柴米油盐 - Nuxt 3 与谷歌字体

开源社区的力量总是能带来意想不到的惊喜。细心的使用者在体验中发现了字体的改进空间——satrong 主动将项目的首选字体设置为谷歌字体

。但在实际应用中，本地环境缺少对应的字体文件，导致 font-family 设置并未生效。这正好成了一个动手实践的好机会。过去对字体配置接触很少，借着这次反馈，完整走了一遍集成流程。

Nuxt 生态中对谷歌字体已有完善的支持，核心方案是

模块。具体步骤并不复杂：

安装 google-fonts

$ pnpm i -D @nuxtjs/google-fonts

在 nuxt.config 中添加配置

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/ui',
    '@vueuse/nuxt',
    ['@nuxtjs/google-fonts', {
      families: {
        'Noto Sans': true,
        'Josefin+Sans': true,
        Lato: [100, 300],
        Raleway: { wght: [100, 400], ital: [100] },
        Inter: '200..700',
        'Crimson Pro': { wght: '200..900', ital: '200..700' },
      }
    }]
  ],
  ui: { icons: ['heroicons', 'iconoir'] },
  css: ['~/assets/index.scss',]
})

为 HTML 指定字体

html, body, #__nuxt {
  height: 100%;
  font-family: "Noto Sans", SF Pro SC, SF Pro Text, SF Pro Icons, PingFang SC, Helvetica Neue, Helvetica, Arial, sans-serif;
}

配置完成后，提交合并请求，字体就正常工作了。整个过程从发现问题到解决，其实只花费了不到半小时，但带来的视觉体验提升非常明显。

项目再小，也是完整的产品。每天投入精力去打磨的，往往不是那些核心算法或架构，而是这些看似不起眼、却对用户实际体验至关重要的细节。这次笔记记录了谷歌字体在 Nuxt 3 中的集成方法，希望对正在开发类似项目的同行有所帮助——至少能节省 5 分钟的搜索和调试时间。