Loading a custom font into React Native Webview on Android - react-native

Question

I am using react-native-dynamic-fonts to inject dynamic fonts at run time.
I downloaded Spicy Rice from Google Fonts and I am using it like so:
export default class App extends Component<Props> {
componentWillMount() {
loadFonts([{name: 'SpicyRice-Regular', data: font, type: 'ttf'}], true).then(function(names) {
console.log('Loaded all fonts successfully. Font names are: ', names);
});
}
render() {
return (
<View style={{flex: 1, marginTop: 150}}>
<Text style={{fontFamily: 'SpicyRice-Regular', fontSize: 25, color: 'red'}}>Foo</Text>
<WebView style={{ flex: 1, }} source={content} />
</View>
);
}
}
I see my console log and it returns SpicyRice-Regular. However, when I try to use it in my WebView on Android, it doesn't seem to work.
My WebView simply uses:
p {
font-size: 150px;
font-family: 'SpicyRice-Regular';
font-weight: 400;
font-style: normal;
}
However, it renders on iOS but doesn't on Android.
iOS:
Android:

Answer 1

Font's don't waterfall through for Android Webview. Just like the Chrome browser, each instance of a Webview is sandboxed into its own environment.
You do have access to the filesystem though and you can to link directly to the font asset using url("file:///android_asset/fonts/<filename>") in the Webview CSS properties so something like this should work:
p {
font-size: 150px;
font-family: 'SpicyRice-Regular';
font-weight: 400;
font-style: normal;
src: url('file:///android_asset/fonts/SpicyRice-Regular.ttf')
}