contact@nusyce.com
+237 692 324 989 | 679 302 498
Demandez un devis
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
  • Accueil
  • Nos services
    • Création graphique
    • Application mobile
    • Création Site Web | Application Web
    • Marketing Digital
    • Intégration de solution métier
  • Portfolio
  • Nous contacter
Blog
Application mobileIonic framework

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.

Ionic 4 Ionic FrameWork
37
3164 Views
Comment faire un crud sur Ionic 4 + Php + MySql part 2PrevComment faire un crud sur Ionic 4 + Php + MySql part 215 août 2019
Géolocalisation et GoogleMap avec ionic 48 septembre 2019Géolocalisation et GoogleMap avec ionic 4Next

Related Posts

Application mobileIonic framework

Comment ajouter une police d’écriture sur Ionic 4

Lorsque vous crée une application sur Ionic 4, elle a uniquement les polices standard...

admin 18 août 2019
Application mobileIonic framework

Comment faire un crud sur Ionic 4 + Php + MySql part 1

Sauvegarder les données de votre application mobile sur ionic 4 vers un server distant...

admin 14 août 2019

Laisser un commentaire Annuler la réponse

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Articles récents
  • Comment créer un preloader sur ionic 4
  • Comment designer votre carte google map
  • Géolocalisation et GoogleMap avec ionic 4
  • Comment ajouter une police d’écriture sur Ionic 4
  • Comment faire un crud sur Ionic 4 + Php + MySql part 2

NUSYCE est une agence numérique spécialisée dans le développement d'applications web et mobiles. Grâce aux technologies de pointe et un développement personnalisé, nous vous proposons la croissance par l'innovation.
Services
Création graphique
Application mobile
Intégration de solution
Développement d’application Web
Référencement SEO / SEA
Contacts
Adresse : Rond-point Dakar Immeuble Afriland Frist Bank Douala
Site Web: nusyce.com
Email: contact@nusyce.com
Tél: +237 692 324 989 | 679 302 498
Newsletter

VOS RÊVES, NOS RÉALISATIONS

Copyright © 2021 NUSYCE. All Rights Reserved.