Font is not vertically centred in React Native Android

Question

When I unset the font-family property the text is centred, so it must be an issue with the font I'm using which is Google's Poppins.

I've found similar issues around using custom fonts

• Vertical center custom font in React native iOS
• Offset in custom font's vertical alignment

though interestingly the trouble with those are with iOS and not Android. I thought I cracked it with these steps:

1. Install Font Tools for Xcode 14
2. Run ftxdumperfuser -t OS/2 -A d Poppins-Medium.ttf to produce Poppins-Medium.OS_2.xml
3. Modify typoAscender and typoDescender properties inside the xml
4. Apply the xml changes to the font with ftxdumperfuser -t OS/2 -A f Poppins-Medium.ttf

Though I later found that this only resolves the vertical alignment issue with Android phones using Android API level 33. Android phones using API level 32 <= are completely unaffected by this change, and I cannot find a fix for this or any change regarding fonts in the android api release notes. I also have doubts that the solution I have tried is the correct one, given that the font I'm using is one of Google's.

Android API level 33 with my patched Poppins font (centred):

Android API level 32 with my patched Poppins font (not centred):

Android API level 32 with system font (centred):

I am running a yarn create expo-app project, with Poppins fonts install under /assets/fonts/ and the following App.js file:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";

import { useFonts } from "expo-font";

export default function App() {
  const [fontsLoaded] = useFonts({
    "Poppins-Medium": require("./assets/fonts/Poppins-Medium.ttf"),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <View style={{ borderWidth: 1, borderRadius: 500 }}>
        <Text style={{ fontFamily: "Poppins-Medium" }}>Hello</Text>
      </View>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

What am I missing here to have Poppins fonts vertically aligned for Android API level 32<= ?

Answer 1

I searched this through the Internet and found a possible answer. It's working for me perfectly

Just add <item name="android:includeFontPadding">false</item> in the style.xml (/android/app/src/main/res/values/styles.xml) file and rebuild the app.

For more information https://github.com/google/fonts/issues/3457