Using custom fonts in WKWebView

Sashke picture Sashke · Sep 11, 2014 · Viewed 26.9k times · Source

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.

Any ideas how to make custom fonts work in WKWebView?

Sorry for my english

Answer

Aditya Deshmane picture Aditya Deshmane · Feb 24, 2016

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 Fonts provided by application

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.