Bootstrap 4中自定义h1标签Montserrat字体样式无法覆盖默认样式的解决方法

Hey there! Let's work through why your custom Montserrat font isn't taking over Bootstrap 4's default h1 styling. Here are the most common fixes to get things working:

• Load your custom CSS after Bootstrap
  CSS follows a "last wins" rule for styles with the same priority. Make sure your stylesheet is included after Bootstrap's CSS file in your HTML. This ensures your custom rules override Bootstrap's defaults:

  <!-- Load Bootstrap first -->
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
  <!-- Then load your custom styles -->
  <link rel="stylesheet" href="path/to/your-custom-styles.css">
  

• Ensure your font is properly loaded
  Before you can use Montserrat, you need to make sure it's available to your page. If you're using Google Fonts, add the font link before both Bootstrap and your custom CSS:

  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet">
  

  If you're using a local font file, double-check your @font-face declaration in your custom CSS has the correct file paths:

  @font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
  }
  

• Boost your selector's specificity
  Bootstrap 4's h1 style uses a simple h1 selector. If your custom rule isn't overriding it, try making your selector more specific. For example:

  /* More specific than plain h1 */
  body h1 {
    font-family: 'Montserrat', sans-serif;
  }
  /* Or use a custom class on your h1 element (cleaner approach) */
  .montserrat-heading {
    font-family: 'Montserrat', sans-serif;
  }
  

  Then apply the class in your HTML:

  <h1 class="montserrat-heading">Your Heading</h1>
  

  Note: Avoid using !important unless absolutely necessary—it can make future style debugging harder.

• Use browser dev tools to diagnose conflicts
  Right-click your h1 element and select "Inspect" to open the browser's developer tools. In the "Styles" tab, look for your font-family rule. If it's struck through, that means another style is overriding it. The dev tools will show you exactly which CSS file and selector is causing the conflict, so you can adjust your custom rule accordingly.

• Check for inline or conflicting third-party styles
  Make sure there aren't inline styles (like <h1 style="font-family: Arial;">) on the h1 element—these take priority over external CSS. Also, check if any third-party plugins or other custom stylesheets are targeting h1 and overriding your font rule.

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