Google Fonts必须在Bootstrap CSS之后加载，否则字体不生效；需手动覆盖CSS变量--bs-font-sans-serif，添加&display=swap防闪动，并精简family与subset参数。
Google Fonts链接必须放在Bootstrap CSS之后
加载顺序错了，字体就用不上——浏览器按顺序解析CSS，如果自定义字体声明在Bootstrap之前，而Bootstrap里又用了font-family: var(--bs-font-sans-serif)这类变量或默认字体栈，那字体规则根本没机会生效。
- 把Google Fonts的
<link>标签放在<link href="bootstrap.min.css">之后、<style>或<link rel="stylesheet" href="your-styles.css">之前 - 别用
@import在CSS文件里引入Google Fonts，它会阻塞渲染，且优先级低于外部<link> - 检查开发者工具的Network面板，确认字体文件（如
Roboto:wght@400;700）返回200，不是404或跨域错误
Bootstrap 5+ 的CSS变量要手动覆盖
Bootstrap 5开始大量依赖CSS自定义属性（比如--bs-font-sans-serif），它默认值是"Helvetica Neue", Arial, sans-serif，不会自动认你的Google Font——你得显式重写。
- 在自己的CSS中加：
:root { --bs-font-sans-serif: "Roboto", "Helvetica Neue", Arial, sans-serif; } - 如果只改局部（比如
.h1），直接写.h1 { font-family: "Roboto", sans-serif; }更稳妥，避免全局副作用 - 注意引号：Google Fonts网页给的代码里字体名带引号（
"Roboto"），复制到CSS里也得保留，否则遇到空格或连字符会解析失败
字体加载闪动（FOIT/FOUT）需要主动处理
默认情况下，浏览器会等字体加载完才渲染文字（FOIT），或者先用备用字体再替换（FOUT），用户能看到明显跳变。Bootstrap不干预这个，得你自己加控制。
- 在Google Fonts链接里加上
&display=swap参数，例如：https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap - 配合
font-display: swap，确保文本立即显示，哪怕用的是回退字体 - 如果项目对首屏字体一致性要求高，考虑用
font-face+local()兜底，但Google Fonts官方不推荐本地缓存，实际意义不大
CDN路径和子集会影响加载体积与字符支持
直接照抄Google Fonts官网生成的链接，可能包含整套字重和全Unicode范围，但Bootstrap组件（如按钮、表单）通常只用ASCII和基本拉丁字符，没必要拉全量。
- 精简
family参数：比如只要常规体和粗体，写family=Roboto:wght@400;700，别写family=Roboto - 加
&text=ABCabc123限定字符集（适合Logo、标题等固定文案），但别用在正文类字体上，否则输入框打中文会fallback - 中文项目慎用
&subset=chinese-simplified——它和Bootstrap的.text-center之类工具类无关，但若混排中英文，记得补上latin子集，否则英文字母可能缺失
body设了font-family，但.btn里又写了font-family: inherit，那它最终用的还是--bs-font-sans-serif的值，而不是你期望的父级字体。 
