Angular component template global dynamic font

2
votes

I am trying to allow the user to change the font, which should dynamically update the component.

As the component renders quite a few material components there are many 'Roboto' styles.

If I add this to the global styles.css

* {
    font-family: Lato !important;
  }

It does successfully override all of the other font styles .

But how to make that dynamic? I tried an inline script tag in the template, but this gets stripped by angular (makes sense, other than this example).

I will try a dynamic stylesheet link tag, but that means creating a stylesheet for each font, a right pita. (we have 14 fonts).

1
angularangular-components

1 Answers

2
votes

You could create a class for each font, and apply the class using [ngClass]

For example, create a serif class, like so:

.serif * {
    font-family: serif !important;
}

Then apply it to your AppComponent with ngClass:

<div [ngClass]="fontClass">

Where the fontClass is a variable set in the ts file.