Override a SASS Variable in the page scss

@Ben1nB1ack,
I truly sympathise with you. And then I went into trying to find a way as i needed it myself.
I found something:
Apply [style.font-family]="fontVariable" to the <ion-nav> tag in app.html, and change the class variable fontVariable in the app.component.ts file each time a new page is loaded, to apply the new font.

You can give the fontVariable variable a default font-family name in the app.component.ts file, and change it whenever needed (maybe based on user choice) using the ionic-angular's events.publish().

To programmatically apply new fonts to entire app, just add the [style.font-family]="fontVariable" to all applicable tags within app.html alone. And…

Finally (alternative), nothing stops you from creating a class eg. variableFont in app.scss as follows .variableFont{ font-family: 'Brush Script Std'; } and then adding the class to any page’s element/tag you desire. It worked for me.
Note. I am using the left hand menu (called sidemenu) configuration, you might need to adjust to fit the tab configuration.

1 Like