Set font-style && font-sizes similar to custom theme color using the library.

[Nanda-albanero]

Hi,

• Do we have any option to apply the font-styles dynamically similar to apply theme color dynamically ?

       const hex = '#3f51b5';
       this.materialCssVarsService.setDarkTheme(true);
       this.materialCssVarsService.setPrimaryColor(hex);
       this.materialCssVarsService.setVariable(MaterialCssVariables.BackgroundCard,hex);
       this.materialCssVarsService.setAccentColor('#333');

[johannesjo]

Not yet. But if somebody wants to add it, I am all for it. Should be mostly straightforward to implement.

[Nanda-albanero]

Not yet. But if somebody wants to add it, I am all for it. Should be mostly straightforward to implement.

Oh, that's a great news for me. Can you please add the required changes? I will be waiting for it.

• font-size & font-style options as of now.

Thanks.

[johannesjo]

I don't need the feature. So you would have to make a PR yourself I'm afraid.

[Nanda-albanero]

I've tried for it, couldn't get it to work. Can you share any sample snippet that could help me?

On Tue, Jan 26, 2021, 00:12 Johannes Millan [email protected] wrote:

I don't need the feature. So you would have to make a PR yourself I'm afraid.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/johannesjo/angular-material-css-vars/issues/60#issuecomment-767029324, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR4YIEQ2H4BT544YHTNEVVDS3W3RDANCNFSM4WQSDAPA .

[johannesjo]

I try to get back to you this weekend.

[Nanda-albanero]

Cool, thanks!

On Tue, Jan 26, 2021, 14:25 Johannes Millan [email protected] wrote:

I try to get back to you this weekend.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/johannesjo/angular-material-css-vars/issues/60#issuecomment-767398547, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR4YIEXSEKLOUPIVYJFJZLLS3Z7PJANCNFSM4WQSDAPA .

[johannesjo]

You should find all the relevant code here: https://github.com/johannesjo/angular-material-css-vars/tree/master/projects/material-css-vars/src/lib

The relevant material part can be found here: node_modules/@angular/material/_theming.scss

You would need to play around with passing css variables instead of values to mat-typography-config like so:

$custom-typography: mat-typography-config(
  $font-family: var(--custom-font-family),
);
@include init-material-css-vars($typography-config: $custom-typography); 

[Nanda-albanero]

Thanks, I'll check it out.

On Sat, Jan 30, 2021, 17:32 Johannes Millan [email protected] wrote:

You should find all the relevant code here:

https://github.com/johannesjo/angular-material-css-vars/tree/master/projects/material-css-vars/src/lib

The relevant material part can be found here: node_modules/@angular/material/_theming.scss

You would need to play around with passing css variables instead of values to mat-typography-config like so:

$custom-typography: mat-typography-config( $font-family: var(--custom-font-family), ); @include init-material-css-vars($typography-config: $custom-typography);

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/johannesjo/angular-material-css-vars/issues/60#issuecomment-770201664, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR4YIEXZ6TZSCJS2XAGDMBDS4PYNVANCNFSM4WQSDAPA .

[muellerdberlin]

Same problem for me. I will try to find a solution for this. What I also need is a custom font selector (for different type of users) without loading a bulk of fonts for every user... it's always just one font needed. Let's keep in touch.

Do you may have any advice how to include custom font files dynamically?

[json-derulo]

The solution is now fully described in the docs, so I'm closing this issue.

@muellerdberlin In Angular Material typography, it's not possible to provide paths to fonts (see the typography docs), so I don't see your feature request in the scope of this package. You should find a custom solution for this.