Modifying Fonts on Android Webview in Real Time

Currently, I am facing a challenge with my webview that is loaded with HTML data. My goal is to dynamically change the font of the HTML content during runtime based on user preferences. To achieve this, I have implemented a feature allowing users to select fonts from the /system/fonts directory.

However, I am struggling to apply the selected font to the webview effectively. I attempted to use JavaScript for this purpose:

String fontString = "font-family: 'myFont'; url: /system/fonts/DroidSans.ttf;";
if (android.os.Build.VERSION.SDK_INT < 19) {
    webview.loadUrl("javascript:changeStyle('body', '" + fontString + "')");
} else {
    webview.evaluateJavascript("javascript:changeStyle('body', '" + fontString + "')", null);
}

The above code snippet calls the changeStyle() function defined in the HTML's JavaScript:

function changeStyle(tag, style) {
    var myList = document.getElementsByTagName(tag); // get all p elements
    var x = myList.length;
    myList[0].setAttribute("style", style);
}

'Unfortunately, the implementation is not producing the desired result. While I am confident in the functionality of the changeStyle() JavaScript function – as it successfully modifies font size and color – it fails to update the font as intended.

Answer №1

Avoid using setAttribute to modify the style:

Here's a way to set the font style:

myList[0].style.font = FontStyle;

You can provide the font style in this format to the changeStyle function,

FontStyle="italic bold 22px arial,serif";
or any other font you prefer.

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

Ext.ux.TDGi.iconMgr is a cutting-edge plugin designed specifically for the latest version of

Has anyone successfully migrated the Ext.ux.TDGi.iconMgr plugin to ExtJS 4? (http://tdg-i.com/44/extuxtdgiiconmgr...-icons-and-css) ...

How can I transfer a collection of JSON objects from JavaScript to C#?

Feeling a bit confused here. I have some Javascript code that will generate JSON data like the following: {type:"book" , author: "Lian", Publisher: "ABC"} {type:"Newspaper", author: "Noke"} This is just one example, I actually have more data than thi ...

Enhancing the aesthetic appeal of a form

I have created a form in HTML that utilizes JavaScript to pull data from a database. I am looking to style the form, but I'm unsure of how to proceed. Below is the form along with some CSS code. How can I integrate the two together? <form id=" ...

Adjust the size of the div menu according to the window's dimensions

Is there a way to make a menu that will resize both the width and height of the window? I've managed to resize the width using %, but for some reason, the height isn't cooperating. I've experimented with max-width/height settings and tried ...

Can a specific section of an array be mapped using Array.map()?

Currently, I am working on a project utilizing React.js as the front-end framework. There is a page where I am showcasing a complete data set to the user. The data set is stored in an Array consisting of JSON objects. To present this data to the user, I am ...

Guide to acquiring the webViewLink using Google Drive Api v3?

I'm having trouble locating the webViewLink. The documentation (https://developers.google.com/drive/api/v3/reference/files) states that I should receive this parameter when requesting gapi.client.drive.files.list(). However, I don't even have a c ...

Place the div absolutely on top of the Flash content

Can a <div /> be absolutely positioned over a Flash banner without including wmode="transparent" in the banner? I am trying to display a lightbox above my ads, but I cannot make changes to the banners since they are provided by a third party. Edit: ...

To validate any object, ensure that it contains a specific key before retrieving the corresponding value in typescript

When looking at a random object, my goal is to verify that it follows a certain structure. obj = {WHERE:{antherObject},OPTIONS{anotherObject}} Once I confirm the object has the key using hasProperty(key), how can I retrieve the value of the key? I thoug ...

What is the best way to include an object within an array that is a property of another object in React.js?

Greetings, I apologize for the somewhat ambiguous title. It was a challenge to find a clearer way to express my thoughts. Currently, I am engrossed in my personal project and have encountered a particular issue. I would greatly appreciate any advice or gu ...

Using JavaScript to Retrieve URLs and Identify HTTP Status Code 403

In my JavaScript code, I am attempting to retrieve a 403 Forbidden response code using JavaScript. I have tried modifying the following code, but it does not seem to be working for me: <script type="text/javascript"> var request = new XMLHttpRequ ...

What could be the reason for the Javascript function failing to run?

I need assistance in executing a function called "send()" which includes an AJAX request. This function is located in ajax.js (included in the code snippet) The Ajax success updates the src attribute of my image. The function seems to be working correctly ...

Javascript is not fetching the value

Here is the code snippet I am working with: var categoryDetailId = $("#createEventForm-categoryDetail-idCategory").val(); and this link from my rendered page: After clicking the button, it returns NaN Update: I tried setting it manually, but it still ...

Tips on displaying just two buttons in one line

When using *ngFor to display multiple buttons, all buttons appear in one column. I want to have only 2 buttons in a row: the green buttons in one line, and the red buttons in the next line. How can I achieve this? Here is what I have tried: <div class= ...

HTML - implementing a login system without the use of PHP

While I am aware that the answer may lean towards being negative, I am currently in the process of developing a series of web pages for an IST assignment in Year 9. Unfortunately, the web page cannot be hosted and our assessor lacks the expertise to utiliz ...

Decoding various JSON arrays received through AJAX requests

After returning two objects as JSON through AJAX, I am facing an issue with accessing the values in these two lists. Previously, when I had only one list, I could parse it easily. data = serialize("json", vm_obj) data2 = serialize("json", user_networks_li ...

Leveraging pre-rendered HTML in Vue.js components for both parent and child elements

Currently, I am rendering all the HTML server-side and attempting to use Vue to set this HTML as the $el for two components. According to the lifecycle diagram, this should be possible. There is a parent Vue instance (which binds to #main) that contains a ...

Ways to stop a page from refreshing when encountering an error?

I am currently working on a code that is designed to extract user input from a form. I have successfully implemented a JavaScript code to verify whether the fields in the form are filled or not. Everything is functioning correctly, except for one recurring ...

Creating a sleek and modern design using Bootstrap 3 that maximizes both width and height, featuring a 3

I've hit a roadblock with this basic webpage (I know it's not the most exciting project, but bear with me). I've been using Bootstrap for years, but now my manager wants it to be mobile-friendly. No matter what I try, I can't seem to ge ...

Using Angular and Jade to pass an array from a controller to script tags

I am trying to figure out how to access an array in my controller and display it accurately within the <script> tags in my jade template. For instance: Controller.js $scope.myArray = ["item1","item2"]; Within my index.jade: script. var clien ...

Tips on keeping consistent pixel zoom levels across various screen sizes and resolutions

Having an image of a map displayed in my imageview with a size of 2572*1864 px, I aim for users to see the same "piece" of the map regardless of the devices and densities they use. In other words, my default zoom level should consistently represent the sam ...