iOS Question App with custom font - can a webview use it?

Sandman

Expert
Licensed User
Longtime User
So I have an app with a custom font. In this app I use a webview. I thought I could specify the custom font in the html and use it that way. But I'm not having much luck.

Before I investigate further, I just wanted to quickly ask the forum: Is this something that I should expect to work, or are webviews "sandboxed" and can't use the custom font because it's not installed system-wide in the iPhone, or something like that?
 
Solution
1675837299478.png


B4X:
Dim FontFile As String = "vermidirouge 1.0.ttf"
Dim s As String = $"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0" />
<style>
@font-face
{
    Font-family: 'VermidiRouge';
    src: local('VermidiRouge'),url('${FontFile}') format('opentype');
}
</style>
</head>
<body>

<h1 style="font-family:VermidiRouge">This label uses a custom Font and it is inside WebView</h1>

</body>
</html>

"$
File.WriteString(xui.DefaultFolder, "test.html", s)
If File.Exists(xui.DefaultFolder, FontFile) = False Then
    File.Copy(File.DirAssets, FontFile, xui.DefaultFolder, FontFile)
End If
WebView1.LoadUrl("file://" & File.Combine(xui.DefaultFolder, "test.html"))

You need to put the font file in the...

Erel

B4X founder
Staff member
Licensed User
Longtime User
1675837299478.png


B4X:
Dim FontFile As String = "vermidirouge 1.0.ttf"
Dim s As String = $"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0" />
<style>
@font-face
{
    Font-family: 'VermidiRouge';
    src: local('VermidiRouge'),url('${FontFile}') format('opentype');
}
</style>
</head>
<body>

<h1 style="font-family:VermidiRouge">This label uses a custom Font and it is inside WebView</h1>

</body>
</html>

"$
File.WriteString(xui.DefaultFolder, "test.html", s)
If File.Exists(xui.DefaultFolder, FontFile) = False Then
    File.Copy(File.DirAssets, FontFile, xui.DefaultFolder, FontFile)
End If
WebView1.LoadUrl("file://" & File.Combine(xui.DefaultFolder, "test.html"))

You need to put the font file in the assets folder.
 
Upvote 0
Solution

Sandman

Expert
Licensed User
Longtime User
Excellent, it was this part of the puzzle that I needed to get it to work. Thanks!
CSS:
src: local('VermidiRouge'),url('${FontFile}') format('opentype');
 
Upvote 0
Top