Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Android 4.0 : no font displayed with local files #3632

Closed
cobaltians opened this issue Jun 5, 2014 · 17 comments
Closed

Android 4.0 : no font displayed with local files #3632

cobaltians opened this issue Jun 5, 2014 · 17 comments

Comments

@cobaltians
Copy link

I'm having a weird bug on Android 4.0.x devices using font-awesome embedded in a Cordova WebView.

  • When using CDN link, font is displayed.
  • When using latest release zip files font is not displayed.
  • No trouble with Android 4.1, 4.2, 4.3 or 4.4 with local files. iOs works great too.

Any idea ?

Here is my sample code :

I just downloaded the latest release files, put them into a css folder and renammed it "font-awesome-4.1.0" to avoid uppercases.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <!--<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link rel="stylesheet" type="text/css" href="css/font-awesome-4.1.0/css/font-awesome.min.css" >
</head>
<body>
    <h1>this should work, right ?</h1>
    <p><i class="fa fa-camera-retro"></i> fa-camera-retro</p>
</body>
</html>

commented line works great. local files don't. I need local files to allow my app to have icons offline.
@tagliala
Copy link
Member

tagliala commented Jun 5, 2014

@cobaltians take a look at our troubleshooting guide:https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#phonegap--android-icons-in-heading-tags Phonegap / Android (icons in Heading tags)

let me know if that fixes. Meanwhile, closing here

@tagliala tagliala closed this as completed Jun 5, 2014
@cobaltians
Copy link
Author

Hi, thank for the tip.
I tested it but it still doesn't work.

My Android 4.0 devices are :

  • Google Nexus S (4.0.4)
  • Amazon Kindle Fire (4.0.3)

I adapted my sample below :

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
    <!--<link href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">-->
    <link rel="stylesheet" type="text/css" href="css/font-awesome-4.1.0/css/font-awesome.min.css" >
    <style>
        h1{ color:red;}
        /* FA 4.0.0 and newer */
        .fa {
        text-rendering: auto;
        }

        /* FA 3.2.1 and older */
        [class^="icon-"],
        [class*=" icon-"]  {
        text-rendering: auto;
        }
    </style>
</head>
<body>
<h1>this should work, right ?</h1>
<p><i class="fa fa-camera-retro"></i> fa-camera-retro</p>
</body>
</html>

Once again : everything works well with the CDN url. how is it possible ?

Any other idea ?

@tagliala
Copy link
Member

tagliala commented Jun 6, 2014

@cobaltians you should use stackoverflow

@cobaltians
Copy link
Author

Don't get me wrong, I'm not just trying to make font-awesome work and raising an issue on the first problem I meet.

I use font-awesome for a while now and the exact same code is working without troubles on (at least) this list of Android devices :

  • Samsung Galaxy Nexus (Android 4.3)
  • Nexus S (Android 4.1.2)
  • Nexus 4 (Android 4.4.2)
  • Samsung Galaxy S3 (Android 4.3)
  • Galaxy Tab 10 (Android 4.2)
  • Nexus 7 (4.3)
  • Nexus 7 (4.4)

... And iOs iPad, iPad mini and iPhones running ios 7 too. The exact same code.

I know it's hard to make a lib like font-awesome to work on every devices, and font-awesome team and contributors are doing a great job.

But Android 4.0 is still 12.3% of the android user base. Do you really want to let them behind ?

Do you think of any test I can do to find out the issue? How can I help you ?

I can provide anything, but please, don't let this issue die.

@tagliala
Copy link
Member

tagliala commented Jun 6, 2014

reopening here, but I can't remember about other issues on Android 4.0 + cordova, so I was supposing a misconfiguration on your side.

Since newer platforms are working, it may be a bug of android stock browser. I don't know any workaround at the moment.

Could you please try other icon fonts?

@tagliala tagliala reopened this Jun 6, 2014
@cobaltians
Copy link
Author

thank you.
I made a few tests, hacking the lib itself and changing the order of ttf/woff/ogg fonts or removing the double "src" rule without success. I also tried with the "-webkit" rules off. same result.

Will try another web font soon (thuesday). Maybe just a classic one with basic charset too.

Do you think I should provide a full working sample code of an empty cordova project with your lib used inside or not ? Is there someone able to test on more Android 4.0 devices around there ?

@tagliala
Copy link
Member

tagliala commented Jun 6, 2014

@cobaltians I don't know what to say... Android 4.0 came a lot of time ago and nobody reported this issue. Try to post here: #1094

@jonmaim
Copy link

jonmaim commented Jan 27, 2015

@cobaltians I had a similar problem with font-awesome 4.2 in a cordova webview for windows phone 8. The problem only occurs when the FA files are loaded locally. In my case the solution was to remove all occurrences of ?v=4.2.0 from the @font-face property in the font-awesome.css file.

Maybe the problem you have on Android 4.0 is simlilar to this one? Let me know.

@tagliala
Copy link
Member

let us know

@cobaltians
Copy link
Author

Hi,
It works for Android 4.0.4 with local files too !! thanks a lot @jonmaim !

@tagliala : Any risk of removing these ?v=4.2.0 from the stylesheet ? Do you known the purpose of it?

@tagliala
Copy link
Member

@cobaltians cache stuff from the old days, but now they are more harming than useful. Take a look at #3286

I should advise Dave to consider it for 5.0.0

PS: could you please edit our troubleshooting wiki and point to this thread? https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

@jonmaim
Copy link

jonmaim commented Feb 3, 2015

Just added a section Fonts not showing up in Phonegap application (Android and Windows Phone) at the end of the wiki page https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting

@tagliala
Copy link
Member

tagliala commented Feb 3, 2015

thanks!

@tagliala
Copy link
Member

tagliala commented Feb 3, 2015

Maybe we need an index

@azachar
Copy link

azachar commented Apr 17, 2016

Hello All,

I have a similar issue, removing anything behind ? did not work. The path to the font is correct.
I am using Samsung Galaxy J5 with Android 5.1.1, any idea why it doens't work?

Thank you!

@tagliala
Copy link
Member

@azachar https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#fonts-not-showing-up-in-phonegap-application-android-and-windows-phone

@azachar
Copy link

azachar commented Apr 28, 2016

Thanks @tagliala, I tried that but it doesn't work neither.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jonmaim @tagliala @azachar