Comment ajouter une police d’écriture sur Ionic 4

admin 18 août 2019 0 Comments

Lorsque vous crée une application sur Ionic 4, elle a uniquement les polices standard qu’un navigateur peut interpréter. Cependant, nous avons la possibilité d’ajouter les police d’écritures qui vous convient.

Dans cet article, nous allons voir comment ajouter une police d’écriture qui nous convient à notre application.

#1: Téléchargement de la police d’écriture

Tout d’abord nous allons nous rendre sur le site webGoogle Fonts pour télécharger une police à utiliser dans ce tutoriel.

NB: La source de la police importe peut le but est d’avoir la police que nous souhaitons utiliser.

Une fois que nous avons télécharge les polices d’écritures que nous voulons ajouter à notre site, nous allons maintenant voir comment ajouter cela à notre application mobile.

#2: Intégration de notre police

Intégrer notre police dans notre application ionic est extrêmement simple. Il suffit tous simplement de se rendre sur notre projet ionic et puis créer un répertoire fonts dans le dossier assets . Puis nous allons simples extrait nos différentes polices d’écritures et leur coller dans notre dossier fonts.

Apres cela, nous allons créer un fichier fonts.scss dans notre répertoire themes ou nous allons importer nos différentes polices d’écritures.

@font-face {
  font-family: 'Cutive Mono';
  font-style: normal;
  font-weight: normal;
  src: url('../assets/fonts/Cutive_Mono/CutiveMono-Regular.ttf');
}

@font-face {
  font-family: 'Indie Flower';
  font-style: normal;
  font-weight: normal;
  src: url('../assets/fonts/Indie_Flower/IndieFlower-Regular.ttf');
}

@font-face {
  font-family: 'Satisfy';
  font-style: normal;
  font-weight: normal;
  src: url('../assets/fonts/Satisfy/Satisfy-Regular.ttf');
}

En suite nous allons importer notre fichier fonts.scss dans notre fichier variables.scss à fin de rendre disponible nos polices dans notre application.

@import "fonts";

Pour changer la police d’écriture de tous les textes de notre application, nous devons ajouter l’instruction ci après dans notre fichier variables.scss

@import "fonts";

:root,
:root[mode=ios],
:root[mode=md] {
  --ion-font-family: "Cutive Mono", serif !important;

  font-family: "Cutive Mono", serif !important;
}

Remarque important: :root[mode=’Type d’application’] permet de définir la plateforme sur laquelle nous souhaitons appliquer le style. C’est ainsi que nous avons :root[mode=ios] qui définir les styles sur la version IOS de notre application et :root[mode=md] pour la version android.

Pour les styles spécifiques, il suffit tout juste d’utilisé le font-family pour définir cela :

 .style {
        font-family: 'Indie Flower';
      }

Après avoir appliqué nos police d’écritures, les résultats seront aussi immédiates

En conclusion le but de cet article était de vous apprendre à ajouter une police d’écriture sur ionic 4. Nous avons compris que nous pouvons ajouter autant de police que nous souhaitons à notre application mobile; mais cela présent pour avantages:

L’amélioration des mises en forme des textes de notre application ionic;
L’augmentation des qualités de notre UI/UX Disign.

Cependant il existe un inconvénient majeur qui est :

La baisse de performance de notre application au cas où nous ajoutons trop de police dans notre application mobile. Cela sera causé pas une légère augmentation du temps de chargement de notre application.