Modifying the font of a WebView on an existing Android site

I've been looking for a solution to my problem for days with no luck. Can someone please take a look:

  • Input: a WebView with a web already loaded.
  • Output: change the font of the loaded web inside the WebView.

Here's what I've tried so far:

    @SuppressLint("SetJavaScriptEnabled")
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mWebView = (WebView) findViewById(R.id.webview);
    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.setWebViewClient(new WebViewClient());
    mWebView.loadUrl("http://www.bbc.co.uk/");

And here's how I attempted to change the font inside the webview: 1/ Method 1:

        mWebView.loadUrl("javascript:(function() { var s=document.createElement('style');s.innerHTML ="
            + " '@font-face{font-family:ZawGyi-One;src:url(\"http://db.tt/OQ1RZoWc\");}"
            + "body,div,h1,h2,h3,input,textarea{font-family:ZawGyi-One! important;}';"
            + "document.getElementsByTagName('head')[0].appendChild(s);document.getElementsByTagName('body')[0].style.fontFamily = \"ZawGyi-One\"})()");

2/ Method 2:

mWebView.loadDataWithBaseURL(
            null,
            "<script>javascript:(function() { var s=document.createElement('style');s.innerHTML ="
                    + " '@font-face{font-family:ZawGyi-One;src:url(\"http://db.tt/OQ1RZoWc\");}"
                    + "body,div,h1,h2,h3,input,textarea{font-family:ZawGyi-One! important;}';"
                    + "document.getElementsByTagName('head')[0].appendChild(s);document.getElementsByTagName('body')[0].style.fontFamily = \"ZawGyi-One\"})() </script>",
            "text/html", "UTF-8", null);

3/ Method 3:

        mWebView.setWebViewClient(new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            // TODO Auto-generated method stub
            super.onPageFinished(view, url);

            mWebView.loadUrl("javascript:(function() { var s=document.createElement('style');s.innerHTML ="
                    + " '@font-face{font-family:ZawGyi-One;src:url('file:///android_asset/fonts/BLKCHCRY.TTF');}"
                    + "body,div,h1,h2,h3,input,textarea{font-family:ZawGyi-One! important;}';"
                    + "document.getElementsByTagName('head')[0].appendChild(s);document.getElementsByTagName('body')[0].style.fontFamily = \"ZawGyi-One\"})()");

        }
    });

Unfortunately, none of my solutions seem to work. I've tried changing the HTML file inside the /assets/ folder and the fonts are stored in /assets/fonts/ folder, but I can't seem to get it right.

**One more thing: Can the font style really be changed inside an already loaded site in a webview? Can someone please guide me.

Thank you for your help.

Answer №1

Check out this solution for changing the font face of a Webview in Android: How to change font face of Webview in Android?

You can also explore this demo project for more insights: https://github.com/mayooresan/Japs-Attack-Ceylon--Android-App

I hope this information proves to be helpful for you.

Answer №2

Finally, the solution has become clear to me:

1/ Font changes on a webpage cannot be made without altering the content. WebView serves as a platform for displaying web pages, whether static (e.g. HTML) or dynamic. However, it does not alter the appearance of the webpage, displaying text exactly as it is on the webpage. To change the font, adjustments must be made on the webpage itself (potentially within the HTML).

(source: Webview change font ? _android)

2/ Another solution involves modifying the font through the rendering engine of the webview, such as Blink for Chrome and Webkit for Internet app.

For those encountering the same issue I faced, my advice is to seek alternative solutions as you may not have the time or permission to make changes to the rendering engine of the webview. :)

Wishing you a wonderful day.

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

Creating an adjustable fixed footer using Bootstrap 3

Struggling with the application of bootstrap styling. I have a footer with columns set as col-md-3, 3, 2, 4 which sums up to a total of 12. The issue lies in the differing content within each column. My goal is to achieve equal spacing between each div in ...

Divide the <ul> element into two columns with CSS only if the number of <li> items is more than 5

Is it feasible to divide a list into two columns using pure CSS if there are more than 5 child <li> elements? In the scenario I have in mind, this is the desired outcome: <li>1</li> <li>2</li> <li>3</li> ...

