GeodooBlog App Development Series with React Native
GeodooBlog: add fonts to a React Native app
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'