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

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 👀

La salle

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.

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 ajoutons rnpm à notre package.json et lui fournissons le chemin d’accès à notre fichier.

"rnpm": {
    "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. Grâce à React Native Package Manager, il n’est plus nécessaire de copier et de renseigner manuellement notre fichier.

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.

Afin d’obtenir un comportement valide sur les deux projets, nous créons un fichier de configuration dédié à nos fonts, dans lequel nous recourons à la logique conditionnelle :

import { StyleSheet, Platform } from 'react-native';

const styles = StyleSheet.create({
  regular: {
    fontFamily: 'Montserrat',
  },
  semiBold: {
    ...Platform.select({
      ios: {
        fontFamily: 'Montserrat',
        fontWeight: '500'
      },
      android: {
        fontFamily: 'Montserrat SemiBold',
      },
    }),
  },
  bold: {
    ...Platform.select({
      ios: {
        fontFamily: 'Montserrat',
        fontWeight: 'bold'
      },
      android: {
        fontFamily: 'Montserrat Bold',
      },
    }),
  },
});

export default styles;
import fontStyles from 'res/fonts';

const styles = StyleSheet.create({
  title: {
    paddingBottom: 6,
    ...fontStyles.bold,
    color: '#FFF',
    fontSize: 25
  },
});

Vous avez désormais toutes les informations pour intégrer vos fonts personnalisées dans React Native !

À bientôt ✌

Continuer la discussion sur Twitter