Google Fonts搭配Bootstrap使用时字体不生效如何排查解决？

按照以下步骤逐一排查即可解决问题：

• 检查资源引入顺序
  确认所有Google Fonts相关的<link>标签都放在HTML的<head>标签内部，且严格遵循「Google Fonts资源 → Bootstrap核心CSS → 自定义CSS」的加载顺序。如果自定义CSS放在Bootstrap CSS之前，写的字体规则会直接被Bootstrap的默认样式覆盖。
  正确的head内引入顺序参考：

  <head>
    <!-- Google Fonts 预连接+样式 -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@100;400;900&display=swap" rel="stylesheet">
    <!-- Bootstrap 核心CSS -->
    <link rel="stylesheet" href="/path/to/bootstrap.min.css">
    <!-- 自定义业务CSS -->
    <link rel="stylesheet" href="/path/to/custom.css">
  </head>
  

• 验证样式优先级问题
  按F12打开浏览器开发者工具，选中未生效的h1标签，查看右侧Styles面板：如果你写的font-family: 'Montserrat', sans-serif规则被划了删除线，说明选择器权重低于Bootstrap的默认样式规则。
  两种解决方法：
  1. 直接覆盖Bootstrap的全局字体CSS变量（推荐，Bootstrap5原生支持，改完全站所有默认文本自动应用字体，不用单独给标签写规则）：

     :root {
       --bs-font-sans-serif: 'Montserrat', sans-serif;
     }
     

  2. 提高自定义选择器的权重，比如把h1改成body h1，或者给目标h1加专属类名编写样式，不推荐滥用!important强制覆盖。
• 检查字体资源是否加载成功
  在开发者工具切到Network面板，筛选CSS类型，找到Google Fonts对应的样式请求：
  • 如果请求状态不是200，优先检查是不是广告拦截插件拦截了fonts.googleapis.com相关请求，关闭插件后刷新测试
  • 如果提示网络连接失败，是本地网络无法访问Google字体服务，替换字体链接域名为可用的公共镜像源即可
• 核对基础拼写
  确认CSS里写的字体名Montserrat大小写和拼写完全正确，不要漏写字母、随意更改大小写，字体名称拼写不匹配会导致字体直接 fallback 到系统默认无衬线字体。

你贴出的代码里引入的字重100/400/900配置是正确的，不需要额外调整字重引入规则。

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