Exploring the Power of Custom Fonts with WKWebView and Dynamic Text Sizing

I am facing an issue with implementing a WKWebView that supports both custom fonts and dynamic type simultaneously. Individually, they work fine but not together.

My CSS code for this section is quite straightforward:

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

To enable dynamic type, I modified it to the following:

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

I have set up an observer to detect changes in the notification

UIContentSizeCategory.didChangeNotification
in order to refresh the webview. While the font size adjusts smoothly, it defaults to the system font instead of the custom one.

Any suggestions on how to resolve this and ensure both functionalities work seamlessly?

Answer №1

After putting in some effort, I finally cracked the code. Here's the solution that did the trick:

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

Make sure to retain the original styling for body, without specifying a font-size:

body {
    font-family: 'MyCustomFont';
}

Implementing just these changes should do the job seamlessly.

Answer №2

The use of the font property shorthand is causing your font-family property to be overridden, resulting in only the system font being applied to your selector.

While you cannot apply two fonts simultaneously to the same selector, a workaround could involve setting the system font as a fallback option like so:

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

Although I'm uncertain if this solution aligns with what you had in mind...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporating text and images sourced from a database into an HTML webpage

I am in the process of creating a website using HTML, CSS, and Javascript. My goal is to have the ability to update images, film titles, descriptions, and links from a database that will continue to expand over time. Check out my work in progress page her ...

Generate a new div element dynamicaly after every 10 elements are added

I am facing the following scenario: I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item. Although I have successfully added all the checkboxes to a single div element, I ...

Proper implementation of media viewport for images with backgrounds

Although I am not a front-end developer, I ventured into creating a simple one-page website with an image. To ensure faster loading on smaller screens, I made multiple versions of the image to minimize the amount of data being downloaded. The image is inte ...

How to use CSS to make a child element's width automatically fill the width of its

Is there a way to make the child div info fill the parent div video-featured width while remaining absolute, allowing it to overlap the parent div without using a fixed width? <div class="video-featured col-md-4"> <div class="video"> < ...

Is there a way to ensure that an image stays pinned to the bottom of the screen, regardless of the device or screen

Looking for a solution to keep an image centered at the bottom of a website page regardless of screen size? I've tried different recommendations from Stack Overflow without success. position:fixed; bottom:0px; left:50%; Still struggling to make it wo ...

The CSS class name is not having any impact on the React.js components

Struggling with CSS integration in ReactJS? That's the issue I've been facing while working on a project involving Rails and ReactJS. Despite implementing styles in my JSX files, nothing seems to change visually. Take a look at what my App.jsx fi ...

Determine the aspect ratio with a constant adjustment using CSS/SCSS

I am trying to adjust the aspect ratio of a responsive div to create a square shape with an offset. I want the height to be equal to the width plus the specified offset. Here is an example of what I am attempting: .div { width: 100%; aspect-ratio: 1 / ...

"Exploring the Dynamic Duo of AngularJS ngAnimate and animate.css

I've been working on getting my animation to function correctly with AngularJS and animate.css. In order to achieve this, I set up the SASS in the following way: .slide-animate { &.ng-enter, &.ng-leave{ } &.ng-enter { ...

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

The position of a jQuery element gets reset when both the show and stop animations are used

When I use jQuery's .position() to place an element, everything works fine. But as soon as I display an animation and then cancel it with an ajax call, the position of the element resets. function displayMessage(msg) { var $messageEl = $('#u ...

iOS: NSUserDefaults will not persist data between app launches when terminated

Dear Experts and Friends, Hello everyone, I've been struggling all day trying to solve this issue but nothing seems to be working. I'm attempting to save an array of strings (maximum 20 items) using NSUserDefaults. The data saves and loads fine, ...

The React Native community's Viewpager is not displaying a portion of the following slide/view

Currently, only one slide/view is visible on the screen. I would like to achieve something similar to the example shown https://i.sstatic.net/cwqhw.png How can this be done? I am using the following package: https://www.npmjs.com/package/@react-native-co ...

Struggling to make a div appear right at the top of the page

Struggling with a basic CSS problem as I practice my skills, I am finding it challenging to position a div at the very top of the screen. Despite setting the background-color, the div is not aligning perfectly with the top edge. Interestingly, adding a bor ...

Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this... <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstra ...

Code in Swift that clears the content of the second textfield when typing in the second one

I've been teaching myself Swift for about a week and a half. I'm currently working on creating a converter that switches between inches and centimeters. I have two text fields - one for entering inches and the other for entering centimeters. Afte ...

"Utilizing Bootstrap's hamburger menu for a sleek solution when your menu becomes overcrowded

One interesting aspect of Bootstrap is its ability to collapse menu items into a hamburger menu within the navbar at specific window size breakpoints. However, there are instances where even on larger screens that exceed these breakpoints, the hamburger bu ...

Failure to apply CSS to the class element instead of the div tag

Looking to update the CSS code below to change the color of a div to blue when it matches a specific class: I attempted the following changes, but they did not produce the desired result: &__header { display: flex; justify-content: space-betw ...

Struggling to make changes to a Styled Component in a React application

In a certain file, I have a BaseComponent composed of various other components and being exported. The top level of the BaseComponent contains a wrapper responsible for managing margins. When I export it and attempt to override some styles with: //other fi ...

Has there been a recent issue with FireFox 3 where it fails to clear a float and does not recognize negative margins?

I've been searching online, but haven't come across a definitive answer yet. I'm interested in knowing if there is an issue with Firefox 3 when applying a negative margin to a div that is either clearing a float or containing another floated ...

What strategies and techniques should be considered when creating websites optimized for mobile devices?

With a wealth of experience in programming languages like Java, Python, and C, I actively engage in self-study to enhance my skills. While I have dabbled in creating mobile-friendly websites, upon reviewing my work, it is evident that my frontend developme ...