react-native-autoheight-webview Font Family

25 Views Asked by At

How to change the font family of this webView? I tried so many solutions please any help, also I tried to inject javascript in calling the font-face

Note that I'm using expo

  const fontUrl = Platform.select({
    ios: "JF-Flat-Regular.ttf",
    android: "../../Fonts/JF-Flat-Regular.ttf",
  });
<AutoHeightWebView
  originWhitelist={["*"]}
  source={sourceDetails}
  style={{ width: Dimensions.get("window").width - 25 }}
  automaticallyAdjustContentInsets={false}
  customScript={injectFunctionScript}
  onMessage={handleMessage}
  customStyle={`
      @font-face {
        font-family: "JF-Flat-Regular";
        src: url('${fontUrl}') format('truetype')
      }
    * {
        font-family: "JF-Flat-Regular", sans-serif;
      }
      body {
        font-family: "JF-Flat-Regular", sans-serif;
      }
      /* Example custom style */
      p, div, html {
        font-family: "JF-Flat-Regular", sans-serif;
      }
      span {
        font-family: "JF-Flat-Regular", serif;
        text-decoration: underline;
        text-decoration-color: green;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px
      }
      `}
  viewportContent={"width=device-width, user-scalable=no"}
  scrollEnabled={false}
/>
0

There are 0 best solutions below