如何在Bootstrap中使用本地存储的自定义开源字体？

强烈不推荐直接替换Bootstrap源码目录下的原有字体文件，这是非常不好的实践，存在几个明显问题：

• 后续升级Bootstrap依赖版本时，你替换过的字体文件会被直接覆盖，所有配置直接失效
• 修改第三方依赖源码会破坏项目的可复现性，换设备、重新安装依赖后配置就会丢失
• 无法灵活配置字体降级规则，也没法针对特定模块单独设置特殊字体

正确的做法是编写自定义CSS规则覆盖Bootstrap的原有字体配置，步骤如下：

1. 存放本地字体文件
   将你准备好的第三方开源字体文件（优先选woff2这种体积小、兼容性好的格式，按字重、字形分类整理好）放到项目静态资源目录下，比如常见的/static/fonts/或者/assets/fonts/路径。
2. 声明自定义字体
   在你的自定义CSS文件中用@font-face规则声明要引入的本地字体，示例：

   @font-face {
     font-family: 'CustomLocalFont';
     src: url('/assets/fonts/CustomLocalFont-Regular.woff2') format('woff2'),
          url('/assets/fonts/CustomLocalFont-Regular.woff') format('woff');
     font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   /* 按需补充粗体、斜体、其他字重的字体声明即可 */
   @font-face {
     font-family: 'CustomLocalFont';
     src: url('/assets/fonts/CustomLocalFont-Bold.woff2') format('woff2'),
          url('/assets/fonts/CustomLocalFont-Bold.woff') format('woff');
     font-weight: 700;
     font-style: normal;
     font-display: swap;
   }
   

3. 覆盖Bootstrap默认字体配置
   根据你用的Bootstrap版本选择对应的覆写方式，注意：你的自定义CSS文件必须在Bootstrap的CSS文件之后引入，才能保证优先级足够覆盖默认配置：
   • 如果是Bootstrap 5及以上版本，直接覆写全局字体CSS变量即可，把自定义字体放在字体栈最前面，后面保留系统默认字体作为降级备选，避免自定义字体加载失败时页面排版崩溃：

     :root {
       --bs-font-sans-serif: 'CustomLocalFont', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
       /* 需要替换等宽字体就覆写 --bs-font-monospace，替换衬线字体覆写 --bs-font-serif */
     }
     

   • 如果是Bootstrap 4及更早的老版本，没有全局CSS变量配置，直接给全局body标签设置字体族即可：

     body {
       font-family: 'CustomLocalFont', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
     

几个实操注意点：

• 写字体路径的时候注意和项目的静态资源路由匹配，避免部署后出现404加载不到字体的问题
• @font-face规则里建议加上font-display: swap，避免字体加载过程中页面文字长时间不显示，影响用户体验
• 不要删掉字体栈里后面的系统fallback字体，自定义字体加载失败时可以保证内容正常可读

内容的提问来源于stack exchange，提问作者user19310134