How to import custom typography (fonts) in your react-native project.

Today I found myself needing some new typography in my <Text> tags in our react native project @ placeavote.com

I spent some time trying to figure wether that feature was baked in react-native yet, and nnnooooope. Not there yet.

Being a developer though I tend to shy away from time consuming activities, so I thought to myself, well.. There must be a fast and easy way to quickly import custom fonts to my app without the need to copy and paste all my fonts on each native projects myself.. I’ve got more important things to do.

Luckily, I believe most of you are familiar with `rnpm`. Those guys really do a great job in simplifying our dev lives.
Turns out, it was pretty easy, all I had to do was create a folder within my react native project dir (I called it fonts), and throw my fonts in there.

After that all I had to do was place the following code in my `package.json`

“rnpm”: {
    “assets”: [
        “fonts”
     ]
 },

Now `rnpm` knows that this folder contains assets that have to be copied to each native project.

Then I just called:

rnmp link assets

and that was it.. rnpm placed all the assets in the right places, and I was up and running.

All I had to do from then on was declare the font family in each <Text> tag of my app:

myTextStyle:{
    fontFamily: ‘MyFontFamily’, 
}

Its now up and running.

Thank you rnpm.

p.s:

(For the ones that struggle with finding out what fontname they should type in their text field, I also used this code within my ios project. What it does is it prints out the current available font families and font names.)

for (NSString* family in [UIFont familyNames])
{
    NSLog(@”%@”, family);
    for (NSString* name in [UIFont fontNamesForFamilyName: family])        
    {
        NSLog(@” %@”, name);
    }
}

p.s 2: Make sure you use the full font name. For example Baskerville Italic should be declared as

fontFamily: ‘Baskerville-Italic’

in order to work on both iOS and android.

Or if you needed bold letters then it would be ‘Baskerville-Bold’ and so on.