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
Related
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
I want to display certain text in Oriya font in my android app. There is no default support in android for Oriya language. I tried different ttf files for Oriya font but not able to display the content. Can anyone help me in this?
I have tried the following code keeping the oriya.ttf file in my assets folder.
Typeface typeFace=Typeface.createFromAsset(getActivity().getApplicationContext().getAssets(),"fonts/oriya.ttf");
tvSoft.setTypeface(typeFace);
If you want change font in android this is the best solution:
https://github.com/chrisjenx/Calligraphy
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.
I possess two complementary fonts that are installed on my computer (Linux), and that are used to render every characters that the two fonts have.
I would have liked to use in the same way these fonts in Android. Unfortunately, I don't know how to do this (I know how to load one font).
I have tried to merge them with FontForge, but unfortunately I couldn't because the total number of glyphs is over 65535 glyphs (which is the limit of the sfnt format).
Is there a possibility to go over 65535 glyphs, so that the font can be used in Android?
If not, is there a way to use these fonts conjointly in Android in general, so that the characters not recognized by a font are recognized by the other (like my computer does)?
If not, is it possible to use two Typeface in a TextView, so that the characters not recognized by a font are recognized by the other?
I know that we can use Spannable to use different Typeface for different parts of the TextView, but that's not exactly my need here.
If not, is it possible to detect all the unrecognized characters of my TextView, so as to use the other font only for them?
Is it possible to use the CSS style "font-family" in a TextView, so as to provide an alternative font in the case the first fails for some characters?
Thanks to the direction given by JaiSoni, I have managed to find a way to solve my problem using HTML and CSS : I have used a WebView, and have declared the #font-face to define my fonts. Then, I have used them in the CSS attribute "font-family" like this :
<style type="text/css">
#font-face {font-family: MyFont; src: url("file:///android_asset/fonts/font.ttf")}
#font-face {font-family: MyFont2; src: url("file:///android_asset/fonts/font2.ttf")}
body {font-family: MyFont2, MyFont; }
</style>
Thank you very much.
I developed a Tamil news application in android version 2.3.3. However, Tamil fonts have only been properly developed in android versions 4.0 and beyond. I want to display them in all versions of android mobile.
I tried to solve the problem with some Tamil fonts, such as bamini and mylai, but they only worked in higher android versions.
First of all you have to understand that there is no Tamil Language support in Android OS (except few Samsung & SE mobiles) till ICS(4.0). Even then it had bugs and full support is provided with Jelly Bean (4.2).
You will only see boxes if you use Unicode Tamil font in your app. Reason is there are no Tamil fonts in the system.
1. Manual way of doing
There is a work around for this solution. All you have to do is, download the Bamini font and place it in your assets folder. And create TypeFace with the font Bamini and set it to the TextView.
Typeface font1 = Typeface.createFromAsset(getAssets(), "fonts/Bamini.ttf");
customText1.setTypeface(font1);
Now use a converter to convert Unicode font into Bamini encoding. instead of the Unicode text provide the converted Bamini encoded script into the setText method.
2. Using the Library
If you hate all these manual encoding conversion then check out this library
As I said in above line, if you like to change the encoding dynamically while running the application then consider using the library I wrote for Android. This library will help you to convert Unicode String to Bamini, TSCII, TAB, TAM and Anjal.
Set up is very simple. All you have to do is simply import the library into your Android project and call the library as below.
// Initialise the Typeface (assumes TSCII, Bamini, Anjal, TAB or TAM font located inside assets/fonts folder)
Typeface tf = Typeface.createFromAsset(getAssets(),"fonts/mylai.ttf");
// Initialises the TextView
TextView tv = (TextView)findViewById(R.id.textView1);
//Setting the Typeface
tv.setTypeface(tf);
//Magic happens here ;) encoding conversion
String TSCIIString = TamilUtil.convertToTamil(TamilUtil.TSCII, "வணக்கம் அன்ரொயிட்");
//Setting the new string to TextView
tv.setText(TSCIIString);
There is a sample app available along with the library. Check out the app on how the library is utilised to convert the Unicode String to Bamini, TAB, TAM, TSCII and Anjal.
You would get something like this when you use the library.
You need to make use of the TypeFace class available in Android. You can use either Bamini or TSCII encoding (Mylai is a TSCII font).
Disclaimer : I wrote this library.
3. For WebView
If you are developing using html and CSS wraped inside a WebView then take a look at this application's source. You gonna have to make use of fontface feature of CSS3.
First you need to have style declared as this
#font-face {
font-family: MyCustomFont;
src: url("Bamini.ttf") /* TTF file for CSS3 browsers */
}
Then you gotta use the MyCustomFont in your tags. For example if you wanna set it to the whole body (which is much easier in this case)
body {
font-family: MyCustomFont, Verdana, Arial, sans-serif;
font-size: medium;
color: black
}
Hope this would give you the heads up you deserve. Hope to see more Tamil apps in Play Store.
TAb dont need embedd, now we have unicode
Please use this Tamil unicode fonts
http://visualmediatech.com.fonts