Using a Custom Local Stored Font with WKWebView in iOS Apps

Описание: Learn how to successfully implement custom fonts in WKWebView for your iOS applications using Swift and Xcode.
---
This video is based on the question https://stackoverflow.com/q/62731562/ asked by the user 'David' ( https://stackoverflow.com/u/9548591/ ) and on the answer https://stackoverflow.com/a/62732633/ provided by the user 'David' ( https://stackoverflow.com/u/9548591/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Use custom local stored font with WKWebView

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Use a Custom Local Stored Font with WKWebView in iOS Apps

When developing iOS applications, using custom fonts can enhance the visual appeal and overall user experience. If you've ever tried to use a locally stored font within a WKWebView and ran into issues, you're not alone. This guide will guide you through the problem and provide a clear step-by-step solution.

The Problem

Let's face it: using custom fonts in WKWebView can be tricky. In one example, a developer successfully imported a font called Blastimo.ttf into their Xcode project and was able to use it for labels within the app. However, when they attempted to load HTML content that references the custom font within a WKWebView, it defaulted to a standard system font instead. Here's a brief recap of what they did:

Font Import: The Blastimo.ttf font was successfully imported into the Xcode project.

Target Membership: The font’s target membership was correctly enabled.

Info.plist Configuration: They added an entry for Fonts provided by application in their Info.plist file.

Even with these configurations, loading HTML content with custom fonts in WKWebView didn't work as expected.

The Solution

The key to successfully using custom fonts in WKWebView lies in how the HTML content is loaded. The original code that the developer used to load the HTML looked like this:

[[See Video to Reveal this Text or Code Snippet]]

This code initializes the web view, but it fails to provide a reference for resolving the font file.

Updated Code

To solve the problem, replace the line that loads the HTML as follows:

[[See Video to Reveal this Text or Code Snippet]]

Explanation

baseURL: Specifying the baseURL parameter allows the WKWebView to resolve relative paths for resources like fonts, images, and stylesheets. By using Bundle.main.resourceURL, you're directing the web view to look in your app's resources, where the font file is located.

Resilience in Load: With this change, you can be assured that the web view will have the necessary context to locate and display the custom font correctly.

Example of the Complete Setup

Here is how your complete function might look with the updated code:

[[See Video to Reveal this Text or Code Snippet]]

Testing

Once you've made this change, run your application again. The custom font should now load correctly within the WKWebView, giving your HTML content the unique style you intended.

Final Thoughts

Integrating custom fonts into your iOS applications can significantly improve the user experience and aesthetics. If you ever encounter fonts not loading as expected in WKWebView, remember to align your base URL correctly. With just a little tweak in your code, you'll be able to enhance your app's design effortlessly. Happy coding!