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
Related
I have an HTML script that needs to be displayed inside of a webview in Android and in an UITextView in iOS. This script uses multiple fonts.
When declaring the fonts in Android I used the following script:
#font-face {
font-family: 'myfont';
src:url("file:///android_asset/fonts/myfont.ttf")
}
and it worked perfectly fine.
In ios, however, I was unable to find the correct solution for setting the source path for the fonts.
I tried the following:
src:url("myfont.ttf")
src:url("myfont.ttf")
src:url("file:///fonts/myfont.ttf")
src:url("file:myfont.ttf")
Do you know how it should be set for iOS
You need to mention the correct font family name and that's it. No need to specify the src. Just make sure to add it in your Info.plist file under key <key>UIAppFonts</key> like so:
<key>UIAppFonts</key>
<array>
<string>Lato-Black.ttf</string>
</array>
How to find font family name?
You might think that the font family name is the name of the file itself. But it is not. Have a look at the below screenshot
The file name is different but the font book shows something else. The title in the font book application is your font family name. To denote different weights of the font, use -Regular, -Bold, etc.
Then in your css you can directly use
span {
font-family: "MathJax_Math-Regular"
}
and your font should be applied
I would like to print some code files with Android Studio.
Before I've changed the font Name in the print file Dialog.
But the different font did not fit my needs.
What is the Default font name for printing?
Or what font name do you prefer for printing code on paper?
There are two fonts I really like for code:
Deja Vu Sans Mono which you can download for free here --> http://dejavu-fonts.org/wiki/Download
Source Code Pro which you can download for free here --> https://www.fontsquirrel.com/fonts/source-code-pro
You may also want to check out this top 10 list of free code fonts: http://hivelogic.com/articles/top-10-programming-fonts/
Now, for the default Android Studio font:
I believe it is 'Monospaced'
I am using below CSS in my code. But I'm not sure if Android 4.4 have "Microsoft Yahei" font. Which exact chinese font should i specify in my CSS?
body {
font-family: Roboto,Arial,Helvetica,"Microsoft yahei","微软雅黑","微軟正黑體Microsoft JhengHei","微軟正黑體 Microsoft JhengHei","Microsoft JhengHei","微軟正黑體",sans-serif;
}
I believe its Noto Sans but for future reference font are stored under /system/fonts in your android directory if you need to look it up.
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
I use utf8 characters / symbols from utf8icons.com on my website. The symbol below is not displayed in firefox (34.0) on android even though I chose unicode in the firefox menu. I only get a grey square.
On the desktop version of firefox and chromium, it is correctly shown:
◔
.timedark:before {
content: '\25D4';
padding-left: 3px;
color: #222;
}
What could be wrong here ?
The font being used does not contain a glyph for the character and neither does any of the fallback fonts that the browser tries to use. The cause may well be that none of the fonts in the system contains this character. The options are the use of a downloadable font via #font-face and the use of an image instead.