Polices dans React

Nous allons vous présenter comment installer des polices et utiliser des polices en React.

Polices dans React

Les polices sont la partie la plus importante d’un site Web. Il existe différentes façons d’installer des polices dans l’application React.

La méthode la plus courante consiste à importer une police. Nous pouvons importer une police en utilisant npm ou yarn dans l’invite de commande. Installons Quicksand comme exemple.

# react CLI
yarn add typeface-quicksand

ou

# react
npm install typeface-quicksand --save

Après l’avoir installé, nous devons l’importer dans le fichier index.tsx.

# react
import 'typeface-quicksand';

Maintenant, nous pouvons l’utiliser dans le fichier style.css.

# react
h1,
p {
  font-family: Quicksand;
}

Production :

Une autre façon d’installer des polices en React consiste à ajouter directement des liens dans le fichier index.html ou style.css. Installons la police Lato comme exemple.

# react
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">

Ou,

# react
<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
</style>

Importons la police Lato et modifions le style du titre et du paragraphe.

# react
@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');
h1,
p {
  font-family: Lato;
}

Production :

Une autre façon d’installer des polices en React consiste à les télécharger et à les ajouter dans notre code source.

Nous pouvons facilement télécharger des polices depuis fonts.google.com et les déplacer dans le répertoire fonts de notre répertoire src.

Maintenant, dans style.css, ajoutez des polices en utilisant @font-face.

# react
@font-face {
  font-family: 'Lato';
  src: local('Lato'), url(./fonts/Lato-Regular.otf) format('opentype');
}

Pour le format ttf, il faut mentionner format('truetype'), et pour le format woff, il faut mentionner format('woff').

Maintenant, nous pouvons facilement styliser en utilisant cette police.

# react
h1,
p {
  font-family: Lato;
}

Production :

Une autre méthode consiste à utiliser le package web-font-loader. Nous pouvons facilement installer un package web-font-loader en utilisant npm ou yarn.

# react
yarn add webfontloader

Ou,

# react
npm install webfontloader --save

Maintenant, dans index.tsx, nous pouvons importer et spécifier la police dont nous avons besoin.

# react
import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Lato:300,400,700', 'sans-serif']
   }
});

Alors maintenant, nous avons appris quatre façons différentes d’installer et d’utiliser des polices dans React.