0

I want to create one site that can be multiple brand based on a brand code I feed in - so I'm using a service (brand.service) to set a brand interface (brand.ts) and so far the properties are:

export interface Brand {
    status: number;
    logoUri: string;
    primaryColour: string;
    secondaryColour: string;
    tertiaryColour: string;
    fontFace: string;
}

I've got everything loading in dynamically apart from the font. So say for example I have a link to the font online as such:

http://example-font.com/Raleway.woff

And I create a name:

Raleway Regular

How would I use ngStyle to apply the font wherever required (if this is even possible)?

EDIT: For colours I'm using the following ngStyle directive:

<p [ngStyle]="{'color': brand?.primaryColour}"><i class="fad fa-palette"></i> Primary Colour</p>
Web Develop Wolf
  • 5,996
  • 12
  • 52
  • 101
  • Is [this](https://stackblitz.com/edit/angular-irrsv8?file=src%2Fapp%2Ftheme.service.ts) of help by any chance? –  Jul 06 '20 at 12:23
  • Thanks but no - I've got the colours all in ok - it's the fonts I need to load in dynamically – Web Develop Wolf Jul 06 '20 at 12:25
  • why not using ngClass, and have 2 css classes in your style.css file each w=one with a font and you can switch dynamically – Fateh Mohamed Jul 06 '20 at 12:32
  • @WebDevelopWolf I think it is of help though, you're not limited to assigning colors to css variables but also - strings and therefore fonts. –  Jul 06 '20 at 13:54

1 Answers1

0

You can use ngClass instead and based on your brand code you can change the class using the ternary operator

<p [ngClass]="{brandCode === 'yourCode' ? 'withFont' : 'withoutFont' }">test</p>

and in your css

.withFont {
  font-family: 'Raleway Regular', sans-serif;
}

.withoutFont {
  font-family: 'another font';
}
Fateh Mohamed
  • 20,445
  • 5
  • 43
  • 52
  • I can't have the fonts hard coded in the CSS at all - potentially gonna have hundreds of brands - and don't want to add a class for each (if possible) – Web Develop Wolf Jul 06 '20 at 12:59
  • You could create a directive with your brand.service injected in it. Then use that directive to alter your host style. https://angular.io/guide/attribute-directives – Geoffrey Migliacci Jul 06 '20 at 15:35