Using Italic Google Font with RenderHTML

Question

I have a React Native project using Expo where I'm using react-native-render-html and Google Fonts through @expo-google-fonts.

After loading my fonts properly and everything, I can't get an Italic font to render properly on Android, whereas it works fine on iOS.

Rendering on Android

I'm using

react: v18.0.0
react-native: v0.69.6
react-native-render-html: v6.3.4
expo: v46.0.20
@expo-google-fonts/pt-serif: v0.2.3
NPM

I have this function that loads my fonts:

import { 
  useFonts,
  PTSerif_400Regular,
  PTSerif_400Regular_Italic,
  PTSerif_700Bold,
  PTSerif_700Bold_Italic,
} from "@expo-google-fonts/pt-serif";

export default function FontLoader({ children }) {
  const [fontsLoaded] = useFonts({
    "PTSerifRegular" : PTSerif_400Regular,
    "PTSerifItalic" : PTSerif_400Regular_Italic,
    "PTSerifBold" : PTSerif_700Bold,
    "PTSerifBoldItalic" : PTSerif_700Bold_Italic,
  }); 

  if (!fontsLoaded) {
    return null;
  }

  return <>{children}</>
}

If I were to do this (with everything imported properly):

default export App = () => {
  const style = {
    body: {
      whiteSpace: 'normal',
      fontSize: 16,
      color: "#333333",
      fontFamily: "PTSerifRegular"
    },
    em: {
      whiteSpace: 'normal',
      fontSize: 16,
      color: "#333333",
      fontFamily: "PTSerifItalic"
    }
  }

  let systemFonts = ["PTSerifRegular", "PTSerifItalic", ...defaultSystemFonts]

  return (
    <View>
      <FontLoader>
        <RenderHTML 
          source={{ html: "<br><br><p>Here is some <em>italic</em> text.</p>"}} 
          systemFonts={systemFonts} 
          tagsStyles={style} 
        />
      </FontLoader>
    </View>
  )
}

While the non-italic text renders properly, the italic text doesn't on Android. Meanwhile, it works fine on iOS.

Using Italic Google Font with RenderHTML

0 Answers0