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

Published

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-local-directory), please help me.. Thanks

Source: Ios Questions

Published
Categorised as android, ios, react-native, react-native-webview, reactjs Tagged , , , ,

Answers

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


Alexandria Von

Leave a Reply

Your email address will not be published. Required fields are marked *

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq