Develop Reference

react native custom fonts

This question has been already here and here, but the answer is not satisfactory there. The fonts are not working on android but on iOS do. Maybe I made some mistake during the linking.
How did I added fonts:
Created folder assets/fonts/ inside root folder.
Added
"rnpm": { "assets": ["./assets/fonts"] }
react-native link
Console output was it successfully added assets to iOS and Android
Added fontFamily: 'MyCustomFontFamily' into styles.
Run on iOS, everything worked fine.
Run on Android, no typeface.
Checked the android project directory and the assets folder was present
I tried adding (Platform.OS === 'ios') ? 'MyCustomFontFamily' : 'fonts/my_custom_font_family' to go with the file name but this did not work wither.
Tried same variation as 9 without path or with extension but no luck
Read here to use weight, tried it, no luck.

I had the same issue, which had to do with the fact that, as you already know, Android will read from the filename whilst iOS will read from the full name property. And, indeed, I had mixed up my fonts' references.
The first thing I did to solve this was to double-check that my fonts were properly located in android/app/src/main/assets/fonts/.
Then I ended up renaming my fonts to the exact same name as the one used by iOS and using that name as a reference. Here is what I mean:
export const sansSerifLight = 'Aileron-Light'; // Filename is 'Aileron-Light.otf'
export const sansSerifRegular = 'Aileron-Regular'; // Filename is 'Aileron-Regular.otf'
export const sansSerifBold = 'Aileron-Bold'; // Filename is 'Aileron-Bold.otf'
export const serifRegular = 'LibreBaskerville-Regular'; // Filename is 'LibreBaskerville-Regular.ttf'
export const serifBold = 'LibreBaskerville-Bold'; // Filename is 'LibreBaskerville-Bold.ttf'
export const serifItalic = 'LibreBaskerville-Italic'; // Filename is 'LibreBaskerville-Italic.ttf'
export const sansSerifTitle = 'ADAM.CG PRO'; // Filename is 'ADAM.CG PRO.otf'
export const serifTitle = 'Oranienbaum'; // Filename is 'Oranienbaum.ttf
And then :
<MyComponent style={{ fontFamily: serifTitle }} />
This really made things way less error-prone and easier to maintain for me.

Android react-native app not picking up font

I am trying to use a font "Verveine Corp Regular' inside my react-native app.
The font works in the iOS build, but not in the Android build.
The font is in .tff format and is placed in the root of my work (linked in the package.json and I have run react-native link) and inside "android/gradle/src/main/assets/fonts" but it's still not picking the font up. I have also cleaned and rebuilt the app multiple times.
When inspecting an element which uses the font in the android debugger, it says it's using the font. But the font is still the default font.
Could anyone offer some help or guidance on this issue?
Thanks!

The other answers helped me get this working for me, thank you. This manuever is probably only necessary when the font has capital letters in the filename. A more complete answer:
Add the font as normal in react native, for example:
{react-native-project}/fonts/GovtAgentBB.ttf
Run react-native link and this will put the font in
{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB.ttf
{react-native-project}/android/app/src/main/assets/fonts/GovtAgentBB_ital.ttf
But android, bring robotic and not human, doesn't like this. So rename the file with all lower case letters and an underscore before the variant, like:
{react-native-project}/android/app/src/main/assets/fonts/govtagentbb.ttf
{react-native-project}/android/app/src/main/assets/fonts/govtagentbb_ital.ttf
Then, you have to change the font name in the style depending on the platform. For iOS, use the human name that is the name of the font that would be displaying in the title of the window of the Mac Font menu (or just the name you see on the web). For android, you have to, robotically, use the name of the file you just renamed.
{Platform.OS === 'ios' ? (
<Text style={styles.welcome}>
Hello World!
</Text>
) : (
<Text style={styles.welcomeAndroid}>
Hello World
</Text>
)}
const styles = StyleSheet.create({
...
welcome: {
fontFamily: 'Government Agent BB',
},
welcomeAndroid: {
fontFamily: 'govtagentbb',
},

This is how I used custom font in my project
//sampleStyle.js
import overrideStyles from '/sampleoverridestyles';
iconTextStyle: {
color: '#FFFFFF',
fontSize: 16
}
//sampleoverridestyles.ios.js
export default {
iconTextStyle: {
fontFamily: 'FaktSoftPro-Medium'
}
}
//sampleoverridestyles.android.js
export default {
iconTextStyle: {
fontFamily: 'faktsoftpro_medium'
}
}
since I cannot set the font name same for iOS and android I have overridden it as above and it worked.

Guys if you are following all other solution and still no update then try following the steps
add react-native-config.js file
then add fonts in assets/fonts/your font
rename it with lowercase like OpenSans_Regular to opensans_regular
react-native link in terminal in your project folder
after all build your project again using react-native run-android
fontFamily: Platform.OS === "ios" ? 'opensans_regular' : 'cassandrapersonaluseregular_3bjg',
I was also getting the same issue the font was not reflecting changes then I build my project again that was my mistake because we adding fonts in our android folder so we need to compile that again.
I hope someone may save their time

I added font in react-native android from here:
https://medium.com/#gattermeier/custom-fonts-in-react-native-for-android-b8a331a7d2a7#.40vw3ooar
Follow all the steps it will work fine.
After adding run react-native run-android

First, make sure you are up to version 0.16+ with react-native.
Your fonts should be *.ttf or *.otf files and must be located in: /projectname/android/app/src/main/assets/fonts
Make sure the fonts are lowercase only and follow this pattern: fontname.ttf, fontname_bold.ttf, fontname_light.ttf, fontname_bold_italic.ttf

Have you defined another font in your AppTheme (styles.xml), that overrides your preferred font?
Have you tested your font with a "Hello World"-App as a minimal test?
Have you implemented your ttf as shown here for example?: How to use custom font in Android Studio

Nativescript and FontAwesome

I am trying to use icon font FontAwesome in Nativescript application, which is possible according to this article https://www.nativescript.org/blog/mobile-app-best-practices---use-font-instead-of-image-to-show-an-icon
I did everything that is described in that article:
Added .ttf in app/fonts
Added class in app.css
.fa{
font-family: "FontAwesome";
}
Used it in XML like so
text="" class="fa"
But result is rather disappointing:
I also tried the "\uf230" syntax, but that renders as plain text.
What am I doing wrong?

Could be a few things. Does it work on iOS? As your CSS definition is iOS compatible, not Android as Android needs the actual filename (without extension) whereas iOS needs the font name. So I have this to be xplatform-ready (the file is 'fontawesome-webfont.ttf'):
.fa {
font-family: 'FontAwesome', fontawesome-webfont;
}
The \f005 syntax is OK (<Label class="fa" [text]="'\uf005'"></Label>), but I'm using the splendid nativescript-ngx-fonticon plugin (there's also a non-Angular one) to be able to do this instead:
<Label class="fa" [text]="'fa-shopping-basket' | fonticon"></Label>

To make it work, you must make sure that the "fonts" directory is inside the "app" folder and that the following files exist:
font-awesome.eot
font-awesome.ttf
I opted to adopt this font as the default of my application, so I do not have to worry about where I'm going to use it and how much to enter the right class, everything is getting very good and the result is perfect.
In CSS, you only have to define a selector according to your interest for the source to be used, so just use the directive:
page {
font-family: 'FontAwesome'
}
Then where you want an icon, just use an html entity that represents it as it searches the site: http://fontawesome.io/icons/
See images:
You can see this video where I was based to start. It corrects in the video the extension used to be attentive.

Using Date Spinner in flex mobile application

I am unable to use DateSpinner component in my flex mobile application. I am only interest to print date but not time. How can I achieve this in my flex mobile project. Platform is Flash Builder 4.6.
<s:HGroup verticalAlign="middle">
<s:SpinnerListContainer>
<s:DateSpinner id="dt" />
</s:SpinnerListContainer>
</s:HGroup>
The above code gives following error.
TypeError: Error #1009: Cannot access a property or method of a null object reference. DateSpinner.as:1290

In the example code for the DateSpinner control, they are not wrapping it in a SpinnerListContainer. So perhaps that's your problem. Have you tried the DateSpinner by itself?
It appears to me that the SpinnerListContainer is intended to be used with a SpinnerList control. And that SpinnerList is for more generic lists, while DateSpinner is a stand alone component used specifically for dates/times.

The given code doesn't work when displayMode property is set to "date" only.
<s:DateSpinner id="ds"
selectedDate="{new Date(2010, 11, 15)}"
minDate="{new Date(2000, 0, 1)}"
maxDate="{new Date(2200, 11, 31)}"
minuteStepSize="5" displayMode="date" />
when I use <s:DateSpinner id="dt" displayMode="dateAndTime" /> its works fine but it do not works when I set displayMode="date"
even the simplest form to dataspinner gives error, like you use
<s:DateSpinner id="ds" />

i've the same problem. After debugging the as-code i found a problem with determine the textsize. So i look at my console output i found this warning: This component requires that the embedded font be declared with embedAsCFF=false.
Thereafter i configured my Font-Style:
#font-face {
src: url("assets/Sintony-Regular.ttf");
fontFamily: Sintony-Regular;
advancedAntiAliasing: true;
embedAsCFF: false;
embed-as-cff: flase;
font-lookup: embeddedCFF;
fontWeight: normal;
}
s|DateSpinner {
font-family: Sintony-Regular;
}
Now my DateSpinner works. But many other components gives the warning: This component requires that the embedded font be declared with embedAsCFF=true. It's not a fully solution, but a beginning. Mybe i have to use different font-face declarations.
Hope it works for you, too

font-family change on cordova apache

It seems font-family css change wont work with Apache Cordova/phonegap in Android. But normal browser have no problems with this, any work around? I'm totally out of solution already.
var y = "Comic Sans MS";
$(function () {
$("#changecss").click(function () {
$('#header').css("font-family", y );
});
});

If I am not mistaken there are only 3 fonts available on Android by default. If you want to include a different font it needs to be a TrueType font and you'll have to reference the font file yourself.
http://www.brianhadaway.com/font-face-declarations-on-android-devices/