The unique GopikaTwo Gujarati font is unfortunately not compatible with Android mobile browsers and hybrid applications

I am currently trying to incorporate the custom font GopikaTwo into my hybrid application. Below is the code snippet I have added to my CSS file:

@font-face {
    font-family: 'GopikaTwo' !important;
    src: url('GopikaTwo.eot') !important;
    src: url('GopikaTwo.eot?#iefix') format('embedded-opentype'),  url('GopikaTwo.woff2') format('woff2'), url('GopikaTwo.woff') format('woff'), url('GopikaTwo.ttf') format('truetype'), url('GopikaTwo.svg#GopikaTwo') format('svg') !important;
    font-weight: normal;
    font-style: normal;
}

.gopika-two {
    font-family: "GopikaTwo", "Roboto", "Helvetica Neue", sans-serif !important;
}

While this seems to work perfectly fine on desktop browsers like Chrome and Firefox, it's not rendering properly on Android mobile browsers such as Chrome. My ultimate goal is to get this working seamlessly in a hybrid mobile application on Android.

Do you have any suggestions on what configuration adjustments might need to be made to achieve this?

androidcssfont-faceandroid-browsercustom-font

Answer №1

Success!

This is the updated variable.scss file.

@font-face {
  font-family: 'GopikaTwo';
  src: url('../assets/fonts/GopikaTwo.eot?#iefix') format('embedded-opentype'), url('../assets/fonts/GopikaTwo.woff') format('woff'), url('../assets/fonts/GopikaTwo.ttf') format('truetype'), url('../assets/fonts/GopikaTwo.svg#GopikaTwo') format('svg');
  font-weight: normal;
  font-style: normal;
}
 $font-family-base: "GopikaTwo";
 $font-family-ios-base: $font-family-base;
 $font-family-md-base: $font-family-base;
 $font-family-wp-base: $font-family-base;

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

What is the reason my CSS formatting isn't being applied in Vue.js?

As a newcomer to web development and vue.js, I've been struggling to style my code effectively. Below is an example of my vue.js code where I have created markup for a profile description using figure, figcaption, and image elements. Could you please ...

cssvue.js

Display a horizontal progression indicator during the page download process

Occasionally, website pages may take a while to download without the user even realizing it. This can be problematic if the user clicks on an image or button with an event handler attached, as it may break the page functionality. To address this issue, I ...

jqueryhtmlcssprogress-bar

Random variable without repetition in SASS

I have a unique project where I am tasked with incorporating a list of 5 specific colors into 10 different div elements. The challenge is that each color must be used twice and in a completely random order without any repetition of colors. Although utilizi ...

cssrandomsassrepeat

Jquery and CSS3 come together in the immersive 3D exhibit chamber

Recently, I stumbled upon an amazing 3D image gallery example created using jQuery and CSS3. http://tympanus.net/codrops/2013/01/15/3d-image-gallery-room/ Excited by the concept, I attempted to incorporate a zoom effect (triggered every time a user clic ...

javascriptjquerycss

JavaScript tip: Improve the way you highlight the current navigation page while scrolling by finding alternative methods to using "scrollY > x"

Currently, my webpage layout is divided into 4 sections - HOME, ABOUT, SKILLS, and CONTACT. Below is the JavaScript code I am using to highlight a specific section on the navigation bar based on the scroll position: let home = document.querySelector(" ...

javascripthtmlcssscroll

How come the date displays as 21/1/2015 instead of 21/1/2015 in Android after parsing the JSON data?

Currently, I am utilizing the DatePicker functionality in my code and transmitting the value via JSON. The desired format for the value is 21/1/2015 without the extra backslashes. How can I resolve this issue? DatePickerDialog.OnDateSetListener date = n ...

androidjsondatepickertostring

Disable the borders on HTML input fields

I am looking to implement a search feature on my website. It seems that in Firefox and Internet Explorer, the search function appears fine without any unexpected borders. Firefox IE However, when viewing the search function in Chrome and Safari, there ...

csscross-browserzurb-foundation

Tally up the values of selected checkboxes

  I'm in search of a method to tally up data-values associated with checkboxes. In the example provided below, selecting locations from the checkboxes results in the calculation of primary values, which are displayed in the green box. I also need to ...

javascripthtmljquerycssfunction

Component rendering based on conditions is not working properly when using Next.js, especially on the initial load

While utilizing Ant Design and a Custom Stylesheet, I have encountered an issue where the style appears broken upon first load. However, if I navigate to another page and return to the original broken page, it displays correctly. This problem only occurs d ...

cssreactjsnext.jsantd

Error in Chrome: Text container's height is not fully extended to 100%

I'm encountering an issue with achieving 100% height on a child container in Google Chrome, although it works perfectly fine on Firefox. Here is the URL: http://linco.com.py/beta/multiplaza/cartelera.php The styling for the main container is as fol ...

cssgoogle-chromehtml

Unable to refresh JSON information

My current task involves refreshing a "Bar chart" with JSON data on the server. However, I am facing an issue where Android is unable to update that JSON data even though I have tried using a runnable method. The fetched data remains constant and does not ...

androidjsonmpandroidchart

Adjust the navigation height to be proportional to the main content size

I've been attempting to make my navigation menu take up the entire page, but I have yet to achieve success: My goal is for the green menu section to extend down to the footer. Here is the HTML code: <div ...

htmlcss

Is there a way to move a placeholder to a small label in the top left corner when an input field is being used?

I've been searching for functional code, but everything I've tried so far hasn't worked. Does anyone have expertise in creating this animation using React? ...

htmlcssreactjsanimationinput

Creating a scrolling background effect using HTML and CSS: ``Background Parallax

I'm trying to keep the background of my HTML document fixed in the upper left corner, so that when a user scrolls through the page, they only see parts of it. Here's the code I'm using: <body style="background-image: url(background.png) ...

cssbackground

How can I design DIVs to resemble a radio station or television schedule grid?

Check out the JSFiddle for my page with the source code included: https://jsfiddle.net/g0kw1Le8/ Here is a snippet of the source code: <TITLE>Hallam FM - Best Variety of Hits</TITLE> <style> /* CSS styles go here */ /* End of CSS */ & ...

htmlcssdivide

Steps to activate the image viewer for each individual looping image:

I'm struggling with my JavaScript code that fetches images and displays them in a modal view when clicked. The issue I'm facing is that the image view only works for the second and other images, but not for the first one. I know there are issues ...

javascriptphpjqueryhtmlcss

What is the process for generating a JSON array from a JSON dataset file?

Recently, I started working on an Android project where I need to parse JSON data and display it in a ListView. I am using Eclipse for this project. In order to achieve this, I have created a file named userinput.json in the raw folder which is located wit ...

androidjsonarrays

Looking to slide a form on top of an image carousel in Bootstrap - any tips?

How can I move this form over the "carousel"? <html> <head> <title>test</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http ...

htmlcssformsbootstrap-4

Error encountered when using Symfony 2 command line interface

Just started learning Symfony2 and encountered a problem. I made changes to my CSS and when I try to re-install them in Eclipse shell, I get this error message: 'C:\wamp\www\Symfony' is not recognized as an internal or external ...

csssymfony

Creating a JavaScript function to automatically hide a dropdown menu after a specific duration

I'm currently working on a side menu that drops down when hovering over Section One within the <a> tag. I need some guidance on how to make the JavaScript code continuously check the state of the list after a set amount of time in order to autom ...

javascripthtmlcss