如何在Quarto主题中用本地存储字体覆盖默认字体？

数据老陈

2026-7-31

解决Quarto网站本地字体替换问题

要替代Google API调用、使用本地字体，需从禁用主题自动加载Google字体、确保字体资源被正确复制、覆盖主题字体变量三个方面调整配置：

1. 修正_quarto.yml配置

首先禁用主题自带的Google字体加载，并确保字体目录被Quarto识别为资源：

project:
  type: website
  resources:
    - fonts/  # 强制Quarto将字体目录复制到输出目录

format:
  html:
    theme: 
      light: [flatly, light.scss]
    google-font: false  # 关闭主题自动从Google CDN加载字体

2. 完善light.scss样式

仅定义@font-face不足以让主题应用字体，还需覆盖Bootstrap的字体变量，同时确保字体路径正确：

/*-- scss:defaults --*/

/* 定义本地Lato字体（常规字重） */
@font-face {
  font-display: swap; 
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/lato-v23-latin-ext_latin-regular.woff2') format('woff2'),
       url('fonts/lato-v23-latin-ext_latin-regular.woff') format('woff');
}

/* 按需添加其他字重，比如粗体 */
@font-face {
  font-display: swap;
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/lato-v23-latin-ext_latin-700.woff2') format('woff2'),
       url('fonts/lato-v23-latin-ext_latin-700.woff') format('woff');
}

/* 覆盖Bootstrap主题的字体变量，让全站使用本地Lato */
$font-family-sans-serif: 'Lato', sans-serif;
$font-family-base: $font-family-sans-serif;