Intégrer les polices de caractères de son identité graphique

Tu as défini les polices d’écriture de ton identité graphique ? Félicitations ! Maintenant il va falloir les prendre en main et les intégrer dans la communication visuelle de ta marque. 

C’est ce que nous allons explorer dans cet article. 

Petit aparté avant de commencer : on utilise les termes “police”, “police d’écriture”, “police de caractères”, “fonte”, “font”, “typeface”, “typographies” et “typo” de façon presque interchangeable mais ils ne sont pas synonymes. Ceci dit pour utiliser des polices, pas besoin de connaître ces différences. 

Au programme de cet article : 

• Intégrer les fonts sur tes visuels faits via Canva 
• Intégrer les fonts sur tes visuels faits par toi-même
• Intégrer les fonts dans tes documents 
• Intégrer les fonts sur ta signature e-mail
• Intégrer les fonts sur ton site web 

Intégrer les fonts sur tes visuels via Canva 

Si tu souhaites utiliser Canva pour tes visuels (réseaux sociaux, ebooks, etc.), il y a quelques petites choses à connaître à propos des polices d’écriture sur Canva. 

D’abord, Canva propose dans sa version gratuite un certain nombre de polices (disponibles ailleurs) et il est seulement possible dans la version payante d’accéder aux polices “premium” ou d’importer ses propres polices. 

Certaines polices de Google Fonts font partie des polices disponibles dans la version gratuite de Canva mais pas toutes ! Il vaut mieux prendre ce point en considération au moment du choix de ses polices. 

Intégrer les fonts sur tes visuels faits par toi-même

Si tu crées tes visuels toi-même, sans passer par un outil comme Canva, il faut installer les polices sur l’appareil ou les appareils sur lesquels ces visuels vont être créés. Cela est très simple et rapide. Si cela te rassures, tu peux suivre un petit tuto comme celui-ci.

Je te conseille d’utiliser un outil comme Photoshop ou GIMP (avec un système de calques) et de créer des templates aux dimensions souhaitées (un template pour tes articles de blog, un template pour les publications Instagram, un template pour les images sur Pinterest, etc.) en y intégrant les éléments invariants, notamment des champs textes avec la bonne police pré-configurée. Il te suffira simplement de changer l’image de fond (s’il y en a une), le texte et l’image sera prête à être intégrée. 

PowerPoint ou KeyNote peuvent également bien convenir à ce genre de travail.  

Pour que les visuels soient efficaces, il faut hiérarchiser l’information et équilibrer les écritures. L’information la plus importante doit être la plus visible (avec la police la plus lisible, la taille la plus grosse, le contraste le plus fort). Pour accentuer certains mots, on peut utiliser une police fantaisie, de l’italique, du gras ou une couleur d’accent. 

Dans le doute, mieux vaut toujours faire le plus simple et le plus sobre. Cela fonctionnera toujours. 

Autre point important, il faut laisser de l’espace dans un visuel et ne surtout pas chercher à remplir toute la place, que ce soit des marges autour des textes ou de façon plus générale. 

La règle la plus importante dans la communication visuelle : less is more (moins c’est mieux). 

Cela nécessiterait d’être développé dans un livre entier, ce sont les bases indispensables.   

Intégrer les fonts dans tes documents

Par documents j’entends tous les documents liés à ta marque : ce peut être des documents pdf dans le cadre d’une formation, des e-books ou les factures que tu émets. 

Là encore, selon que tu utilises un outil tiers (comme Canva ou un outil de facturation), les polices devront être importées sur cet outil ou installées sur ton poste de travail. 

Il n’y a rien de compliqué à ce stade. 

J’aimerais simplement apporter une petite astuce : utiliser PowerPoint ou KeyNote pour créer des e-books est vraiment hyper puissant. Il existe de nombreux templates pour ces deux logiciels pour nous faciliter la tâche. Je sais que Canva a la cote pour la création d’e-books mais je ne trouve pas qu’il soit si adapté que ça. Je te laisse tester et choisir ce que tu préfères !

Intégrer les fonts sur ta signature e-mail

Il y a de fortes chances pour que les polices d’écriture définies pour ton identité visuelle ne puissent pas être intégrées directement dans ta signature e-mail. 

Pour que les polices d’écritures de la signature soient lues correctement, il faut que sur l’appareil (ordinateur, mobile, etc.) qui lit l’e-mail ces polices soient installées. Or peu de polices sont installées sur tous les appareils. Il va donc falloir utiliser des polices “sûres”, c’est-à-dire lisibles par tous les appareils. Parmi ces polices “web safe”, il y a : Arial, Verdana, Georgia, Tahoma, Courier, Times New Roman, Trebuchet. 

Ensuite il est plus élégant et plus sûr d’utiliser une signature e-mail en html. Cela garantit également la bonne lisibilité par le récepteur de l’e-mail. 

Il est possible de créer directement le code html ou bien de passer par des outils de générateurs de signature comme Hubspot, d’y ajouter des hyperliens et une image par exemple. 

Une fois l’html créé, il ne reste plus qu’à configurer l’outil d’e-mailing avec cette nouvelle signature. 

Intégrer les fonts sur ton site web 

