CODEWITHSUNDEEP
ioscsswkwebview
emenegro
emenegro

Reputation: 6971

WKWebView and Dynamic Type + Custom Fonts

I can't get a WKWebView working with both custom fonts and dynamic type at the same time, but it is working separately.

My CSS for this part is pretty simple:

body {
    font-family: 'MyCustomFont';
    font-size: 15px;
}

To allow dynamic type I change it to this:

body {
    font-family: 'MyCustomFont';
    font: -apple-system-body;
}

I have an observer to listen for the notification UIContentSizeCategory.didChangeNotification to reload the webview, and it changes the font size gracefully, but with the system font, not the custom one.

Any idea on how to have both things working?

Upvotes: 5

Views: 2039

Answers (2)

emenegro
emenegro

Reputation: 6971

I've finally managed to solve it, just add this chunk to the CSS

html {
    font: -apple-system-body;
}

And leave body like this, with no font-size:

body {
    font-family: 'MyCustomFont';
}

With just that, both things would work.

Upvotes: 6

Cody MacPixelface
Cody MacPixelface

Reputation: 1386

The font shorthand property is overriding your font-family property, making only the system font applied to your selector.

You can't use two fonts at the same time for the same selector, but you could try using the system font as a fallback, like this:

font-family: 'MyCustomFont', -apple-system-body;

I'm not sure if this is the answer you're looking for, though...

Upvotes: -1

Related Questions