Issues with font face rendering on Android Chrome and Firefox devices

I'm currently encountering an issue with the font face in CSS3. The code I have been using is as follows:

@font-face {
font-family: James Fajardo;  
src: url('https://www.twoseven.nl/kurkorganicwines/wp-
content/themes/kurk/fonts/James_Fajardo.ttf');  
}

When I apply font-family: James Fajardo to my CSS for specific H2's or paragraphs, it works well on Chrome desktop, but not on Firefox or Chrome on Android devices. Interestingly, it does work on iPhone Safari.

Has anyone encountered this issue before and knows how to resolve it? I've already tried using different font formats like woff and woff2, but still facing problems specifically on Android devices.

Thank you in advance! Rob

androidhtmlcssgoogle-chromemobile

Answer №1

Consider utilizing a local path for your font file, as this approach can be effective in certain cases.

@font-face{font-family:CustomFont;src:url(custom_font.ttf)}

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

Use JavaScript to generate an HTML element that has an attribute mirroring its text content

Trying to figure out how to create an HTML element similar to this: <option value="Replaced">by this</option> For example: <option value="ThisIsTest">ThisIsTest</option> UPDATE Using jQuery, I need to achieve something like thi ...

javascriptjqueryhtml

Toggle the highlighting in React

I have a list of data that displays in a Collapse, and I want it to highlight for every user click in the list, but only one at a time should be highlighted. If you'd like to see a sample to better understand this concept, please check out: https:// ...

cssreactjsmaterial-ui

Button appears and disappears sporadically while browsing in Safari

I created a slider using SCSS, JavaScript, and HTML. You can view the demo at this link: https://jsfiddle.net/rr7g6a1b/ let mySlider = { initializeSlider: function (options) { let slider = options.container; let slides = slider.querySelectorAll( ...

javascriptcssmacossafarisass

Increasing the size of text in CSS with the use of ":hover" and then causing it to return to its original smaller size

Allow me to explain my goal here. I have text displayed on my website that I would like to enlarge when the user hovers over it and then shrink back down when they move their cursor away. The issue I'm facing is that after enlarging the text using t ...

javascripthtmlcsshover

Capturing rawX and rawY coordinates within an Android ScrollView

I am attempting to capture every touch event on the screen while a user scrolls through a ScrollView in order to log the rawX, rawY, pressure, orientation, and major and minor axis of the touch point. Currently, I can only access the ACTION_DOWN event by u ...

androideventsscrollscrollviewmotionevent

Attention! Are you aware of the potential consequences of the impending phase-out of the name attribute in W3C validation? Have you considered how this development

Any thoughts on what could replace the name attribute? According to the W3C validator... Validation Output: 4 Warnings Here is a list of the warning message(s) generated while checking your document. Warning Line 12, Column 21: The name attribute i ...

phphtmlattributesw3cw3c-validation

What could be causing the closest() method in my JavaScript code to not locate the nearest class?

I've encountered an issue while dynamically creating new classes with input fields in my project. For some reason, when I try to remove a previous row, nothing happens. Can anyone help me troubleshoot this problem? Here is the JavaScript code that I ...

javascriptjqueryhtmlcss

Switching Bootstrap Navbar Active State with JavaScript

I have encountered an issue with using the "active" class on my navbar navigation items in Bootstrap 4. When I click on the links, the active state does not switch as intended. I have tried incorporating JavaScript solutions from similar questions but have ...

javascripthtmlcsstwitter-bootstrap

Conflicting styles between Bootstrap and Formstack are causing radio buttons to appear only partially visible

Encountering a conflict between Bootstrap (4.1.3) and Formstack CSS when trying to embed a form in a website. The radio buttons are not fully visible, with the issue located in the "label" class ("fsOptionLabel"). Adjusting the line height provides a parti ...

cssbootstrap-4formstack

Colorful radial spinner bar

I am interested in replicating the effect seen in this video: My goal is to create a spinner with text in the center that changes color, and when the color bar reaches 100%, trigger a specific event. I believe using a plugin would make this task simpler, ...

javascriptcssionic-frameworkspinner

How do I navigate to a different page in Vue.js HTML based on user selection?

Here is my first attempt at writing HTML code: <div class="col-md-4" > <div class="form-group label-floating"> <label class="control-label">Select No</label> <select class="form-control" v-model="or" required=""> ...

javascriptjqueryhtmlvue.jsvue-component

Moving images displayed on a webpage

Is animating 5 pictures/photos a simple task? Take a look at this example: Which programming languages are recommended for achieving this effect? Thank you Tea ...

htmlcss

Unable to "clean up" the HTML document

Struggling with utilizing tidy to produce clean html code. My attempt looks like this: tidy -i -utf8 output/page_1530597755.html -b -o test.html However, no output file is being created! Instead, there are numerous warnings and an error message popping u ...

htmlselenium

I possess 9 captivating visuals that gracefully unveil their larger counterparts upon being clicked. Curiously, this enchanting feature seems to encounter a perplexing issue within the realm of web browsing

<style type="text/javascript" src="jquery-1.11.0.min.js"></style> <style type="text/javascript" src="myCode.js"></style> </body> //jquery is within my site directory on my desktop $(document).ready(function(){ //note: $("#ar ...

javascriptjqueryhtml

What is causing my radio button event to activate when a separate radio button is selected?

I have implemented the code below to display "pers" and hide "bus," and vice versa. JQuery: $('input[name="perorbus"]').click(function() { if ($(this).attr('id') == 'bus') { $('#showbus&apo ...

javascriptjqueryhtml

Getting the value from a dropdown menu and displaying it in a text area

I have 3 functions (radio, textarea, and dropdown) I was able to successfully retrieve the values of radio and textarea into the textarea. However, the drop down functionality is not working as expected. My goal is to display the selected option from the ...

javascriptjqueryhtmlcssbootstrap-4

How can I consistently position a dialog box (tooltip) on top of a JQuery UI modal Dialog?

Utilizing CSS and Javascript to display tooltips upon mouseover for various inputs has been effective in most cases, however I am encountering an issue with inputs within a Jquery UI Dialog modal. The tooltips appear correctly in front of the dialog when i ...

jquerycssjquery-ui

Identifier for md-radio-group

In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...

htmlcssangularmaterial-designangular-material2

Manipulating CSS animations through JQuery

Currently, my animation is triggered by a :hover event. However, I would like to change it so that the animation starts when a button is clicked. Can someone guide me on how to manipulate the CSS using JQuery? //CSS .mouth{ top: 268px; left: 273px; ...

javascriptjquerycss

Tips for effectively utilizing the SlidingMenu library

I implemented the [SlidingMenu][1] Library in my App and have successfully created a menu, but I am unsure how to customize it further. One issue I am facing is that the Up Navigation button on the action bar does not trigger the menu. When clicked, it do ...

javaandroidslidingmenusliding