Using custom woff2 fonts in Android applications created with Visual Studio Community and Cordova seems to be causing compatibility issues

Help Needed!

I am facing an issue with my app created using Visual Studio Community and Cordova. Everything works perfectly when I simulate it on my PC, but when I install it on my phone, the fonts just won't display correctly. I have tried all the solutions suggested on various forums, but nothing seems to work.

The code snippet causing the font issue is in the index.html file:

    div>
      <style scoped>

        @font-face {
        font-family: 'Inknut Antiqua';
        font-style: normal;
        font-weight: 400;
        src: url(InknutAntiqua.woff2) format('woff2');
        }

      </style>
</div>

    <div>
        <h2  style="font-family: 'Inknut Antiqua'">Aqui va el Titulo</h2>
    </div>

Here is my directory structure:

/Site
 -----/css
 -----/imgs
 -----index.html
 -----InknutAntiqua.woff2

P.S. I am also using Bootstrap (

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
) which might be causing conflicts as JQuery does for others.

Thank you in advance!

Answer №1

Whenever I try to set it up on my phone, the fonts simply don't display correctly.

It seems that WOFF2 is not compatible with Android 4.X webview, but works well with versions 5.x-6.x. For more information, you can refer to Can I use WOFF2 in Android.

If you encounter compatibility issues, consider using WOFF instead. The only distinction is the compression method utilized for the font file, and WOFF is suitable for Android 4.X devices.

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

retrieve the fragment of the bitmap view without displaying it

Hey there! I need help with obtaining a bitmap image of a view fragment without displaying it on the screen. Below are the codes I have: public Bitmap getScreenShootViewPage(Context context,ViewGroup container){ LayoutInflater inflater = (La ...

The button can only be edited using Internet Explorer

My webpage features a button that displays correctly in Chrome, but the text inside the button gets cut off when viewed in IE (see image). Can you provide guidance on what might be causing this issue and how to resolve it? Bootstrap version 4.0.0 is also b ...

Image container unable to resize to fit within a CSS grid cell

I'm currently working on organizing a CSS grid for my images on a tribute page project from free code camp. I was able to set up the grid as intended, but I am facing some difficulties in making the images fit perfectly within each cell. Some images a ...

Having difficulty with setting up the Webpack css-loader, encountering an error during compilation

As a newcomer to webpack, I have been experimenting with creating my own build by modifying an existing one. One issue I encountered was the css not compiling, so I took the following steps: Confirmed that there were no css loaders already included in th ...

What is causing this issue with the basic HTML and CSS code that is preventing it from displaying correctly

What does the HTML code look like? <html> <head> <title>Homepage</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="container"></div> </body> </html> ...

Step-by-step guide on repairing a countdown clock using JavaScript, HTML, and

I'm having issues with my JS on my website. I am new to this and currently in the process of setting up a website. I want to add a timer to show when the site will be active. It seems like there is an error somewhere in the JS code that I can't ...

Toggle the visibility of HTML elements by utilizing a JavaScript checkbox event

I have put together these JavaScript functions to hide the delivery address fields on my shopping cart address form if the goods are being sent to the billing address. The functions control the visibility of the HTML wrapped by... function getItem(id) { ...

JavaScript popup is no more visible on the webpage

Recently, I implemented a pop-up on my website that used cookies to prevent it from appearing every time a user visited a page. However, after making this change, the pop-up stopped showing altogether. Despite my best efforts in testing, researching, and s ...

Injecting Custom HTML Tag through JavaScript on Page Load in Google Tag Manager

When attempting to inject events into the data layer upon loading DOM pages on my website, I encountered an issue. Since I lack access to the website code and developers are reluctant to make additions, I decided to implement this through a custom HTML tag ...

Ways to eliminate basic text from HTML/HAML

Seeking a solution to align an image with CSS that is being hindered by unwanted text appearing next to it in Inspect Element. Despite pinpointing the source of the issue, attempts to remove the text have been unsuccessful and it continues to be a nuisance ...

Include a character on the right side without shifting the text to the left

Below is the HTML code I am currently working with: <div class="last_img"> <p>Galutinė žetono išvaizda:</p> <span class="zetin11">A</span> <span class="zetin12">A</span> < ...

What is the best way to eliminate blank values ("") from an array?

I am working with a two-dimensional array that was generated from an HTML table using jQuery, but I have noticed that some values are empty and are displaying as "". How can I go about removing these empty values from the array? <table> ...

The full background width is not being displayed as 100% on the

Unexpectedly, the "full left secondary-bg" background division on this particular page (http://goo.gl/OU4MkW) is no longer spanning the full width of the screen and I am unable to figure out why. This website is WordPress-based and constructed using the sk ...

The problem arises when using `$state.go` as it does not properly transfer the value to `$stateParams`

Within componentA, I am using an angular code: $state.go('home', {selectedFilter: "no_filter"}); In componentB, I have the following code: if ($stateParams.selectedFilter === 'no_filter') However, I am encountering an issue where $s ...

What is the best way to ensure that the Bootstrap navbar remains collapsed at all times, regardless of the size of the

Is there a way to keep my Bootstrap navbar constantly collapsed regardless of the screen size? I'm currently using Bootstrap, and I've noticed that when the screen is larger, the navbar expands automatically. What can I do to ensure that the navb ...

Simultaneous Activation of Hover Effects on Multiple Elements

I have an array of objects that I'm iterating over. Here is the array: const socialLinks = [ { id: 1, child: ( <> <FaLinkedin className='text-2xl' /> Linkedin </> ), hre ...

Creating a design that resembles boxes for the div elements while ensuring the grid layout remains undisturbed

Hey there! I'm new to using Bootstrap and I'm trying to create boxes that look like the ones on the right side of this page: Unfortunately, I haven't had much luck so far. I tried using padding, but it messed up my grid system. I assigned a ...

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

What is the proper way to execute a JavaScript function within a JavaScript file from an HTML file?

I have the following content in an HTML file: <!DOCTYPE html> <!-- --> <html> <head> <script src="java_script.js"></script> <link rel="stylesheet" type="text/css" href="carousel.css"> & ...

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

On my Bootstrap 4 modal, I have encountered an issue with scrollable content. When I am at the top of the content and try to scroll downwards, nothing happens because I am already at the top. However, if I continue to hold the touch without releasing it, t ...