Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't set custom font in WebView React Native

See original GitHub issue

Is this a bug report?

React Native 0.51 Testing On Android OS: Ubuntu 16.04 GNOME

I have already asked this on StackOverflow but nobody has answered it. I’ve been searching and trying different things for 1 week now. I’m using a WebView to show some text with proper justification (Android doesn’t support justification). I’m exhausted trying to apply my custom (local) font in WebView text style. I’ve tried the code below but no result:

var html = `<h1 style="font-family: MyFont"> some text here </h1>`
<WebView
  source={{html}}
  style={{width: 200, height: 200}}
/>

This is my react native file structure:

Project
  -android
  -node_modules 
  -...
  -assets
   --fonts
    ---MyFont.ttf

MyFont.ttf is located inside Project/assets/fonts/. I tried this too but can’t get it to work. it says i should set the baseUrl but i don’t know what url to set. Please help me I really need a comprehensive and working example.

Issue Analytics

State:
Created 6 years ago
Comments:10

Top GitHub Comments

2reactions

shadowm2commented, Dec 16, 2017

var css = `<head><style type="text/css"> @font-face {font-family: IRANSansWeb; src: url('file:///assets/fonts/IRANSansWeb(FaNum).ttf') format('truetype');}
		</style></head>`
var html = css + `<h1 style="font-size: 15; font-family: IRANSansWeb"> Some Text </h1>`

Tried this on Andorid, not working 😦 @fahadhaq

2reactions

fahadhaqcommented, Dec 15, 2017

I have not tried this yet. But I had this code working on my Android app previously. Currently its being re-written in React-native.

So from what I understand you need to set the baseUrl in the html.

This is what I had previously in my android code for HTML

String head1 = "<head><style type=\"text/css\">@font-face {font-family: 'OpenSans-Light';src: url('file:///android_asset/fonts/OpenSans-Light.ttf') format('truetype');}";
head1 = head1 + "@font-face {font-family: 'OpenSans-Italic';src: url('file:///android_asset/fonts/OpenSans-Italic.ttf') format('truetype');}";
head1 = head1 + "@font-face {font-family: 'OpenSans-Bold';src: url('file:///android_asset/fonts/OpenSans-Bold.ttf') format('truetype');}";
head1 = head1 + "@font-face {font-family: 'OpenSans-Regular';src: url('file:///android_asset/fonts/OpenSans-Regular.ttf') format('truetype');}";
head1 = head1 + "</style></head>";
String wbStr="<html>"+head1
                           + "<body>" + deals.extra
                           + "</body></html>";

As you can see I added a link to the font in the HTML.

My android code however had no BaseUrl defined. I assume it was reading the baseurl from the HTML here is the line from android that loaded the data

webViewDeals.loadDataWithBaseURL(null, wbStr, "text/html", "UTF-8", null);

loadDataWithBaseURL the first param is baseurl. As you can see I have left it empty. but if you define the base url you prob wont need to set it in the HTML.

Hope this helps you. I am working on this later today. Will let you know if this works for me. I am trying to figure out how to link to iOS.

Thanks in advance