Ionic 4: How to change font size?

Ionic Framework
1

Howdy -

I’m starting a new Ionic v4 app and the customer has asked for the font-size to be larger. Seems like a reasonable request.

I see documentation on Ionic CSS variables, including colors and --ion-font-family. However, I see no obvious way to customize font size.

What’s the recommended approach?

Thanks for the help,
Ben

2

I guess there are so many ways to customize the look and feel of your app including the font-size.

1. Overriding Variables

You can put your font-size customization to variables.scss that is located inside your your_app_folder/src/theme/. This will affect all the Sass variables found in Ionic’s source scss files.

2. Modifying app.scss

You can put your font-size customization to app.scss that is located inside your your_app_folder/src/app/. This will affect your styles globally for the entire app and not just one component.

3. Modify specific component

You can put your font-size customization to your-component.scss. This will the style of that specific component, you can use this approach if you want to modify a specific component only.

I am not sure if this answers your question but I hope it can help you in any way :blush:

3

Hi,
same problem. In Ionic v3 I changed the font-size on html-tag (<html>). Now in Ionic 4 this don’t work. I think it’s a problem with the web component architecture and the shadow dom. The documentation about this is very meager.
I there a CSS4 variable to change the main font-size?

4

This seems to be another bewildering omission from the docs. There are pages of information on how to change colors, but nothing on font sizes.

This works for me. In your theme/variables.scss file:

:root {
  ion-input {
    --background: white;
    --padding-start: 15px;
    --padding-end: 15px;
    --padding-top: 15px;
    --padding-bottom: 15px;
    font-size: 1.6rem;
  }
}

I don’t know why you need to use a mix of variables and declarations.

3 Likes