Dot.Blog

J’avais abordé le sujet il y a longtemps en présentant une solution particulière pour les fontes natives, aujourd’hui je vous propose de faire le point sur les fontes externes que vous pouvez installer et utiliser dans vos applications …

Fontes natives ou pas ?

Les fontes dites “natives” sont celles qui sont fournies de base avec chaque OS. Android, iOS, UWP (Windows) toutes ces plateformes sont dotées de plusieurs fontes qu’on peut utiliser très simplement et sans risque de violation de copyright puisqu’elles sont déjà dans la machine. J’ai abordé ce sujet le 15 avril 2017, ce qui ne nous rajeunit pas, dans le papier “Xamarin.Forms : gérer les fontes natives”, je ne vais donc pas faire de redite ici et je renvoie le lecteur à cette saine lecture si ce qui l’intéresse est d’accéder aux fontes “de base”.

Aujourd’hui je vais compléter cette information en parlant des fontes extérieures, celles que vous allez installer avec votre application pour les utiliser dans votre application. Il y a forcément des choses similaires mais il y a assez de différences pour que nous en parlions ici.

Intérêt

L’intérêt d’utiliser les fontes natives est évident :

• Elles sont déjà là
• Pas de problème de copyright
• Complètement intégrées au look & feel de chaque OS

Mais justement et comme souvent ce sont les avantages qui dans certaines situations deviennent des inconvénients.

Sous la pression des designers, des clients, voire des utilisateurs, il existe un mouvement qui force à ce qu’une application soit rigoureusement la même quel que soit l’OS. Xamarin.Forms permet d’atteindre cet objectif d’un point de navigationnel par exemple (ou par la réutilisation du code) mais le design étant plus libre chacun doit faire selon ses contraintes. Par défaut Xamarin.Forms utilise des contrôles natifs ce qui peut créer des petites différences de look & feel entre les plateformes par exemple. Mais qu’en est-il des fontes ?

Les textes, les titrages sont des choses qui se voient énormément. Si les fontes diffèrent de trop on perd l’impression d’être sur la même application même si elle fonctionne de la même façon…

Il peut donc être intéressant d’utiliser une fonte extérieure qu’on installera et exploitera à l’identique sous tous les OS.

S’il s’agit d’un Splash Screen ou autre About Box, une image sera préférable. Rien à installer, pas de dépendance avec le fichier fonte etc…

Mais si le texte est variable plus question d’utiliser des PNG, il faudra vraiment installer la fonte en question…

L’intérêt est donc là. Dans l’uniformisation du look & feel d’une application au travers des OS (branding etc).

On notera que cet objectif se heurte à celui des constructeurs ou éditeurs d’OS qui eux veulent absolument se démarquer des concurrents et ne veulent pas d’uniformisation. Entre les impératifs de votre client et sa légitime volonté de cohérence et les impératifs des fournisseurs d’OS et leur légitime volonté d’unicité, ça sera à vous de trancher !

Obtenir les polices

S’agissant d’UI Design c’est au designer de vous donner les polices. C’est lui le maître à bord pour le look & feel. Et c’est lui qui prend la responsabilité par contrat de vous confier des polices que vous avez le droit d’exploiter sans risque de procès… S’il ne le fait pas c’est que ce n’est pas un Designer professionnel, juste un dessinateur de petits mickeys converti à l’UI Design pour se faire de l’argent. Prenez-en un autre.

Si vous voulez tenir ce rôle faites attention, vous serez responsable de vos choix et en cas de pépins votre patron fera sauter le fusible que vous êtes pour se couvrir (ce qui sera légitime dans ce cas d’ailleurs).

Donc comme avec tout matériel copyrighté on y va avec précautions et on s’assurera d’obtenir les droits d’utilisation. On ne fait pas ça au coup de cœur ou à l’arrache.

Vous êtes prévenus…

Donc vous allez vous retrouver avec des fichiers TTF.

