I have successfully updated the font globally on my website by modifying the styles.scss file, but I'm facing an issue with changing the font in the header section. Here is the code snippet for updating the font:
$theme-colors:(
"primary": #84329b,
);
@import '../node_modules/bootstrap/scss/bootstrap';
html, body { height: 100%; }
body { margin: 0; font-family: 'MuseoModerno', cursive !important; }
While this method works for the rest of the website, the font in the header remains unchanged (refer to the image linked below).
https://i.sstatic.net/5Lpbx.png
I also tried to specifically update the font in the header section using the following HTML code, but it didn't work as expected:
<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>