methods for adjusting the font in an android webView using javascript

Although I'm not that experienced with javascript, I find myself in a position where I need to use it.

What I am trying to achieve is changing the font of the webView in Android after the web page has finished loading.

So, within the onPageFinished() method, I execute some javascript code.

I have successfully changed the font using this code:

loadurl("javascript:(function(){document.body.style.fontFamily='\"Courier New\", Courier, monospace';})()");

However, my goal is to apply a custom font from an asset instead.

I attempted something like this:

loadurl("javascript:(function(){document.body.style.fontFamily= \"src: url('file:///android_asset/byekan.ttf')\";})()");

And tried similar approaches, but without any luck.

If anyone can assist me in applying my own custom font after loading a page in an Android webview, I would greatly appreciate it.

Note: The HTML content is sourced externally (not local), so I am unable to add any CSS styles directly to it.

javascriptandroidwebview

Answer №1

To include a custom font in your HTML file, use the following code snippet:

<style>
        /** Define a font named "CustomFont",
            and specify the URL where it is located: */
        @font-face {
          font-family: "CustomFont";
          src: url('file:///android_asset/fonts/BLKCHCRY.TTF');
        }
        h3 { font-family:"CustomFont"}  
</style>

You can also set the font for any element later using "wv.loadUrl".

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

The phenomenon of React event bubbling and propagation

I have a simple component structured like this: <div onClick={toggleHidden} className="faq-item-header"> <h3>What is Bookmark?</h3> <img src={iconArrow} alt="arrow" /> </div> https://i.sstatic.net/LdWXs. ...

javascriptreactjs

EaselJS BitmapAnimation has delay when using gotoAndPlay

I have created a requirejs module that enhances the functionality of a BitmapAnimation by allowing it to move around the stage at a specific speed and transition to another looped animation once reaching its destination. The issue I am encountering is a n ...

javascripteaseljs

There are no platform-specific files for Android or iOS within the React Native project directory

I meticulously followed the React Native Official Documentation step by step, starting from https://facebook.github.io/react-native/docs/getting-started.html and successfully initialized a project, obtaining all the necessary files apart from splash.js a ...

javascriptandroidiosreactjsreact-native

Tips for inserting a gap between text and underline on android devices

I have set the text of a textview as - <string name="text"><u>this is my text</u></string> There should be some space between the text and the underline, so I included lineSpacingExtra="2dp" in the textview attributes. However, i ...

android

Is there a way to allow a property in a Javascript Object to accept multiple values in Typescript?

Suppose I define a new Object type: interface NEWOBJECT { name: {}; } Is it possible to have the 'name' property in NEWOBJECT be able to accept either 'name1' or 'name2', allowing me to create instances of NEWOBJECT with ...

javascriptobjecttypescriptkeyjavascript-objects

Retrieving currentUser data using Vue.js, Vuex, Express, and MongoDB

I am currently working on creating a MEVN stack authentication page that displays information about the user who is logged in. After successfully logging in, the router redirects to Home.vue and passes the username as a prop. The onSubmit method in Login. ...

javascriptnode.jsmongodbexpressvue.js

Is there a way to enable horizontal tab navigation (swipe views) while also incorporating action bar navigation tabs?

How do I implement horizontal tab navigation (swipe views) while using action bar navigation tabs? Do I need to make any specific adjustments to make this work with ActionBarSherlock? ...

androidandroid-actionbaractionbarsherlockswipeview

Making an item active in Bootstrap with CSS styling

I am working with a group of links: <div class="list-group"> <a href="link1.html" class="list-group-item" id="Home">Link1</a> <a href="link2.html" class="list-group-item">Link2</a> <a href="link3.html" class="l ...

javascripthtmltwitter-bootstrap

Transferring information to a partial view using a jQuery click event

In my Index view, there is a list of links each with an ID. My goal is to have a jQueryUI dialog box open and display the ID when one of these links is clicked. Currently, I am attempting to use a partial view for the content of the dialog box in order to ...

javascriptjqueryasp.net-mvcjquery-ui

Incorporate a sleek Vueitfy user interface seamlessly into your current website

Recently, I put together a sleek user interface for a web application with the help of Nuxt.js and Vuetify.js (which utilizes Vue.js code). Although my design is top-notch, I now face the challenge of integrating it into an existing website that does not ...

javascripthtmlvue.jsvuetify.jsnuxt.js

What is the best way to evaluate fields across arrays of objects?

I am facing a situation where I have two arrays of objects: ArrayList<Object> list1 and ArrayList<Object> list2. Here is a simplified example of the code: Class Object1 { String str1 = "example"; } Class Object2 { String str2 = "example"; } ...

javaandroidarrayscompare

Is it possible to manipulate the content inside a div tag using JavaScript in HTML?

What is the most efficient way to dynamically adjust a data offset value within an HTML tag using JavaScript? For example: <div class="box" data-offset="2s"></div> I am looking to update the value within the data-offset attribute based on s ...

javascripthtmlcssmedia-queriesaddition

The simplest way to increase the size of a child element in order to generate a scrollable area

When working with HTML, it's important to consider how the size of a child div affects the parent div. If the child div is larger than its parent, scrollbars will appear on the parent div if the appropriate style rules are set. However, I'm inte ...

javascripthtmlcssresizescroll

Issues with JW Player functionality on iOS devices

I've encountered an issue with the JW Player where it's not working on iOS (Safari) - the player is not being displayed. The video is hosted on S3 with CloudFront and interestingly, it works perfectly fine on Safari for Mac. Here's a snippet ...

javascripthtmldrupaljwplayeramazon-cloudfront

Converting UDP received audio to a wav file on Android: A comprehensive guide

I am attempting to receive a streaming audio from my application. Below is the code I have written for receiving the audio stream: public class ClientListen implements Runnable { private Context context; public ClientListen(Context context) { ...

androidudpaudio-streaming

Line 1: Position a section of the content on the initial line.Line 2: Then place the remainder

Within a paragraph element on WordPress, I have a value displayed using ACF. The paragraph is contained within a div with a maximum width and centered text alignment. I am seeking a solution that will allow me to achieve the following: "If the default d ...

javascriptjqueryhtmlcss

Retrieve 2 values from a JSON array in a Node.js environment

Can someone assist me in extracting two values from my JSON array? Here is a link to the array: http://pastebin.com/tm5StsZ3 I am looking to retrieve both an ID and a key from these arrays. Any help would be greatly appreciated. I am currently working wit ...

javascriptarraysjsonnode.jsparsing

Preventing image rotation in an Angular 4 application: Strategies and Solutions

My Angular application allows users to choose a profile picture. During testing, I discovered that when I upload images from an iPhone in portrait mode, they appear rotated in my app. However, when the photos are taken in landscape mode, they display corre ...

javascripthtmlioscssangular

React: Unable to generate list item element due to unresolved Promise;

Struggling to understand how to access this Promise object. How do I map this promise? And why is my async/await function returning a promise instead of a result object? Any insights would be helpful. Promise {<pending>} [[Prototype]]: Promise [[ ...

javascriptreactjsexpress

Have you transitioned from using hover in jQuery to writing code in Backbone

I am looking to translate this code into the backbone event model without relying directly on jQuery. $(".class").is(":hover") In attempting to achieve this in my view, I have tried registering events (mouseenter, mouseleave), but it seems that these eve ...

javascriptjquerybackbone.js