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.