Terminons par le sujet le plus complexe : configurer les polices de caractères sur le site web de sa marque. 

Toutes les polices ne se valent pas

Pour bien comprendre les enjeux qui se cachent derrière cette étape, un très bref rappel historique et technique s’impose. 

Aux débuts du world wide web, quelques polices seulement (polices “web-safe”) étaient disponibles pour les pages web, toutes les pages devaient utiliser ces polices pour pouvoir être affichées correctement par les navigateurs web. Et dans un avenir parfait, toutes les polices pourront s’intégrer sur toutes les pages web. 

Pour qu’un navigateur web puisse lire la police d’écriture implémentée sur une page web, cette police doit être installée sur l’ordinateur/smartphone/tablette ou bien le navigateur doit pouvoir télécharger la police dans le cas où celle-ci ne serait pas disponible sur l’appareil. 

Actuellement, les solutions permettant le téléchargement des polices par les navigateurs ne sont pas parfaites, ce qui fait que certaines polices d’écritures sont plus “sûres” que d’autres. 

Donc grosso modo, toutes les polices ne sont pas (encore !) simples à intégrer sur un site web. C’est la raison pour laquelle je te conseille vivement d’utiliser les polices du service externe Google Fonts lorsque tu choisis des polices destinées à être intégrées sur un site web. C’est la solution la plus simple et rapide. 

Si toutefois tu n’as pas trouvé ton bonheur parmi les nombreuses fontes Google et que tu cherches absolument à intégrer une police particulière sur ton site web, il te faudra d’abord convertir le fichier de fonte en “webfont” en passant par exemple par le générateur de Fontsquirrel et ensuite héberger cette webfont (avec ses différents formats pour garantir la compatibilité avec tous les navigateurs web) sur le serveur de ton site web ou via un service externe. 

Intégrer des polices sur un site WordPress

Je recommande vivement WordPress (.org !) pour créer facilement un site web professionnel, robuste et simple à prendre en main. Voyons les façons simples d’intégrer les polices d’écriture sur un site WordPress. 

Intégrer des fonts Google 

Méthode 1

Plusieurs thèmes WordPress (comme Divi) proposent de base les fonts Google dans leur paramétrage. Il n’y a donc rien à faire dans ce cas à part les sélectionner. 

Méthode 2

Si le thème ne propose pas par défaut les fonts Google, une façon de les intégrer est d’installer un plugin WordPress tel que Easy Google Fonts qui rendra possible la sélection des fonts Google depuis le paramétrage du thème. 

Méthode 3

Il est aussi possible de copier/coller le code d’intégration de la font fourni par Google Font dans le header des pages web, par exemple en utilisant un plugin WordPress tel que Insert Headers and Footers. Ensuite il faudra spécifier dans le CSS du thème quelle font utiliser pour quel titre ou paragraphe, par exemple : 

body { 
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

Intégrer les fonts Typekit ou Adobe Fonts

Les fonts de Typekit ou Adobe Fonts peuvent s’intégrer facilement également. Contrairement à Google Fonts, Typekit nécessite un compte Adobe (pas nécessairement payant) et certaines fonts sont payantes. 

Méthode 1

Comme pour Google Fonts, il existe des plugins WordPress pour intégrer les fonts Typekit facilement : par exemple le plugin Typekit Fonts for WordPress. 

Méthode 2

Une autre façon de faire est de copier le code d’intégration de la font depuis Typekit et de le coller dans le header du site web. Cette opération peut se faire en utilisant un plugin WordPress tel que Insert Headers and Footers. 

Une fois cette étape réalisée, il faut spécifier dans le CSS (dans l’apparence du thème) quelle fonte utiliser pour quel type de style (le corps du texte et les titres, principalement). Par exemple pour les titres 1 et la font Operetta, 18 points, gras. 

 h1 .site-title { 
font-family: operetta-18, serif; 
font-weight: 700; 
font-style: normal; 
} 

Intégrer d’autres fonts

Pour intégrer un autre type de font, comme nous l’avons vu plus haut, il faut déjà la convertir en webfont. 

Certains thèmes WordPress proposent une façon simplifiée d’intégrer les fonts, c’est le cas de Divi. 

Si le thème ne propose pas ce genre de fonctionnalité, une façon de faire ensuite est de copier les fichiers de webfont dans le dossier du thème (ou thème enfant) WordPress, en passant par le FTP (avec FileZilla par exemple) ou l’administration serveur (comme cPanel). 

Cette opération étant faite, il faudra ensuite ajouter dans le CSS deux choses :

D’abord pour chaque font, utiliser @font-face (en remplaçant l’URL et le nom de la fonte) :

 @font-face {
     font-family: MyFont;
     src: url(https://www.mon-site.com/wp-content/themes/mon-theme/fonts/MyFont-Regular.ttf);
     font-weight: normal; 
 } 

Puis pour chaque style, spécifier quelles fontes utiliser :

 .h1 site-title { 
 font-family: "MyFont", Arial, sans-serif; 
} 

Les webfonts sont dans ce cas stockées sur le serveur mais cela a quelques inconvénients, notamment la lenteur de chargement des pages. 

Une fois les polices installées partout où elles ont besoin de l’être, il ne reste plus qu’à les utiliser !