Bootstrap全局字体生效，Angular头部字体未同步更改的解决方法

Got it, let's break down why your header fonts aren't updating even after setting the global font-family on body—and how to fix it.

The Root Cause #

Angular Material components (like mat-toolbar, mat-button, mat-list-item) come with their own default typography styles that have higher specificity than your global body rule. Even adding !important to the body selector might not be enough because Material's component-specific styles target their own classes directly.

Solution 1: Target Material Component Classes Directly #

If you want a quick fix, you can explicitly override the font for all Material components used in your header by adding these rules to your styles.scss:

// Global font override for Angular Material components
mat-toolbar,
mat-button,
mat-list-item,
mat-form-field,
.mat-input-element {
  font-family: 'MuseoModerno', cursive !important;
}

This targets all the key components in your header (toolbar, buttons, list items, search field) and forces your custom font to take precedence.

Solution 2: Use Angular Material's Typography Config (Recommended) #

For a cleaner, more maintainable approach that aligns with Angular Material's best practices, you can override its default typography variables instead of using !important everywhere. Here's how to adjust your styles.scss:

// 1. Define your custom font family first
$custom-font-family: 'MuseoModerno', cursive;

// 2. Override Angular Material's typography configuration
$typography: mat-typography-config(
  $font-family: $custom-font-family,
  // Optional: Adjust other typography settings (font sizes, line heights) if needed
);

// 3. Import dependencies and apply the custom typography
$theme-colors: ( "primary": #84329b, );
@import '../node_modules/bootstrap/scss/bootstrap';
@import '../node_modules/@angular/material/theming';

// Apply the custom typography to all Material components
@include mat-core($typography);

// 4. Global body styles
html, body { height: 100%; }
body { margin: 0; font-family: $custom-font-family; }

This method sets your font as the default for all Material components at the theme level, so you won't need to manually target each component class.

Quick Check #

Make sure your Google Fonts link is loaded before your styles—your current HTML setup has it at the top, which is correct. Also, double-check that no component-specific .scss files are overriding the font (look for font-family rules in any component styles related to the header).

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