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


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

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


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


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

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

Web View Componenet

        source={{ uri: '' }}
        onLoadEnd={()=>console.log('Successfuly Loaded')}
        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