iOS Question Using Custom Font in WKWebView

Ohanian · Feb 18, 2020

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

Erel · Feb 19, 2020

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.

Ohanian · Feb 19, 2020

Erel said:
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.

Erel · Feb 19, 2020

Please upload the project.

Ohanian · Feb 19, 2020

Erel said:
Please upload the project.

Please see the attachment.

Semen Matusovskiy · Feb 19, 2020

DubaiW23 ?

Actually, Erel's sample works fine. Alone, what I can't understand, how WKWebView calculates font size.

Erel · Feb 19, 2020

I haven't ran your project but it looks like you skipped the bold instructions. Read the second post again.

iOS Question Using Custom Font in WKWebView

Ohanian

Active Member

Erel

B4X founder

Ohanian

Active Member

Attachments

Erel

B4X founder

Ohanian

Active Member

Attachments

Semen Matusovskiy

Well-Known Member

Erel

B4X founder

Similar Threads