Android Question Custom fonts in webview no longer work!

Creaky

Member
Licensed User
Longtime User
I really hope someone can help me with this!

I build an app last year that uses webviews to display html strings I recieve from a webservice.
Those html strings need to be displayed in a custom font.

I use CSS in the webview to define the custom fonts like this:

B4X:
<html>
    <style type=""text/css"">
    @font-face{
        font-family: eurostile; 
        src: url('file:///android_asset/EurostileLTMedium.ttf');
    } 
    @font-face{
        font-family: 'italic'; 
        src: url('file:///android_asset/italic.ttf');
    } 
    @font-face{
        font-family: 'bold'; 
        src: url('file:///android_asset/EurostileLTBold.ttf');
    } 
    body{
        color: #464646; 
        line-height:150%; 
        font-family: eurostile;
    } 
    B, strong, h6{
        color: #464646; 
        line-height:150%; 
        font-family: 'bold';
    } 
    em, i{
        color: #464646; 
        line-height:150%; 
        font-family: 'italic';
    } 
    a { 
        color: rgb(22, 115, 159); 
    }
</style>
<body>This is a <b>test</b>, does <i>it work</i>?</body>
</html>

This used to work perfectly. But now I'm making a new version of the app and I notice that suddenly the custom fonts are no longer working in the webviews! I'm using the exact same code as last year, without a single change.

Did something change in the way the webview works? Does the fact that I recently upgraded to b4a 3.8 have anything to do with it?

I've tried everything but I can't get it to work! Please help me out because the customer is waiting on me :(
 

Creaky

Member
Licensed User
Longtime User
Here is a testproject that demonstrates what I'm doing.
Pretty straight forward, but on my Nexus 5 with android 4.4.4 it doesn't show the custom fonts in the webview.

Can someone give this project a try on their device?
 

Attachments

  • fonttest.zip
    100 KB · Views: 430
Upvote 0

Creaky

Member
Licensed User
Longtime User
Cried to soon, I figured it out :)

It turns out that the filename of the font files is all lower case, while the files view in b4a shows the filenames to contain caps.
Apperantly the webview demands the filename in the CSS to be the exact same case as the filename of the font. I think this is new, as I didn't have this problem before...
 
Upvote 0

DonManfred

Expert
Licensed User
Longtime User
Cried to soon, I figured it out :)

It turns out that the filename of the font files is all lower case, while the files view in b4a shows the filenames to contain caps.
Apperantly the webview demands the filename in the CSS to be the exact same case as the filename of the font. I think this is new, as I didn't have this problem before...

You are right. The Case of the filenames in Assets must fit the definition in CSS; that´s the CORRECT behaviour btw.

I cannot say if this has changed in v3.8 or not; i must believe you ;-)

I´ve checked your projekt and the first i was trying was to rename the filenames in css to the correct case cause i know this creates issues on linux-systems (android is based on linux). So i suppose; if it worked in the past it worked due to an bug.

I would say; NOW it is working like expected.
 
Upvote 0
Top