0

I have made a custom Angular theme 'my-theme.scss' and included it in the angular.json file. It works fine with all Angular-Elements, but to some HTML-Elements within Angular Components it does not apply.

Example:

<mat-card class="example-card">
            <mat-card-header>
                <mat-card-title-group>
                    <mat-card-title>Java</mat-card-title>
                    <img mat-card-sm-image src="../../../assets/java.png">
                </mat-card-title-group>
            </mat-card-header>
            <mat-card-content>
                <p>
                Put a list here.
                </p>
            </mat-card-content>
</mat-card>

The custom typography of my 'my-theme.scss' will apply to the title of this card:

Screenshot-from-2023-04-18-18-17-01.png

But it won't apply to the anything within the mat-card-content for example. Screenshot-from-2023-04-18-18-22-47.png

Why is this and how can I fix it?

be2021
  • 29
  • 6

1 Answers1

2

In your styles.scss, you will ned to apply your font to your body: (Working example with Angular / Material 15)

@use "@angular/material" as material;

$custom-typography: material.define-typography-config(
  $font-family: "'Open Sans', sans-serif",
);
@include material.typography-hierarchy($custom-typography);

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif; // <-- Add this
}
Don
  • 366
  • 1
  • 10
  • 1
    Omg. Thank you so much. I have been wondering and wondering. So basically, I don't need my normal 'styles.css' anymore and I can write everything within the custom theme 'my-theme.scss'. It works! Awesome. – be2021 Apr 18 '23 at 16:38