Why does font change for all of Bootstrap but not Angular header? - css

Question

I want to change the font across my whole website (effectively changing the font globally), so I've overwritten the Bootstrap font by updating my styles.scss file as below:
$theme-colors:(
"primary": #84329b,
);
#import '../node_modules/bootstrap/scss/bootstrap';
html, body { height: 100%; }
body { margin: 0; font-family: 'MuseoModerno', cursive !important; }
This works successfully, however, the font in my header does not change in-line with this (see the below image).
How can I ensure the font changes for the header?
For completeness, I've included the html code for my header below. As you can see, I've attempted to update the font specifically on the header, as it wasn't working after updating the styles.scss file. Unfortunately, this doesn't seem to work either.
<link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap" rel="stylesheet">
<mat-sidenav-container class="sidenav-container">
<!---links to appear in the sidenav if the device is a mobile-->
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="false"
>
<mat-toolbar>Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item routerLink="/catalogue" (click)="drawer.close()"
>Catalogue</a
>
<a mat-list-item routerLink="/notepads" (click)="drawer.close()"
>Explore Pads</a
>
<hr class="divider-line">
<a mat-list-item routerLink="/login" (click)="drawer.close()">Login</a>
<a mat-list-item routerLink="/sign-up" (click)="drawer.close()"
>Sign Up</a
>
</mat-nav-list>
<hr class="divider-line">
</mat-sidenav>
<!---content below is for everything contained along the header, mobile or not-->
<mat-sidenav-content>
<mat-toolbar>
<!---this is the menu icon to appear on mobile-->
<button
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async"
>
<mat-icon>menu</mat-icon>
</button>
<!---spacer between the mobile menu button and Padder logo-->
<span class="left-spacer" *ngIf="isHandset$ | async"></span>
<!---Padder logo for desktop-->
<span *ngIf="!(isHandset$ | async)" class="logo" routerLink="/"
><img
class="logo-image"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!--links for the header when the device is not a handset-->
<div class="nav-links" *ngIf="!(isHandset$ | async)">
<a mat-button routerLink="/catalogue">Catalogue</a>
<a mat-button routerLink="/notepads">Explore Pads</a>
</div>
<div class="search-container" *ngIf="!(isHandset$ | async)">
<mat-form-field class="header-search">
<input matInput placeholder="Search for products or pads.." />
</mat-form-field>
</div>
<!---Padder logo for mobile-->
<span *ngIf="isHandset$ | async" class="logo" routerLink="/"
><img
class="logo-image-mobile"
src="../../../assets/imgs/padder-logo.png"
alt="Padder Logo"
/></span>
<!---spacer between Padder logo and login button-->
<span class="right-spacer" *ngIf="isHandset$ | async"></span>
<!--login / sign-up button to be shown when user not logged in, desktop-->
<div class="login-links">
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Login</a
>
<a mat-button routerLink="/login" *ngIf="!(isHandset$ | async)"
>Sign Up</a
>
</div>
<!---search icon to be shown when the user is on mobile-->
<div>
<button mat-icon-button *ngIf="isHandset$ | async">
<mat-icon>search</mat-icon>
</button>
</div>
<!---dropdown to be down when the user is logged into the website-->
<!---
<div>
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
<a mat-menu-item routerLink="/profile">
<span>Profile</span>
</a>
<a mat-menu-item href="">
<button mat-stroked-button>Logout</button>
</a>
</mat-menu>
</div>--->
</mat-toolbar>
<ng-content></ng-content>
</mat-sidenav-content>
</mat-sidenav-container>

Answer 1

In you styles.scss, do the following:
#import "https://fonts.googleapis.com/css2?family=MuseoModerno:wght#200&display=swap";
* {
font: 500 20px/32px Roboto, 'MuseoModerno', sans-serif !important
}
This will definitely work