Change ionic variable based on direction

Ionic Framework ionic-v3
1

I have two distinct fonts for my ionic 3 application. Lato for english and Droid for Arabic. I tried the below inside the variable.scss file but it doesnt work. Only Lato is selected which possibly means dir=rtl is not on the upper hierarchy on the DOM chain. My code is below inside the variable.scss

$font-family-md-base: "Lato";
$font-family-ios-base: "Lato";
$font-family-wp-base: "Lato";
[dir=rtl] {
    $font-family-md-base: "Droid";
    $font-family-ios-base: "Droid";
    $font-family-wp-base: "Droid";
}

Is there an alternative solution to this?

2

That is not how scss variables work… and unfortunately there is no programmatic way to do this. However, you should either do “Droid, Lato” if droid is not supported on ltr, or manually override the app font… (that way it will show Droid for Arabic but go to Latin when it can’t)

Sorry I can’t help more…

2 Likes
3

I ended up using a global selector plus filteration in my app.scss. This doesnt feel like a solution to me but it satisfies by current requirement.

[dir=rtl] {
    *:not(.icon):not(ion-icon) {
        font-family: "Droid";
    }
}

The first option you mention could be it but this might require me to seperate my font css and render it conditionally.

1 Like
4

Try this way.
$font-family-base: ‘Droid’, ‘Lato’ !default;
$font-family-ios-base: $font-family-base;
$font-family-md-base: $font-family-base;
$font-family-wp-base: $font-family-base;

h1, h2, button {
font-family: ‘Droid’, ‘Lato’ !important;
}

If ‘Droid’ does not support in english. ‘Loto’ will support in english.