Using custom fonts in React native Webview

Question

I'm using custom fonts in my entire React native application. I have linked them using react-native link command. They work everywhere except inside the Webview component of Android. It works properly in iOS Webview.

import React, { Component } from "react"
import { View, StyleSheet, Text, WebView, ScrollView, Image } from "react-native"
import HTMLView from "react-native-htmlview"

export class PostDetailPage extends Component {

  static navigationOptions = {
    title: ({ state }) => state.params.post.title,
    header: {
      style: {
        backgroundColor: '#FF9800',
      },
      titleStyle: {
        color: 'white',
        fontFamily: "Ekatra",
        fontWeight: "normal"
      },
      tintColor: 'white'
    }
  }

  constructor(props) {
    super(props)
  }

  render() {
    const post = this.props.navigation.state.params.post
    const html = `
      <!DOCTYPE html>
      <html>
      <head>
        <style type="text/css">
          body {
            font-family: Lohit-Gujarati;
            font-size: 1.25rem;
            color: black;
            padding: 0px 10px 10px 10px;
          }

          p {
            text-align: justify;
          }
        </style>
      </head>
      <body>
        ${post.content}
      </body>
      </html>
    `
    return (
      <View style={{ flex: 1, overflow: "visible" }}>
        <Image source={{ uri: post.featured_image }} style={{ height: 150 }} />
        <WebView
          source={{html}}
          style={{flex: 1}}
          />
      </View>
    )
  }
}

I have tried creating a font-face inside the webview css with url("file:///android_assets/fonts/Lohit-Gujarati"). It doesn't work. Importing google fonts css works. What is the right way to use local custom fonts in React native Android Webview?

@SagarKhatri: Let me know what more information you want. I can't post the entire project, unfortunately. — Akshar Patel, Mar 22 '17 at 05:47
Not whole project, you said you have tried google fonts. so can you paste that code? — Sagar Khatri, Mar 22 '17 at 06:09
@SagarKhatri: Thanks. It works with google fonts css import. Don't know why it wasn't working before. Any way to use the local fonts already linked in the project? — Akshar Patel, Mar 22 '17 at 06:20

mihai1990 · Answer 1 · 2017-06-13T12:32:22.937

5

Creating a font-face inside the webview css with url("file:///android_asset/fonts/Lohit-Gujarati") works if baseUrl is set on WebView:

<WebView
  source={{html, baseUrl: 'someUrl'}}
  style={{flex: 1}}
/>

I'm not sure why it doesn't work without baseUrl, but I think it can be because RN uses a different method to load the WebView when baseUrl is missing:

if (source.hasKey("baseUrl")) {
  view.loadDataWithBaseURL(
      source.getString("baseUrl"), html, HTML_MIME_TYPE, HTML_ENCODING, null);
} else {
  view.loadData(html, HTML_MIME_TYPE, HTML_ENCODING);
}

edited Jun 13 '17 at 12:32

answered Apr 04 '17 at 11:09

mihai1990

632
5
20

1

This works, but the right url is `url("file:///android_asset/fonts/")`, singular. – Eduardo Naveda May 19 '17 at 13:10
@mihai1990 can you tell me what to set at baseUrl ? – Sujit Apr 09 '18 at 11:32
@Sujit As far as I remember you can set any string as baseUrl to make custom fonts work in WebView. – mihai1990 Apr 09 '18 at 18:09
@mihai1990 can you give an example what string in baseUrl? – joshua14 Feb 18 '19 at 07:46
@joshua14 As I said above it can be any string. Even copying literally the 'someUrl' from the answer should work. However this answer is from almost 2 years ago, I'm not sure if it's still actual with latest react native. – mihai1990 Feb 18 '19 at 09:15
@mihai1990 because i'm facing the exact same problem now, and still cannot find the solution.. and btw copying 'someUrl' still didn't work.. – joshua14 Feb 18 '19 at 09:23

score 2 · Answer 2 · answered Oct 27 '18 at 09:47

this code works for Me.

var css = `<head><style type="text/css"> @font-face {font-family: 'BYekan'; src:url('file:///android_asset/fonts/B Yekan.ttf')}</style></head>`;
var HTML = css + `<p style='font-family:BYekan'>Some Text</p>`
<WebView    
  source={{ baseUrl: '', html: HTML }}   
/>

Using custom fonts in React native Webview

2 Answers2

Linked