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)

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.