如何在VS Code中使用已安装的Google Font字体

一、确认本地字体安装生效 #

• Windows：打开控制面板→外观和个性化→字体，搜索你安装的Google字体家族名（比如Roboto、Open Sans），能搜到就说明安装成功
• macOS：打开字体册（Font Book），搜索对应字体名，确认状态为已启用
• Linux：运行fc-list | grep "你的字体名"，有输出就说明安装生效

二、在CSS文件中引入并使用该字体 #

方式1：直接调用系统安装的字体（适合本地开发自用） #

直接在CSS的font-family属性中填写字体的准确全称即可，注意字体名包含空格的话需要用引号包裹，示例如下：

/* 全局应用字体示例 */
* {
  /* 以安装Noto Sans SC字体为例，后面加兜底字体避免失效 */
  font-family: "Noto Sans SC", sans-serif;
}

/* 单独给标题应用其他字体示例 */
h1, h2, h3 {
  font-family: "Roboto Slab", serif;
  font-weight: 700;
}

注意：字体名必须和系统中显示的完全一致，大小写、空格都不能出错，否则无法生效

方式2：打包到项目内引入（适合上线发布，避免用户设备无对应字体） #

如果项目需要对外发布，建议把字体文件放到项目目录中，通过@font-face规则引入，步骤如下：

1. 把下载的Google字体压缩包里的.ttf/.woff2/.woff格式文件，复制到项目的assets/fonts目录下（没有对应目录可手动新建）
2. 在CSS文件顶部添加@font-face声明：

/* 声明常规字重字体 */
@font-face {
  /* 自定义字体名，后续调用时填写该名称即可 */
  font-family: "Custom Roboto";
  /* 填写字体文件的相对路径，woff2格式体积小优先级最高 */
  src: url("./assets/fonts/Roboto-Regular.woff2") format("woff2"),
       url("./assets/fonts/Roboto-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  /* 可选：优化字体加载体验，避免页面内容短暂空白 */
  font-display: swap;
}

/* 声明粗体字重字体 */
@font-face {
  font-family: "Custom Roboto";
  src: url("./assets/fonts/Roboto-Bold.woff2") format("woff2"),
       url("./assets/fonts/Roboto-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 调用字体 */
body {
  font-family: "Custom Roboto", sans-serif;
}

三、在VS Code中应用该字体（可选，修改编辑器本身的显示字体） #

如果需要让VS Code的代码编辑区、界面也使用该字体，操作如下：

1. 打开VS Code设置面板：按Ctrl+,（Windows/Linux）/Cmd+,（macOS）
2. 在设置搜索框输入Font Family
3. 找到「编辑器: 字体系列」（Editor: Font Family）配置项，把你的Google字体名填到最前面，示例："Noto Sans SC", Consolas, 'Courier New', monospace
4. 如果需要修改终端字体，找到「终端>集成: 字体系列」配置项，同样把字体名填到最前面即可
5. 保存设置后立即生效，无需重启VS Code

四、常见问题排查 #

• 字体不生效：先检查字体名拼写是否和系统/@font-face声明的完全一致，再检查字体文件的相对路径是否正确
• 字重/斜体不生效：确认下载的字体包包含对应字重/样式的字体文件，并且@font-face中声明了对应的font-weight/font-style属性

内容的提问来源于stack exchange，提问作者clairely-u