CODEWITHSUNDEEP
reactjsreact-native
TheDeveloper
TheDeveloper

Reputation: 1217

How to update Webview font family and size

I'm displaying the HTML content in webview and trying to have it use the font file used in the app. I saw this example but it didnt work for me: Using custom fonts in React native Webview

Am I missing anything is there another way to do it ?

var css = `
<head>
    <style type="text/css">
        @font-face {
            font-family: ''open-sans-bold'';
            fontSize: 19;
            src: url('./assets/fonts/OpenSans-Bold.ttf')
        }
    </style>
</head>`;

var htmlContent = `${css}
<h1 style='font-family:BYekan'>Header</h1>
<p style='font-family:BYekan'>Some Text</p>
`

<WebView 
   style={{ backgroundColor: 'transparent' }} 
   source={{ html: htmlContent }} 
/>

Upvotes: 0

Views: 362

Answers (1)

BloodyMonkey
BloodyMonkey

Reputation: 1634

You defined your font as ''open-sans-bold'' (with double single quotes ? Why ?) and you use style='font-family:BYekan'

Good font-face

@font-face {
 font-family: 'BYekan';
 fontSize: 19;
 src: url('./assets/fonts/OpenSans-Bold.ttf')
}

Upvotes: 1

Related Questions