How to Customize Font Size in Ionic Framework

How to customize font size in Ionic Framework

I think you don't need to undersand everything on Sass.
In your project directory, in

.../yourProject/www/lib/ionic/scss

There is a file named _variables.scss where you will see something like this :


These are font-size variables, you just have to change these and then build the ionic css file.
I suggest you to use https://prepros.io/. I hope it helped you.

Increase font size of ion-input text

make sure you input is in an ion-item element and then give it your class like this:

CSS:

.size {
    font-size: 30px;
}

HTML:

<ion-item>
    <ion-input class="size"></ion-input>
</ion-item>

I tested it just now. it works.

change font size of ion-label in a single page - Ionic

You just need to do like this:

This is working stackblitz

my-page.html

  <ion-label stacked class="my-label">Tap and press the buttons to win!</ion-label>

my-page.scss

.my-label {
  font-size: 4em;
}

How can I change the font-size of the whole app on (ionChange)?

The following is an example for Ionic React (because I use React, not Angular) but the basic principle should be the same.

Ionic 6 makes extensive use of CSS variables. So my solution was to add font size variables to variables.css:

:root {
  /* https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/ */
  --app-text-size-base: 1.25rem; /* Assumes 16px base size. */
  --app-text-size-title: calc(var(--app-text-size-base) * 1.2); /* 24px */
  --app-text-size-title-h1: calc(var(--app-text-size-base) * 1.3); /* 26px */
  --app-text-size-title-h2: calc(var(--app-text-size-base) * 1.2); /* 24px */
  --app-text-size-title-h3: calc(var(--app-text-size-base) * 1.1); /* 22px */
  --app-text-size-title-h5: calc(var(--app-text-size-base) * 0.9); /* 18px */
  --app-text-size-title-h6: calc(var(--app-text-size-base) * 0.8); /* 16px */
  /* iOS default big size */
  --app-text-size-small: calc(var(--app-text-size-base) * 0.85); /* 17px */
  --app-text-size-half: calc(var(--app-text-size-base) * 0.5); /* 10px */
  --app-text-size-half-negative: calc(var(--app-text-size-half) * -1); /* -10px */

In several places, Ionic assumes a fixed font size, so I had to make various tweaks; see text.scss in my gist here.

Once this is in place, you can use a simple function to set the CSS variable (React TypeScript example):

const setThemeTextSize = (newTextSize: string): void => {
  const root = document.querySelector(':root') as HTMLElement;
  if (root) {
    root.style.setProperty('--app-text-size-base', `${newTextSize}px`);
  }
};

Ionic 3 application - how to make font size independent of native settings?

I found the solution! I used this phonegap plugin:

https://ionicframework.com/docs/v3/native/mobile-accessibility/

and used the method this.mobileAccessibility.usePreferredTextZoom(false);

This way, my app ignores the android font size settings!

Is it possible to change the font-size of the values within an ion-picker?

add global.scss

    .picker-opt{
       font-size: 12px;  //change size depend your Requirement
  }

How to change the font on ionic globally

Add all the Necessary fonts and links in the head part and just apply the styles to the following part of index.html file placed in src folder in an ionic 3 project

 <ion-app style="Whatever rules you want !font-family:family;"></ion-app>

---

Related Topics