Comment intégrer une font personnalisée dans une app React Native ?

Vous avez besoin d'intégrer une font absente des systèmes Android et iOS ? Vous êtes au bon endroit, nous vous expliquons la procédure à suivre ✨

Préparation du fichier source

Avant toute chose, notons l'information suivante : l'interprétation des fonts importées diverge selon la plateforme. Android utilise le nom du fichier sans l'extension comme référence, tandis que le système d'exploitation de la marque à la pomme utilise le nom renseigné dans la famille de la font en question 👀

Imaginons ceci : nous intégrons dans notre projet le fichier nommé montserrat.ttf. Ensuite nous utilisons la propriété fontFamily: 'Montserrat'. En toute logique, la police s'affiche sur iOS tandis que ce n'est pas le cas sur Android. En effet celui-ci attend la valeur correspondant au nom du fichier utilisé, c'est à dire montserrat.

Notre première étape consiste donc à nommer notre fichier source d'après le nom de la famille de la font, soit Montserrat.ttf dans notre exemple.

Depuis la version 0.60, il est possible de régler ce soucis de sorte à ne pas avoir à appliquer la font selon la plateforme.

Intégration dans React Native

Nous plaçons notre fichier source à l'emplacement suivant : src/res/fonts.

L'étape suivante consiste à indiquer à React Native où se trouve notre font. Pour ce faire nous créons un fichier react-native.config.js (s'il n'existe pas) avec le contenu suivant:

module.exports = {
  project: {
    android: {},
    ios: {},
  },
  assets: ['./src/res/fonts/'],
}

Ensuite nous linkons notre fichier font à notre projet ✨

react-native link

Cela devrait ajouter les références de notre font dans notre fichier Info.plist pour iOS, et copier le fichier source dans le répertoire adéquat pour Android.

Notre font est désormais accessible dans notre projet React Native. Il nous suffit simplement d'utiliser la propriété fontFamily avec le nom de celle-ci :

const styles = StyleSheet.create({
  octet: {
    fontFamily: 'Montserrat',
    fontSize: 20,
  },
})

Utilisation de plusieurs graisses

Prenons l'exemple suivant : notre projet nécessite deux variantes supplémentaires de Montserrat que nous intégrons par le biais de deux nouveaux fichiers. Nous avons donc :

• Montserrat.tff
• Montserrat Bold.ttf
• Montserrat SemiBold.ttf

Nous importons nos différents fichiers et utilisons le style suivant 👇

fontFamily: 'Montserrat',
fontWeight: 'bold'

Impeccable sur iOS mais impossible d'obtenir la version bold sur Android. Rappelez-vous, celui-ci fait référence à la font uniquement par le nom du fichier lui correspondant. Nous devons donc utiliser 👇

fontFamily: 'Montserrat Bold',

Parfait, ça fonctionne sur Android. Mais attendez, le build iOS m'indique qu'il rencontre un problème : la font Montserrat Bold n'existe pas. Et c'est bel et bien le cas, il s'agit pour le système d'une graisse différente de la famille Montserrat.

L'objectif ici est donc d'avoir une solution nous permettant d'utiliser le style que nous avions en premier lieu utilisant fontFamily et fontWeight. Il faut donc effectuer quelques modifications du côté d'Android.

À cette étape, les fonts devraient être présentes sous le dossier android/app/src/main/assets/fonts. La première étape consiste à déplacer nos fonts dans le dossier android/app/src/main/res/font, puis à renommer tous les fichiers de font au format snake case, par exemple Montserrat-Black.ttf devient montserrat_black.ttf. Dans le même dossier, créer un fichier montserrat.xml avec le contenu suivant:

<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:android="http://schemas.android.com/apk/res/android">
    <font android:fontStyle="normal" android:fontWeight="900" android:font="@font/montserrat_black" />
    <font android:fontStyle="italic" android:fontWeight="900" android:font="@font/montserrat_blackitalic" />
    <font android:fontStyle="normal" android:fontWeight="800" android:font="@font/montserrat_extrabold" />
    <font android:fontStyle="italic" android:fontWeight="800" android:font="@font/montserrat_extrabolditalic" />
    <font android:fontStyle="normal" android:fontWeight="700" android:font="@font/montserrat_bold" />
    <font android:fontStyle="italic" android:fontWeight="700" android:font="@font/montserrat_bolditalic" />
    <font android:fontStyle="normal" android:fontWeight="600" android:font="@font/montserrat_semibold" />
    <font android:fontStyle="italic" android:fontWeight="600" android:font="@font/montserrat_semibolditalic" />
    <font android:fontStyle="normal" android:fontWeight="500" android:font="@font/montserrat_medium" />
    <font android:fontStyle="italic" android:fontWeight="500" android:font="@font/montserrat_mediumitalic" />
    <font android:fontStyle="normal" android:fontWeight="400" android:font="@font/montserrat_regular" />
    <font android:fontStyle="italic" android:fontWeight="400" android:font="@font/montserrat_italic" />
    <font android:fontStyle="normal" android:fontWeight="300" android:font="@font/montserrat_light" />
    <font android:fontStyle="italic" android:fontWeight="300" android:font="@font/montserrat_lightitalic" />
    <font android:fontStyle="normal" android:fontWeight="200" android:font="@font/montserrat_extralight" />
    <font android:fontStyle="italic" android:fontWeight="200" android:font="@font/montserrat_extralightitalic" />
    <font android:fontStyle="normal" android:fontWeight="100" android:font="@font/montserrat_thin" />
    <font android:fontStyle="italic" android:fontWeight="100" android:font="@font/montserrat_thinitalic" />
</font-family>

Ce fichier est un fichier de resource de font permettant d'associer une fontStyle et sa fontWeight à un fichier de font.

Il faut maintenant indiquer à react-native comment associer ce fichier de font à un nom de font. Pour cela il faut se rendre dans le fichier MainApplication.java, puis ajouter cet import:

import com.facebook.react.views.text.ReactFontManager;

Ensuite ajouter la ligne suivante dans la fonction onCreate de la classe MainApplication:

ReactFontManager.getInstance().addCustomFont(this, "Montserrat", R.font.montserrat);

Penser ensuite à recompiler l'application avec la commande yarn android. En utilisant le style suivant, le rendu sera le même sur iOS et Android, et il n'est plus nécessaire de compliquer le code à coup de Platform.select.

fontFamily: 'Montserrat',
fontWeight: 'bold'

À bientôt et bon code 🧑‍💻