• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Mobile

Phonegap: Utiliser des polices systèmes

Introduction

Pour pouvoir utiliser des typos personnalisées dans le web,  on a pour habitude de convertir les polices souhaitées (.ttf, .otf, etc…) en format web (.woff, .svg, .eot, etc..) et d’y accéder ensuite en css avec la propriété @font-face.

Suite à ces conversions, les typos générées sont souvent dégradées, et l’affichage n’a plus rien à voir avec les maquettes.

Je vais vous montrer comment inclure des polices « brutes » directement dans votre application Phonegap et les appeler dans vos feuilles de styles comme s’il s’agissait d’une police système (cf: arial, verdana, etc).

Pour cet article, le tutorial concernera uniquement les projets sur iOS, et a été testé avec des polices OTF et TTF.

Tutorial

Ouvrez votre projet Xcode.

Dans le panel de gauche,  créez un dossier « Fonts » dans le répertoire « Resources ».

Prenez les polices que vous souhaitez inclure dans votre application et glissez les dans ce même dossier. Cochez bien la checkbox « Copy items into destination group’s folder ».

Ouvrez ensuite le fichier « info.plist » se trouvant dans le même répertoire « Resources ».

Ajoutez une nouvelle clé (clic droit dans la colonne « Key » et choisissez « New ») et nommez là « Fonts provided by application ».

Dans cette nouvelle clé, ajoutez autant d’item que vous souhaitez ajouter de polices et mettez comme valeur le chemin depuis le dossier « Resources » et le nom du fichier de votre police.

Exemple: « Fonts/NewTypo1.ttf » (sans les guillemets)

info.plist

Vous pouvez désormais appeler votre typo directement dans votre CSS, sans font-face!

p {
    font-family: 'NewTypo1';
}

Attention !

Il faut appeler votre police avec son nom « postscript », pas son nom de fichier, ni le nom « classique » de police.

Pour trouver le « postscript name » de votre police, il faut déjà l’installer sur votre mac et l’ouvrir avec le livre des polices. Affichez ensuite les informations de cette typo et vous devriez y trouver son nom « postscript ».

Je tiens à préciser que les typos ajoutés de cette manière ne seront pas installées de façon définitive sur votre iPhone/ iPad! Elle seront disponibles uniquement dans l’application compilée.

21/02/2014 13 MIN READ TAGS: Apache Cordova BY: Mikael L'HARIDON 0 COMMENT
SHARE
LIRE LA SUITE

Mikael L'HARIDON

Cocos2D-x html5 - partie 1

J'ai testé pour vous Drupal Commerce !

VOUS POURRIEZ AIMER

Mobile Développer ses applications Phonegap sur son navigateur

Mobile Développer un plugin cordova dans les règles de l’art

Mobile Optimisations Phonegap / Cordova

Mobile Application mobile : Native ou hybride ?

Mobile Présentation de Phonegap 3.0

Mobile Cordova et limites des web workers

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect