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

try this - https://stackoverflow.com/questions/42943384/using-custom-fonts-in-react-native-webview — Akila Devinda, Sep 02 '20 at 05:29

score 4 · Answer 1 · answered Sep 08 '20 at 19:06

4

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

answered Sep 08 '20 at 19:06

Muhammad Iqbal

1,394
1
14
34

I need to use font(.ttf) from local directory – jamal Sep 09 '20 at 06:21
you can not use local fonts from mobile and use them in you hosted web site. for this you need to host .ttf file somewhere and load it in your css – Muhammad Iqbal Sep 09 '20 at 10:45
ttf file inside my asset folder – jamal Sep 09 '20 at 11:10
from assets you can not use in web-view for that you need to host it in dropbox or google drive and then inject it in javascript – Muhammad Iqbal Sep 09 '20 at 12:28

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

1 Answers1