Webview multiple fonts

Rusty · Feb 21, 2012

I am needing to embed a regular, but special font within normal fonts such as New Times Roman etc.
This needs to be done within a webview HTML.
On the PC, I can successfully embed these together and a browser show them correctly.
I've made this work well with the

B4X:

SpeclFont = typeface.LoadFromAssets("special.ttf")

using a label or view that has a typeface member.
Is there a way to load multiple fonts and display them in a webview?
Thanks,

Erel · Feb 21, 2012

Seems like you can do it with CSS as described here: android - How to use custom font with WebView - Stack Overflow

Rusty · Feb 21, 2012

Thanks, Erel.
Unfortunately, that appears to be Greek to me.
Within B4A, how would I implement a CSS?

NJDude · Feb 21, 2012

Within B4A, how would I implement a CSS?

CSS is added to the HTML document not your B4A code.

Rusty · Feb 21, 2012

Thanks Dude

Rusty · Feb 21, 2012

I still don't see how to point the text at a font.ttf file on the Android within the HTML code.
Can you give an example?
Thanks,

Rusty · Mar 2, 2012

I finally figured this out and for those of you who are struggling with this, as I have, I am posting this simple solution that explicitly shows how to do this.

B4X:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
   <style type="text/css">
      @font-face {
         font-family: MyFont;
         src: url("file:///android_asset/specialfont.ttf")
      }
      body {
         font-family: MyFont;
         font-size: medium;
         text-align: justify;
      }
    </style>
      
</head>
<body>
    This is the text in the special font.
</body>
</html>

The above HTML code works well. You can store the HTML as a file in the assets folder and load it like this:

B4X:

   txt3 = File.ReadString(File.DirAssets, "testpage.html")
      WebView1.LoadHtml(txt3)

Obviously, you can also create the txt3 (string) dynamically within your program embedding the style sheet:

B4X:

<style type="text/css">
      @font-face {
         font-family: MyFont;
         src: url("file:///android_asset/specialfont.ttf")
      }
      body {
         font-family: MyFont;
         font-size: medium;
         text-align: justify;
      }
   </style>

within the string.
I hope this helps anyone struggling with embedding special fonts within a Webview

bryon · Sep 10, 2015

Just a head's up for anyone else finding this thread:
If you're running this in the rapid debugger, you may not see the new font in the webview. I messed with this for quite a while until I accidentally found out I had to compile in release mode to get it to display right.

Erel · Sep 10, 2015

See this thread: https://www.b4x.com/android/forum/t...g-rapid-”-b4a-3-50-version.38981/#post-230988

Webview multiple fonts

Rusty

Well-Known Member

Erel

B4X founder

Rusty

Well-Known Member

NJDude

Expert

Rusty

Well-Known Member

Rusty

Well-Known Member

Rusty

Well-Known Member

bryon

Member

Erel

B4X founder

Similar Threads