How change font-family (font-family.ttf from assets) of react-native webview

Question

I am using react-native webview to display some web content in my react-native app. and my app font-family and webview font-family is different. I want to change webview font-family from app.

Is there any method to change font-family of webview (custom-font-from-assets-directory), please help me.. Thanks

Answer 1

you can achieve this, by injecting java script in-to your web-view

i.e.

injecting following code into web view which will change body tag fontFamily

const INJECTED_JAVASCRIPT = `(function() {
   let body = document.getElementsByTagName("BODY")[0];
  body.style.fontFamily = "Courier New";
})();`;

Web View Componenet

<WebView
        source={{ uri: 'https://reactnative.dev' }}
        onLoadEnd={()=>console.log('Successfuly Loaded')}
        injectedJavaScript={INJECTED_JAVASCRIPT}
        onError={syntheticEvent => {
          const { nativeEvent } = syntheticEvent;
          console.warn('WebView error: ', nativeEvent);
        }}
      />

Working Example Link