iOS Question Using Custom Font in WKWebView

Ohanian

Active Member
Licensed User
Longtime User
Hi,

Is there any working sample for using a custom font in WKWebView?

Here's my code :
B4X:
#AppFont: dubaiw23_medium.ttf

tTypefaceMedium = Font.CreateNew2("DubaiW23-Medium", 18)

Sub LoadWebView(webview As WKWebView, sText As String)
 
 Dim s As String = "<html>" & _
  "<head>" & _
  "<style Type='text/css'>@font-face { font-family: 'DubaiW23-Medium'; font-size: 53px; src: url(dubaiw23_medium.ttf);} </style>" & _
  "</head>" & _
  "<body>" & _
  "<div style='direction: rtl; font-family: 'DubaiW23-Medium'; color: red'>" & sText  & "</div>"  & _
  "</body>" & _
  "</html>" 
  
 webview.LoadHtml(s)
 
End Sub

thanks in advance
 
Last edited:

Erel

B4X founder
Staff member
Licensed User
Longtime User
This works:
B4X:
    WKWebView1.LoadHtml($"
    <style>
  @font-face { font-family: 'PaperCuts2'; src: url('papercuts-2.ttf') format('truetype'); }

    </style>
    <p style="font-family: PaperCuts2">
    This is a test
    </p>
    "$)
Based on the custom fonts example: https://www.b4x.com/android/forum/threads/custom-fonts.46461/#content
You should also put a copy of the font file in the Files tab.
 
Upvote 0

Ohanian

Active Member
Licensed User
Longtime User
This works:
B4X:
    WKWebView1.LoadHtml($"
    <style>
  @font-face { font-family: 'PaperCuts2'; src: url('papercuts-2.ttf') format('truetype'); }

    </style>
    <p style="font-family: PaperCuts2">
    This is a test
    </p>
    "$)
Based on the custom fonts example: https://www.b4x.com/android/forum/threads/custom-fonts.46461/#content
You should also put a copy of the font file in the Files tab.

It's strange but the custom font is not working in WKWebView!
there are a label and a WKWebView on the form, only the label with the custom font is ok.
please see the attachment.
 

Attachments

  • WKWebView.jpg
    WKWebView.jpg
    52.4 KB · Views: 315
Upvote 0
Top