Configurer une web police sur le site

Comment ajouter ou modifier une police pour son site web ?

👉 Par défaut, les sites générés avec inwink utilisent la web font "Lato"

  https://fonts.google.com/specimen/Lato



Pour configurer la police de votre site

  • Rendez-vous dans le back-office de l'évènement 
  • Onglet SITE WEB > Identité visuelle > POLICE DE CARACTÈRE 

 

En haut de l'écran, cliquez sur

Un pop-in va s'ouvrir, il faudra y renseigner les deux champs demandés :

  • Nom de la police : Nommez la police avec son nom d'origine 
  • URL de la police : Renseignez l'URL de la police (Les Web font sont nécessairement chargées via une URL)

Il est fortement conseillé d'utiliser seulement des web fonts, comme les Google Fonts (Retrouvez ici la liste des Google Fonts), compatibles avec l'ensemble des navigateurs. 

⚠️ Assurez-vous d'avoir le droit d'utiliser la police que vous souhaitez appliquer : certaines polices ne sont pas libres de droit, et il est illégal de les utiliser sans disposer de la bonne licence.

Sélectionner une URL Google Fonts

Sur Google Fonts, pour sélectionner l'URL d'une police, rendez-vous ici.

Dans la barre de recherche, sélectionnez la police que vous souhaitez utiliser, en tapant son nom. 

Rajoutez là en cliquant dessus, puis en cliquant sur l'icône



La police est ajoutée à droite dans un onglet dédié, visible en cliquant sur le bouton "Selected families".



Dans la section Embed, copiez l'URL débutant par "https://fonts.google..." et collez-la dans le champ URL de la police dans inwink. 


Une fois les champs renseignés, cliquez sur .
➡️ Une carte contenant un aperçu de la police s'affiche 

Au survol, un crayon d'édition vous permet d'éditer le nom et l'URL de la police, ou de la supprimer. 

Une fois les polices créées, il faut les ajouter  :

  • Police par défaut : il s'agit de la police utilisée sur tous les éléments du site qui ne sont pas des titres dans le site (descriptions, paragraphes, etc.).
  • Police de titre par défaut : Il s'agit de la police utilisée pour tous les éléments qui sont des titres dans le site.

Enfin, cliquez sur  en haut à droite de votre écran.

Roboto est utilisée en police par défaut, Lato est utilisée pour les titres

Dans l'exemple ci-dessus, la police Roboto est utilisée en police par défaut, Lato est utilisée pour les titres. 

L'épaisseur de la police est à choisir dans l'identité visuelle (par exemple un titre en gras).
Pour tout besoin spécifique, nous vous invitons à faire du CSS custom directement dans le bloc concerné ou via les styles globaux. 


 

Que faire si la police ne fonctionne pas ? 

La police ne fonctionne pas si elle n'est pas appliquée dans le carré de l'aperçu dans le back-office. 

⚠️ Il n'est pas possible de charger deux polices avec le même nom

  • Vérifiez que le nom renseigné est bien identique à celui indiqué sur Google Fonts (le nom doit être noté en majuscules) : 


  • Vérifiez que l'URL renseignée est la bonne
    ➡️ avec ce format : https://fonts.googleapis.com/css2?family=Nunito:wght@700&display=swap 

  • Vérifiez que vous n'avez pas accumulé, sur Google Fonts, plusieurs liens vers des polices différentes. En effet, pour ajouter le bon lien URL, il faut que ce soit uniquement celui de la police sélectionnée.
    Par exemple, si vous souhaitez avoir la police "Unbounded", vous verrez ci-dessous que l'URL comprend deux polices différentes : 

 

Pour trouver la bonne URL, il vous suffit de cliquer sur le bouton "Remove all" de la police que vous ne souhaitez pas conserver : 

 

Dans cette vidéo, vous trouverez tout le processus pour l'ajout d'une police, sur votre site inwink :