Android Question [Solved] Webview -How to include the Font information in HTML file?

kps · Aug 11, 2020

Hello all,

I have an HTML file which uses a certain font.
When I load this in Webview, the Font information is not considered.

B4A:

#Region  Project Attributes
    #ApplicationLabel: B4A Example
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
    #DebuggerForceStandardAssets:True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.
    Private xui As XUI
End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    Private WebView1 As WebView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
   
    WebView1.Loadurl(xui.FileUri(File.DirAssets,"First Aid.html"))
   
End Sub

The HTML file has the following format.

HTML:

<style type="text/css">
@font-face {
font-family: MyTamilFont;
src: url("Tab_Shakti_2.TTF")
}

body {
font-family: MyTamilFont;
font-size: medium;
color: black
}
</style>

What should I do to view the HTML page with the correct Font?

I have attached the project as zip file.
You can open the html file in the files folder and see how it looks when the correct font is used.

Regards,
KPS

drgottjr · Aug 12, 2020

technically, you've set it up correctly. it's the way i do it, and my custom fonts display correctly.
but there are 3 potential issues:
1) the location of the font. is it in dirassets?
2) src: url("Tab_Shakti_2.TTF") should be src: url("file:///android_asset/Tab_Shakti_2.TTF"). (although, a direct reference as you have done can work).
more importantly:
3) android is case sensitive, windows is not. see if you can change the name of the font in your project's files folder to all lower case. and then use all lower case to reference it in your html. windows can be funny; i've experienced issues when trying to change file names from upper case to lower case. it looks like you did it, but windows basically ignores the changes. i often have to change the name to something random (lower case) and then rename it to what i wanted (lower case). then windows things it's ok . the point is: TTF = ttf in windows, TTF <> ttf in android.

kps · Aug 12, 2020

Success !

@drgottjr
You were right on all counts!
The prolem was the "case sensitivity"
I tried out various options.

The conclusions are....
1. Case Sensitivity is paramount.
2. The path can be

HTML:

src: url("file:///android_asset/tab_shakti_2.ttf")

or

B4X:

src: url("tab_shakti_2.ttf")

3. I pushed the font to a subdirectory called fonts and changed it to

HTML:

src: url("fonts/tab_shakti_2.ttf")

It works.

4. One big lession I learnt in the process was, if you make any changes in the "Files" directory of your project, do a "Tools ->Clean Project". Otherwise, you would be barking up the wrong tree !.

Until I discovered this, I would delete the file (to be modified) in the Files Tab, and then drag and drop the modified file in the Files Tab once again.

5. Another big discovery was, you don't have to drop any file in the "Files" folder at all. You can directly load the files in the Files folder of your project. The files need not appear in the Files Tab. Just make sure you do a "Clean Project" before you compile.

Thank you @drgottjr

Regards,
KPS

Android Question [Solved] Webview -How to include the Font information in HTML file?

kps

Member

Attachments

drgottjr

Expert

kps

Member

Similar Threads

Android Question [Solved] Webview -How to include the Font information in HTML file?

kps

Member

Attachments

drgottjr

Expert

kps

Member

Similar Threads

Privacy & Transparency

Privacy & Transparency