Develop Reference

NativeScript: font-family not loading on Android

I imported a set of files for Galano Grotesque xxx.otf font (xxx=Alt Black, Alt Black Bold, etc), and it works like a charm on iOS but not on Android. When I run the app on Android the font is not loaded.
I'm using this:
Label {
font-family: "Galano Grotesque";
color: #5b5b5f;
}
I found this post - Android Not Showing Font Icon In NativeScript - and I tried this
Label {
font-family: "Galano Grotesque", galano grotesque;
color: #5b5b5f;
}
but without success :(
Does anybody knows what I can do to solve it?
Thanks

There is one primary consideration when working with fonts in iOS and Android.
For the font to work on iOS it should use the exact font name (notice that this is not the file name!) where in Android the font should be referenced with its particular file name.
Example:
Let's assume you are using the Galano Grotesque DEMO Bold font from here (this one is free for demonstration purposes)
When downloaded you will see that the file name is as follows
Rene Bieder - Galano Grotesque DEMO Bold.otf
But the font name is (in Mac open with FontBook app to see the font-name at the top of the pop-up.. for Windows open the font with Windows Font Viewer and look for font name)
Galano Grotesque DEMO
So to use it in iOS, you should use
font-family: "Galano Grotesque DEMO";
And for Android, you should use
font-family: "Rene Bieder - Galano Grotesque DEMO Bold";
Of course, the best practice is to see what is the actual font name and rename the file with the exact name so you can reuse it in both iOS and Android with no different CSS files.
All that said check your file name under Android and make sure that reference in the CSS file is the same

Disable default css settings of text in Android

Okay, so I am creating this mobile website where I am trying to change the font-size and color of some text. Now, I have tested my code on my PC, iOS and Android (using Chrome browser) and only on the Android there seems to be a problem. When using an imported CSS document some settings will not change, but if I type then in directly into the element using the "style" attribute everything works.
Font
The font-size seems to have different levels as when I type in:
font-size: 31px;
it gives me this:
Hello
However if I were to change it to:
font-size: 30px;
the font size will now be like this:
Hello
Color
Also, the color on Android never seems to change as the color is always black. I have tried changing it to both other dark and bright colors without any success (note the colors are changing on both my PC and on iOS).
Override
I am thinking that there might be some sort of snippet of code which would override these default settings. If anyone of you have found one when importing CSS to a PHP/HTML doc or have any other solution it would gladly be appreciated!

your style is overwritten by some other CSS class or css styling use:
font-size: 30px !important;
thereby your styling will be applied over all other stylings thereby overwriting all predefined stylings

Checkbox not visable on Mobiles

I am working on a website for a Uni assignment and I have a strange mobile problem. I have created a checkbox that makes the menu hidden or visible on mobile with the checked function. It works just fine on my computer when I simulate a mobile browser in Chrome or Firefox or by using Resizer.
Although when I view it on a mobile (Android) the checkbox is not visible. I found the same on my tablet although there if I click the right part of the screen the menu appears. Both mobile and tablet are running Chrome for Mobiles though I have also tested it in Opera Mini and have the same problem. It runs fine on PC but isn't visible on Mobiles.
Here is my website: http://wonx.dk/pwdh/
And here is the relevant HTML and CSS:
HTML:
<label for="menuon">☰ ▾</label>
<input type="checkbox" id="menuon">
CSS:
label {
font-size:36px;
}
label:hover {
color:#F03B4E;
}
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
/* Checkbox Default State (if deleted menu is always visable) */
nav {
display:none;
}
/* When clicked/Toggled State */
input[type=checkbox]:checked ~ nav {
display:block;
}

The issue is with ☰ and ▾ - they are not working on Androids.
For testing purposes, try replacing them with actual words:
<label for="menuon">stripes arrow</label>
Here is a demo: http://jsfiddle.net/sc0rv3na/10/
Try using images, or a special fonts instead, eg Font Awesome.
Here is a Font Awesome implementation: http://jsfiddle.net/sc0rv3na/14/
EDIT: Although that question is about Windows Phones, it basically answers this question too: https://stackoverflow.com/a/21997373/2037924
Unicode characters belong to certain fonts, like Arial Unicode MS and not all fonts support a wide range of Unicode characters.
To ensure that special Unicode characters are shown, you must change the font for the platform.
EDIT #2: Here are a couple of ways to add a mobile menu icon to your site: http://css-tricks.com/three-line-menu-navicon/

Strange one: Text in website on Android is scrambled, looks hacked, but isn't

Got a strange one.
http://reaganhayes.com/finishes/
Displays text normally in other browsers, including iPad and iPhone, but on my Android phone it's showing the menu text and the Headings as garbage text, like "crokfpefkdp" and "d^iibov"
Here's a screenshot: http://reaganhayes.com/temp/android_text.png
In the Chrome inspector, looking at the source, the text is normal "About", "Contact", etc. I used Adobe's Edge Inspect to inspect the phone's browser and it shows normal words in the source.
I tried it on two different Android phones with the same result. My phone is a Samsung Vibrant running FROYO.UVKA6
I assumed it was a font character-mapping issue because the same word in the menu and in the headings had the same garbage text, but when I stripped out all fonts and only used Arial, it had the same results. I tried that with the actual CSS for the site, and also via the Chrome inspector.
Charset is standard UTF-8.
The Wordpress theme is a modified version of the Wordpress 2012 theme.
W3 Total Cache was running previously, but I've deactivated it while I solve the issue.
Any ideas?
Thanks!
Kenny

Just try to change text rendering method in your style.css.
From:
body {
…
text-rendering: optimizeLegibility;
…
}
To:
body {
…
text-rendering: auto;
…
}
OptimizeLegibility method is broken on Android Froyo.
Hope this helps!

Assigned the Droid Serif font to an HTML element but my Android phone still displaying Droid Sans?

I have this in my CSS:
.like-counter span, .entry-content h2 {
color: #444;
font-family: Bitstream Charter, "Droid Serif", Gerogia, serif;
font-weight: bold;
}
In my computer, I see a serif font. If I remove the first one, then I see the Droid Serif font. I thought this font was a default font in Android devices.
But when I open the site on my Android phone. I'm still seeing Droid Sans.
What could be causing this?
EDIT:
I discovered that the problem only happens when I display the page in Android's default browser. In Firefox, I can see the Droid Serif font (strange).

Instead of guessing the default fonts, you can just use the generic serif font:
font-family: serif;
serif will be the browser's default serif font.

On older Android systems (until a version that I'm not aware of) the browser instead of checking the full list of possible fonts, it checks the very first entry of the font family, and if it is known to the browser, what to substitute it with, then it will use that, otherwise it will throw away the whole list.
This is notable, if you just use Times for example, it will use Droid Serif, but if you add some fancy font before it, it will use Droid Sans, regardles of the rest.
Obviously it will work, if you put the “serif” in first place, but then all the browser use the default serif font, instead of whatever you want. Because of the simplicity of the font selection on older Android, you can add a "serif" family to the first place, which will be interpreted as Droid Serif on the old Android, but other browsers will look (and hopefully fail) for a font named “serif”.
Also—interestingly—none of the Droid fonts are known to those Android browser.