change font in ionic input


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’.


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

  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

Leave a Reply

(*) Required, Your email will not be published