Installer les fichiers

Avant d’utiliser un fichier TTF il faut l’installer. Or cette installation ne doit rien avoir de permanent. Notamment parce que si vous avez obtenu les droits pour votre application vous ne les aurez certainement pas pour distribuer vous-mêmes la police comme bon vous semble…

Il faut ainsi pouvoir installer les TTF avec l’application et s’en servir uniquement dans l’application.

Sous Android

Placez les fichiers dans le répertoire Assets en veillant à ce que le build soit “AndroidAsset”.

Sous iOS

Sous iOS copiez les fichiers dans le répertoire Resources et vérifier que le build est à “BundleResource”

Sous iOS il est aussi nécessaire de modifier le fichier info.plist pour y ajouter le nom de chaque police.

On le fera de la façon suivante (en reprenant les noms de polices des exemples précédents)  :

<key> UIAppFonts </ key>
<tableau>
    <string> OpenSans-Bold.ttf </ string>
    <string> OpenSans-Regular.ttf </ string>
</ array>

Pour UWP

Il faut copier les fontes dans le dossier Assets et s’assurer que le BuildAction est bien sur Content.

Utilisation des polices personnalisées

Après avoir obtenu les fontes, avoir bordé le côté juridique (j’insiste !), on va pouvoir enfin les utiliser dans l’application…

L’une des façons intelligente de faire cela est de placer leur définition une seule fois dans l’application dans un ResourceDictionary dans App.Xaml par exemple.Mais chacun fera comme il lui semble préférable dans son contexte.

Reprenons les mêmes polices :

<ResourceDictionary>
    <OnPlatform x:TypeArguments="x:String" x:Key="BoldFont">
        <On Platform="Android" Value="OpenSans-Bold.ttf#Open Sans" />
        <On Platform="UWP" Value="/Assets/OpenSans-Bold.ttf#Open Sans" />
        <On Platform="iOS" Value="OpenSans-Bold" />
    </OnPlatform>
    <OnPlatform x:TypeArguments="x:String" x:Key="NormalFont">
        <On Platform="Android" Value="OpenSans-Regular.ttf#Open Sans" />
        <On Platform="UWP" Value="/Assets/OpenSans-Regular.ttf#Open Sans" />
        <On Platform="iOS" Value="OpenSans-Regular" />
    </OnPlatform>
</ResourceDictionary>

Pour iOS, nous prenons le nom exact du fichier, sans l'extension. Pour Android, nous prenons le nom de fichier avec l'extension hash, puis le nom réel de la police. Si vous ouvrez la police, son nom apparaîtra dans la police, mais ce n'est pas toujours le même que le nom de fichier… méfiance !

Ensuite, pour utiliser la police, il vous suffit de référencer la clé. Là c’est plus simple.

<StackLayout>
    <Label Text = "Bienvenue dans Xamarin Forms! (OpenSans-Bold)" FontFamily = "{StaticResource BoldFont}" />
    <Label Text = "Bienvenue dans Xamarin Forms! (OpenSans-Regular)" FontFamily = "{StaticResource NormalFont}" />
    <Label Text = "Bienvenue dans Xamarin Forms! (Par défaut)" />
</ StackLayout>

La sortie sera en accord avec vos attentes si vous avez bien respecté les quelques points indiqués ici… Le nom de la police est parfois un casse tête mais une fois qu’il est fixé dans une ressource on oublie vite ce passage le moins drôle de cette astuce…

Conclusion

Si vous avez les droits d’utilisation d’une fontes vous pouvez l’utiliser dans vos applications, ce qui permettra de vous démarquer des Apps concurrentes. Techniquement comme nous venons de le voir c’est assez simple à condition de bien respecter certains points.

N’abusez pas de cette technique, elle alourdie votre APK ce qui n’est jamais une bonne idée.

Pour une fois qu’on peut s’amuser avec une police il ne faut pas se priver non plus

Stay Tuned !