Webview multiple fonts

Rusty

Rusty

Well-Known Member
Licensed User
Longtime User
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,
 
Sort by date Sort by votes
Rusty

Rusty

Well-Known Member
Licensed User
Longtime User
Thanks, Erel.
Unfortunately, that appears to be Greek to me.
Within B4A, how would I implement a CSS?
 
Upvote 0
Rusty

Rusty

Well-Known Member
Licensed User
Longtime User
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,
 
Upvote 0
Rusty

Rusty

Well-Known Member
Licensed User
Longtime User
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 :)
 
Upvote 0
B

bryon

Member
Licensed User
Longtime User
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.
 
Upvote 0
You must log in or register to reply here.
Top