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"
Pour configurer la police de votre site :
- Rendez-vous dans le back-office de l'évènement
- Onglet Site web & App> Identité visuelle > Police de caractère
En haut de l'écran, cliquez sur le bouton "Ajouter une police" :
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 "Get Font"
La police s'affiche alors, cliquez ensuite sur le bouton "Get embed code": 
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 le bouton "Enregistrer" en haut à droite de votre écran.
Dans l'exemple ci-dessus, la police Karla est utilisée en police par défaut, Karla 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=Karla:ital,wght@0,200..800;1,200..800&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.
Dans cette vidéo, vous trouverez tout le processus pour l'ajout d'une police, sur votre site inwink :