Webview custom fonts with @font-face?

Getting Started Newbie Questions
#1

Hello. I’m making webview-based game and I can’t include custom fonts on my page by some reason. I have a bundle (generated with Parcel bundler) which I show in my webview and where all of my files are.

I have tried all the font formats, which normally should work fine in Chrome (which is my default Android browser): ttf, woff, woff2, svg. And it works fine on my desktop and in Corona Simulator. But not on the real device and I can’t understand why.

I’m including the fonts as usual in web, with @font-face and all files are placed in the same bundle folder in the end. Could you please tell me what can I do wrong? Is there some specific things that I probably don’t know about fonts in webviews in Corona?

P.S. It also works fine when I’m including fonts directly from Google Fonts by adding <link> tag in my html file.

Thank you.

#2

Can you provide more information? Are you including these font files in your app (in the folder with your main.lua?) Are you using local .html files or are you downloading them from your server??

Have you used “adb logcat” to look for errors from your device’s console.log?

Rob

#3

I am using local html file which includes one css file (in the same folder) which includes @font-face directive. And this directive points to font files in the same dir. I have this structure:

\_ root folder with main.lua |\_ webview &nbsp;&nbsp; |\_ dist &nbsp;&nbsp;&nbsp;&nbsp; |\_ index.html &nbsp;&nbsp;&nbsp;&nbsp; |\_ main.css &nbsp;&nbsp;&nbsp;&nbsp; |\_ my-font.ttf

so I’m opening index.html from webview folder. And no, I haven’t use adb logcat yet.

#4

How are you trying to reference the font file? Perhaps share your HTML code.  Please use the code formatting option (the blue <> in the row with Bold, Italic etc) and paste your HTML in there.

Thanks

Rob

#5

index.html file includes css file with following code:

@font-face{ font-family: "Roboto"; src: url("./roboto.ttf") format("truetype"); }

it works fine everywhere except android device.

#6

I use this code:

May help.

[lua]wv = (WebView) findViewById(R.id.webView1);

String pish = “<html><head><style type=“text/css”>@font-face {font-family: MyFont;src: url(“file:///android_asset/font/BMitra.ttf”)}body {font-family: MyFont;font-size: medium;text-align: justify;}</style></head><body>”;
String pas = “</body></html>”;
String myHtmlString = pish + YourTxext + pas;

wv.loadDataWithBaseURL(null,myHtmlString, “text/html”, “UTF-8”, null);[/lua]

I was posted same code at another Source .

Give me feedback after it.

Cheer!  ;) 

#7

Hi @bitgidgg.

That code does not appear to be for Corona. To be most helpful to our developers, posting code that will work in Lua using Corona API’s is your best bet.

Rob

#8

Can you provide more information? Are you including these font files in your app (in the folder with your main.lua?) Are you using local .html files or are you downloading them from your server??

Have you used “adb logcat” to look for errors from your device’s console.log?

Rob

#9

I am using local html file which includes one css file (in the same folder) which includes @font-face directive. And this directive points to font files in the same dir. I have this structure:

\_ root folder with main.lua |\_ webview &nbsp;&nbsp; |\_ dist &nbsp;&nbsp;&nbsp;&nbsp; |\_ index.html &nbsp;&nbsp;&nbsp;&nbsp; |\_ main.css &nbsp;&nbsp;&nbsp;&nbsp; |\_ my-font.ttf

so I’m opening index.html from webview folder. And no, I haven’t use adb logcat yet.

#10

How are you trying to reference the font file? Perhaps share your HTML code.  Please use the code formatting option (the blue <> in the row with Bold, Italic etc) and paste your HTML in there.

Thanks

Rob

#11

index.html file includes css file with following code:

@font-face{ font-family: "Roboto"; src: url("./roboto.ttf") format("truetype"); }

it works fine everywhere except android device.

#12

I use this code:

May help.

[lua]wv = (WebView) findViewById(R.id.webView1);

String pish = “<html><head><style type=“text/css”>@font-face {font-family: MyFont;src: url(“file:///android_asset/font/BMitra.ttf”)}body {font-family: MyFont;font-size: medium;text-align: justify;}</style></head><body>”;
String pas = “</body></html>”;
String myHtmlString = pish + YourTxext + pas;

wv.loadDataWithBaseURL(null,myHtmlString, “text/html”, “UTF-8”, null);[/lua]

I was posted same code at another Source .

Give me feedback after it.

Cheer!  ;) 

#13

Hi @bitgidgg.

That code does not appear to be for Corona. To be most helpful to our developers, posting code that will work in Lua using Corona API’s is your best bet.

Rob