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.

Answer 2

Assuming you embed the font in your application as a resource that's copied to the target bundle, you can give the WKWebView access to the font by passing a NSURL to it's folder as the baseURL

NSString *bundlePath = [[NSBundle mainBundle] bundlePath];
NSURL *bundleUrl = [NSURL fileURLWithPath:bundlePath];
[self.webView loadHTMLString:HTML baseURL:bundleUrl];

and define the font-face url without any preceeding path elements, which in turn makes WKWebKit prepend the baseURL

<style>
  @font-face { font-family: 'Custom Font'; src: url('CustomFont.ttf'); }
  ...
</style>

Answer 3

Since I don't want to use another third party just for that and since I'm building the html string itself, I took the first part of using the font-face and instead of using a url to a remote or local file, i converted the fonts to base64.

The css looks like this:

@font-face {
    font-family: 'FONTFAMILY';
    src: url(data:font/ttf;base64,FONTBASE64) format('truetype');
}

You can replace the FONTFAMILY with the family that you need and the FONTBASE64 with the base 64 string that was generated from the font.

If you need to create the base64 string in your application, you can use this, just provide the filename and type (i used it to get other files as well so it's more generic, you can remove the ofType parameter and use @"ttf" instead):

- (NSString*)getBase64FromFile:(NSString*)fileName ofType:(NSString*)type
{
    NSString * filePath = [[NSBundle mainBundle] pathForResource:fileName ofType:type];

    // Create NSData object
    NSData *nsdata = [NSData dataWithContentsOfFile:filePath];

    // Get NSString from NSData object in Base64
    NSString *base64Encoded = [nsdata base64EncodedStringWithOptions:0];

    return base64Encoded;
}

if you want to do it only one time and then save it in some file, you can use any of the online websites that converts files to base64, like this: http://www.opinionatedgeek.com/dotnet/tools/base64encode/

Answer 4

Update: This is now possible using WKURLSchemeHandler.

@interface MySchemeHandler : NSObject <WKURLSchemeHandler>
@end

@implementation MySchemeHandler

- (void)webView:(nonnull WKWebView *)webView startURLSchemeTask:(nonnull id<WKURLSchemeTask>)urlSchemeTask
{
  NSURL *url = urlSchemeTask.request.URL;
  NSString *mimeType = [NSString stringWithFormat:@"text/%@", url.pathExtension]; //or whatever you need
  NSURLResponse *response = [[NSURLResponse alloc] initWithURL:url MIMEType:mimeType expectedContentLength:-1 textEncodingName:nil];
  [urlSchemeTask didReceiveResponse:response];
  NSData *data = [self getResponseData];
  [urlSchemeTask didReceiveData:data];
  [urlSchemeTask didFinish];
}
@end

And when configuring your WKWebView instance:

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
MySchemeHandler *handler = [[MySchemeHandler alloc] init];
[config setURLSchemeHandler:handler forURLScheme:@"myScheme"];
//now pass the config to your WKWebView

------Old answer----------

My guess is that the WKWebView can no longer access fonts specific to the application because it's now in a separate process (XPC).

I got around this by adding the font with @font-face declarations in CSS. See here for details on MDN about how to do this.

Example:

@font-face
{
  font-family: "MyFontFace";
  src:url('url-to-font.ttf');
}

//And if you have a font with files with different variants, add this:
@font-face
{
  font-family: "MyFontFace";
  src:url('url-to-italic-variant.ttf');
  font-style:italic;
}

But this is going to reference a local file, which the WKWebView can't do (I assume you've already discovered this because you're loading an HTML string instead of the local file). As per a comment on this question, I was able to use GCDWebServer to get my local HTML file working. In your app delegate, after adding the relevant files to your project as per the GCDWebServer's wiki on GitHub:

GCDWebServer *server = [[[GCDWebServer alloc]init]autorelease];
NSString *bundlePath = [[NSBundle mainBundle] bundlePath];
[server addGETHandlerForBasePath:@"/"
   directoryPath:bundlePath indexFilename:nil
   cacheAge:0 allowRangeRequests:YES];
[server startWithPort:8080 bonjourName:nil];

Now you can reference an HTML file named test.html in your bundle like this:

NSString *path = @"http://localhost:8080/test.html";
NSURL *url = [NSURL URLWithString:path];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[myWebView loadRequest:request];

Put the aforementioned @font-face declaration in a style element in your HTML file (or in your HTML string if you really just need to load a string) and you should be good to go.

Answer 5

Here is a swift 3 version of @Henrik Hartz awesome answer:

loadHTMLString(htmlString, baseURL: NSURL.fileURL(withPath: Bundle.main.bundlePath))