Change font family 'MyriadPro' for Angular material 18, in mat-tab

I'm migrating angular/material from 12 to 18, and refactoring my project css also

In Package.json:

"@angular/core": "^18.2.13",
"@angular/material": "^18.2.13",


I'm trying to change Angular Material font to MyriadPro I'm new to this, I have attached my styles.scss below.

@use '@angular/material' as mat;
$my-theme: mat.define-theme(
$config: (
typography: (
plain-family: '"MyriadPro", "Montserrat", sans-serif',
brand-family: '"MyriadPro", "Montserrat", sans-serif',
),
),
);

:root {
@include mat.all-component-typographies($my-theme);
}

/* ------------------------------ Import Fonts ------------------------------ */
@font-face {
font-family: MyriadPro;
src: url("assets/css/fonts/MyriadFont/MyriadPro-Regular.otf");
src: url("assets/css/fonts/MyriadFont/MyriadProRegular.eot") format("embedded-opentype"), url(assets/css/fonts/MyriadFont/MyriadProRegular.woff2) format("woff2"), url(assets/css/fonts/MyriadFont/MyriadProRegular.woff) format("woff"), url(assets/css/fonts/MyriadFont/MyriadProRegular.ttf) format("truetype"), url(assets/css/fonts/MyriadFont/MyriadProRegular.svg#MyriadProRegular) format("svg")
}

@font-face {
font-family: Montserrat;
src: url("assets/css/fonts/MonsterRat/Montserrat-Medium_1.ttf")
}

/* ---------------------------- Import Fonts end ---------------------------- */
body {
height: 100%;
font-size: 14px;
margin: 0;
font-family: "MyriadPro", "Montserrat", sans-serif;
}


This is working for input textbox, I'll attach the input html code

<mat-form-field class="w-100">
<mat-label>{{ 'familyname' | translate }}</mat-label>
<input matInput requiredtype="text">
</mat-form-field>


When I inspect this and see in computed tab It showing as font-family: MyriadPro, Montserrat, sans-serif,

this is correct, when I click this, it redirects to styles tab

.mdc-text-field--filled .mdc-floating-label{
...
font-family:var(--mdc-filled-text-field-label-text-font, var(--mat-app-body-large-font)),
...
}


When I hover over --mdc-filled-text-field-label-text-font it is showing as "MyriadPro", "Montserrat", sans-serif.

This is correct, but this is not coming correctly for mat-tab.

This is my project code:

<mat-tab-group (selectedTabChange)="onclick()" [(selectedIndex)]=patientSearchInputs.SearchType>
<mat-tab label="First">
<ng-template mat-tab-label>
<span>{{"patdetails" | translate}}</span>
</ng-template>
</mat-tab>
<mat-tab label="Second">
<ng-template mat-tab-label>
<span>{{"OrderDetails" | translate}}</span>
</ng-template>
</mat-tab>
</mat-tab-group>


This is the sample code, given in angular material docs

<mat-tab-group>
<mat-tab label="First"> Content 1 </mat-tab>
<mat-tab label="Second"> Content 2 </mat-tab>
<mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>


for both code, font-family MyriadPro is not coming,

When I inspect this and see in computed tab It showing as font-family: Roboto, sans-serif,

when I click this, it redirects to styles tab

.mat-mdc-tab{
...
font-family:var(--mat-tab-header-label-text-font, var(--mat-app-title-small-font)),
...
}


When I hover --mat-tab-header-label-text-font it showing as Roboto, sans-serif


For me all font in my project should be in MyriadPro, I need to do this in common way, how to do this without writing font-family for each angular material component seperately ?

Continue reading...