Using custom fonts in WKWebView

Question

I'm using custom fonts in my app. They are copied to bundle and hardcoded to appName-info.plist. This fonts works perfectly in the whole app and in UIWebView.

Im loading htmlString [webView loadHTMLString:htmlString baseURL:nil]; I use this fonts in webView with css: fontFamily: fontName

But when i try to use WkWebView custom fonts not working. WkWebView displays random default fonts.

I tried to load it with main bundle path in base url and using font-face in css - WkWebView still displays random fonts.

How can I make custom fonts work in WKWebView?

Answer 1

I faced same issue, in my case i could fix it WITHOUT using base64 encoding and GCDWebServer.

Scenario:

• WkWebView loading is through string html
• WkWebView is using local .css
• Fonts are local and are added at top level project
• Entries for fonts are provided in appName-info.plist under key UIAppFonts / Fonts provided by application (Note: We need to make this dance because WKWebView ignores this key, but it is still a good idea to declare it so you can use the fonts in native controls)

---

Solution:

Add font face in .css at top level as follows

@font-face {     font-family: 'FontFamily';     src: local('FontFamily'),url('FontFileName.otf') format('opentype'); } 

---

DEMO PROJECT:

GitHub Project Link

NOTE: Fresh demo app run may take 2-3 sec, I have tested it for long html string it works same as UIWebView, no lags. Same font may look bit smaller in WKWebView than UIWebView.