{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 趁早两清 的问题《Using custom fonts in React native Webview》','https://www.manongdao.com/q-1335353.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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?
this code works for Me.
Custom font is not working from react-native-webview version 7.0.1 to 9.2.2
Creating a font-face inside the webview css with url("file:///android_asset/fonts/Lohit-Gujarati") works if baseUrl is set on WebView:
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: