Using custom fonts in WKWebView

by

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.

Leave a Comment

tech