How to increase font-size for the whole ionic 4 app?

Hi everyone,

I am developing an mobile tablet PC(Android) application with ionic 4. Everything works great, except the default font size is too small for our users.
Is there any way to increase the scale of font size for whole application? For example, 200% font-size of original.

If no, I would just enforce users to change the ‘Font Size’ setting in Android - Setting - Font Size, setting it as ‘Huge’ instead of ‘Normal’…

Any help would be much appreciated!

If you’re on Ionic 4 then add

body
{
    font-size:2.8rem;
}

to variables.scss. It should work

1 Like

Hi geshjosh,

Thanks for you reply : )

I added font-size attribute to veriables.scss, but its not working. I inspect the css in browser via ionic serve, and I founded something called “:host{ }” on the element also have a ‘font-size: 14px’ style and it has a higher priority than the one I just add to veriables.scss.

Finally, I specify the font-size for each element one by one in veriables.scss and it works now.

:root{
ion-item{
font-size: 20px;
}

ion-tab-button{
font-size: 16px;
}

ion-button{
font-size: 16px;
}
}

I also saw something called ‘Overriding Ionic Sass Variables’ but it is for ionic 3, seems not working at ionic 4.