WebViewer Custom Font

[Fossil]

I have found info on using custom fonts in textboxes and buttons, but I am strugging with applying a custom font within the WebViewer component. On looking at the wider Android community it seems the approach is to define a style and then apply it to the text elememt. The screen shot below shows the WebViewer component displaying music and below are the notes in blue text. I want to replace the blue text with a custom font.

This next screen shot is the chunk of style script where I am trying to implement the custom font.

I have the font file loaded in assets. The CSS partly works in that I get blue text at a particular size - but not in the custom font which should actually be a 'Tab' notation. This screen shot is just one of a number of attemps using the CSS approach, but none have worked.
Any ideas anyone?

[TIMAI2]

Where is the html file ?

If the html file and the font are in the same location, then just use a relative filepath, e.g.
[edited - see below]
src:="TinWhistleTab.ttf";
src: url('TinWhistleTab.ttf');

or provide a full path e.g.

src:="file:///storage/emulated/0/Download/TinWhistleTab.ttf";
src: url('file:///storage/emulated/0/Download/TinWhistleTab.ttf');

The webviewer will not understand http://localhost, this is an AI2 functionality...

[Fossil]

@TIMAI2

Where is the html file ?

The html file, TinWhistleTab.ttf, as well as a CSS file and javascript file are all in the Media (assets) of the AI2 app. I was using "http://localhost/..." as I had read that was now the way to be sure assets were seen in both development and compiled form.

The webviewer will not understand http://localhost, this is an AI2 functionality...
I'm not sure why you say that because, for example, in these lines from near the top of the html execute correctly - except for the attempt at custom font.

I tried src:="TinWhistleTab.ttf"; with the ttf in assets and also with the ttf in Download
src:="file:///storage/emulated/0/Download/TinWhistleTab.ttf";
Neither of these displayed the custom font - but neither did they give any error messages. I guess html is designed to not grumble when some syntax or functionality is lacking.

I read somewhere that WebView has limitations. Maybe it can't handle custom fonts ??

[TIMAI2]

Are you using the correct syntax for css?

From what I see elsewhere, it should be like this:

@font-face {
font-family: 'whistle';
src: url('TinWhistleTab.ttf');
} 

div {
font-family: 'whistle';
}

ref

[Fossil]

Thanks for your suggestions. After a lot of messing around with html syntax I finally got something that works with the custom font. I set up a small example app that shows the custom font used in (1) a Label, (2) the standard Webviewer and (3) the Custom Webviewer. This might be of help to others so it is attached as CustomFont.aia which includes the html file in assets.
CustomFontTest.aia (120.9 KB)

[TIMAI2]

As I previously said, if the font file is in the same location as the html file, you only need to use the filename, no path is required:

@font-face {
	font-family: "Tin Whistle Tab";
	src: url("TinWhistleTab.ttf");
}

p.tab {
 font-family: "Tin Whistle Tab";
 font-size: 64px;
 background-color: White;
}