bootstrap 4中自定义字体需将含@font-face的css置于bootstrap.min.css之后，确保路径正确、添加font-display:swap，并全局覆盖组件font-family规则。
Bootstrap 4里加自定义字体，必须后加载CSS
Bootstrap 4的默认字体栈由 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif 控制，但它**不读取你提前声明的 @font-face**——除非你把字体CSS放在 bootstrap.min.css 之后加载。
常见错误是把字体定义写在 bootstrap.css 前面，或用 @import 在自定义CSS里引入字体，结果字体注册成功了，但 .btn、h1 这些组件仍用系统字体渲染。
- 正确顺序：
<link rel="stylesheet" href="bootstrap.min.css">→<link rel="stylesheet" href="fonts.css">（含@font-face和font-family覆盖） - 别在
bootstrap.css里直接改$font-family-sans-serif变量——Bootstrap 4没暴露这个Sass变量供外部覆盖，它硬编码在编译后的CSS里 - 如果用了CDN版Bootstrap，确保你的字体CSS文件也托管在同一域名下，否则可能触发CORS（尤其本地
file://调试时）
@font-face路径错位导致404最常见
字体文件路径永远相对于CSS文件位置，不是HTML页面。比如你在 css/fonts.css 里写 src: url('fonts/Inter.woff2')，那实际路径必须是 css/fonts/Inter.woff2；写成 ../fonts/Inter.woff2 或 /fonts/Inter.woff2 都会失败。
DevTools 的 Network 面板里看到 Failed to load resource: the server responded with a status of 404 ()，90% 是路径问题。
- 推荐统一把字体放
css/fonts/目录下，CSS里用url('fonts/xxx.woff2')，结构清晰不易错 - 本地开发务必起服务器：用
npx serve或 VS Code Live Server，file://协议下字体请求必被CORS拦截 - 检查字体文件名大小写——Linux服务器区分大小写，
inter.woff2和Inter.woff2是两个文件
font-display: swap 不加等于白配
没加 font-display: swap 的 @font-face，浏览器默认会阻塞文本渲染（FOIT），用户看到空白区块或布局抖动，尤其中文字体体积大时更明显。
Bootstrap 4本身不带这个属性，你得自己补上。
- 只支持
swap、fallback、optional，别用auto——行为不可控 - 每个字重都要单独一个
@font-face块：粗体不能靠浏览器“加粗”，必须显式声明font-weight: 700并指向对应字体文件 -
font-family名称必须严格一致：你在@font-face里写font-family: 'Inter'，后面所有地方都得用单引号+完全相同拼写，Inter和"Inter"在部分浏览器里不等价
覆盖Bootstrap默认字体栈要动手改CSS变量
Bootstrap 4没有像5那样提供 --bs-font-sans-serif 这类CSS变量，它的字体是写死在选择器里的，比如 body、.btn、h1 都直接写了 font-family: ...。所以你要全局换字体，就得覆盖这些规则。
最稳妥的方式是写一个独立CSS文件，放在 bootstrap.min.css 后面，并提高选择器权重。
- 不要只写
body { font-family: 'Inter', sans-serif; }——它管不了.btn或.navbar-brand - 推荐这样覆盖：
body, .btn, .navbar, h1, h2, h3, h4, h5, h6, p, .alert, .badge { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } - 如果只改部分组件，比如只要按钮用新字体，就单独写
.btn { font-family: 'Inter', sans-serif !important; }（!important仅限调试，上线前应靠选择器优先级解决）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
