Tag: react-native-fonts

Hey there! How are you? Hope fine.

Well, I am trying to add fonts to my app and I am following this guy’s article right here:

https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4

Ok, I do not want to copy the article here but (I only care about the Android version for now) I will copy whatever I want to jot down so I won’t have to search all the web again to find it again! Here we go:

How to copy your fonts to the appropriate directories in your React Native app

Let’s say that we would like to add Advent Pro and Ubuntu in the app, so we have to download the fonts from Google fonts and then create two folders inside the app at the root folder:

./assets

and,

./assets/fonts/

Then, we have to copy the .ttf files inside the latter folder. You can paste the whole folders of the unzipped fonts like Ubuntu/. Now, we add this snippet in our package.json file:

"rnpm": {
    "assets": ["./assets/fonts"]
}

where the string “./assets/fonts” is the path we copied the fonts to. After this we run at the terminal at the root folder the command:

react-native link

and as a result in the terminal we get (if you run it for the first time you get the result in the Daniel Skripnik article) the following every time we copy fonts:

rnpm-install info Linking assets to ios project 
rnpm-install info Linking assets to android project 
rnpm-install info Assets have been successfully linked to your project

Another thing I noticed is that, when we added the style for a Text component which is supposed to be the title of the section Recent Posts in the MainScreen component of the app, we had to use the same name as the .ttf file. The instructions of Google to add:

font-family: 'Advent Pro'

did not work, instead we added:

fontFamily: 'AdventPro-Regular'

like the name of the .ttf file and it worked!

How to find out the name of the font in the terminal

I am using Ubuntu 16.04 for personal use and web development and as usual there is some kind of program that can do what you are searching for inside of the terminal! In this case we want to find more info about the .ttf files. The program’s name is otfinfo and you can find it in the package lcdf-typetools. You can install it by typing:

sudo apt-get install lcdf-typetools

Then go to the folder with the files and type for example:

otfinfo --info AdventPro-Regular.ttf

This gives us the following info:

Family: Advent Pro
Subfamily: Regular
Full name: Advent Pro Regular
PostScript name: AdventPro-Regular
Version: Version 2.004
Unique ID: 2.004;ADBE;AdventPro-Regular
Designer: Andreas Kalpakidis
Designer URL: www.inderesting.com
Manufacturer: Andreas Kalpakidis
Vendor URL: www.inderesting.com
Trademark: Advent Pro Thin is a trademark of INDE Andreas Kalpakidis.
Copyright: Copyright (c) 2008 Andreas Kalpakidis (hello@inderesting.com), with Reserved Font Name "Advent Pro"
License URL: http://scripts.sil.org/OFL
License Description: This Font Software is licensed under the SIL Open Font License, Version 1.1. This license is available with a FAQ at: http://scripts.sil.org/OFL
Vendor ID: ADBE

We are looking for PostScript name! That’s the name of the font that we are gonna use in our CSS. Well, JS CSSlike… styles.

fontFamily: 'AdventPro-Regular'