Disable system font scaling for Ionic apps on Android

Ionic Framework
1

Hello all,

I’m trying to disable dynamic font scaling for Android, basically I want to ignore system-level font size and style so I can set my own font sizes.

From my understanding --ion-dynamic-font is only for iOS, since I’ve tried setting it to initial value to opt-out, and it has no effect on on my Android Capacitor app.

From the Ionic’s post on Dynamic Font Scaling, it says:

“The Android Web View’s font scaling mechanism is always enabled in web content and will automatically scale font sizes defined using the px unit.”

But doesn’t really explain how to disable that scaling, if at all possible? I have also tried using both px and rem units in my components.

Does anyone have any insight?

Thank you.

2

I was just trying to do this too but couldn’t figure out a way with CSS as the Android WebView forces it as you mentioned.

Just did some additional research and came across this discussion and the WebSettings.setTextZoom method.

The Capacitor text-zoom plugin was created to set the text zoom value. I haven’t tried it yet, but looks like what we want.

3

Seems like using vw units helps a bit, as it makes a bit more resilient against system-level font scaling. Probably can make it manageable, but that would require a lot of refactor and might feel too impactful. Most likely I’ll have to go with something like text-zoom or editing the Java file to completely disable it, to your point.

4

I don’t remember where I stumbled upon this answer but it works very well for me:

  • if you don’t already have, then in your directory android/app/src/main/java/com/[YOUR APP NAME]/app/ create a file named MainActivity.java
  • enter the following code
package com.yourappname.app;

import com.getcapacitor.BridgeActivity;

import android.webkit.WebSettings;
import android.webkit.WebView;


public class MainActivity extends BridgeActivity {

    public void onResume() {
      super.onResume();
      WebSettings settings = bridge.getWebView().getSettings();
      settings.setTextZoom(100);
      settings.setSupportZoom(false);
    }

}

Done!

1 Like
5

Found the original source - here on the forums

6

Manually adding code per @bernhardp suggestion worked perfectly, as well as using @capacitor/text-zoom plugin.