Attach a button and arrow to the cursor while it is hovering

Can anyone help me figure out how to make a button magnetize the content (arrow) along with it when hovered over by the cursor? I found an example of what I want on this website , but I am struggling to implement it in my own code. I've searched thro ...

Tips for designing a tilted CSS layout from scratch

I am looking to design a stylish interface using HTML & CSS. Here is the style I want to achieve: Currently, my interface looks like this: Although these are just reference images, you can see that my design does not have the same sleekness as the one in ...

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

Is there a way to align certain buttons to the left and others to the right within a DIV?

One of the strategies I experimented with was: <div class="block-footer"> <div> <button class="align-left">xx</button> <button class="align-right">yy</button> </div> </div> I'm ...

Basic progress bar

I'm attempting to create a basic download bar, but it's only displaying as a solid color without any transition animation. Furthermore, the "repeating-linear-gradient" feature isn't functioning and I'm struggling to figure out why. I&a ...

What's the trick to making a column that's 2/3 wide in a 34grid layout?

Is it possible to use the 34 Responsive Grid system to create a column that takes up two-thirds of the full width? Although the Grid System has equal columns settings, I'm curious how to combine or merge two columns together? <div class="containe ...

Ways to boost CSS transform with GPU acceleration

Is there a way to ensure smooth animations by utilizing GPU acceleration for CSS transforms in browsers? When does this acceleration occur and how can it be forced? For more information, check out this article ...

Mastering the Material-UI Grid in SPAs: Conquering the Negative Margin Dilemma

While attempting to build a single page application (SPA), I've encountered an issue with using the Grid component from material-ui. Normally, I rely heavily on the Grid, but in this new project, something seems amiss. The current problem is evident ...

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

Using Jquery Simplyscroll to incorporate images on both the left and right side within a container or clip

I am currently utilizing Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/) and I am seeking a way to incorporate a faded png image on both the left and right sides to prevent my images from appearing "cut off" while sliding through. Below is ...

Having trouble getting your Bootstrap v4 carousel to function properly?

Currently, I have implemented the carousel feature from Bootstrap v4 in a Vue web application. I am following the same structure as shown in the sample example provided by Bootstrap, but unfortunately, it is not functioning correctly on my local setup and ...

Finding a solution for odd css box-sizing behavior in Bootstrap 3 and eliminating the unwanted horizontal slider

My website built with Bootstrap 3 looks great in Internet Explorer, but in Chrome and Firefox there seems to be a persistent bottom slider and a small area on the right side that remains visible even when I scale down to 1%. I suspect this issue is relate ...

Instead of presenting MySQL data in tables on an HTML page, showcase it in editable text boxes

I have successfully imported data from my database table into an HTML table, but now I want to display them in locked text boxes. When the user clicks an "edit" button, the corresponding text box should become unlocked so that they can edit the data and sa ...

What are some techniques for applying CSS styling directly to a custom element?

Check out this amazing resource from HTML5 Rocks about the process of creating custom elements and styling them. To create a custom element, you can use the following code: var XFoo = document.registerElement('x-foo', { prototype: Object.crea ...

Two-column dropdowns without the use of tables

I am looking to create a drop-down menu with the following structure: | Heading ---------------- action | Item action | Item action | Item action | Item The action could represent "Change" and Item could be something like "Users". To maintain ...

Calculate the new dimensions of a ListView

I am working with a ListView that initially has 10 items, each with a height of 10dp. This makes the total height of the ListView to be 100dp. However, when I dynamically add content to an item by increasing its height by another 10dp, the total height be ...

What is causing the slider image to be the only element that is not adapting to different screen sizes?

I am currently using the flexslider from woothemes and I am unable to understand why the image is consistently wider than the content when the browser window is resized or when viewed on an iPad/iPhone. Upon inspection, I couldn't find any styles on ...

The application experiences a sudden crash following an intent sent to an activity using a background

I have been facing an issue for an entire day now. Initially, I created an app that retrieves data from my server using JSON, processes it, and then displays it within the app. This initial version was a standalone app with just one activity. Now, I am att ...