change font in ionic input

Issue

In an ionic app, I am trying to change the font family of input.
in global.css i’m specifing the global font

* {
   font-family: 'FFMalmoom' !important; 
}

I want the ion-input text in specific page to take another family
i tried:

ion-input {
    font-family: 'verdana' !important;
  }

ion-input {
    --ion-font-family: 'verdana' !important;
  }

with no success , It still takes ‘FFMalmoom’.

Solution

Instead of specifying the global font in the global.scss move it to the :root selector in the variables.scss file with the –ion-font-family css variable

:root {
  --ion-font-family: 'FFMalmoom';
}

After that the font will still be applied globally as ionic uses this as the base font for the entire app. You can then set the ion-input font-family as you normally would with

ion-input{
  font-family: 'verdana';
}

Answered By – Bart

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0